发表于： 2019-07-16 23:32:54
1 1280
今天完成了任务十四的轮番图部分，轮番图主要时用CSS3动画制作的，CSS3动画主要由@keyframes创建动画，@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。然后把动画绑定到一个选择器上。任务十四的轮番图也是用CSS3动画设置的首先创建一个包含图的框架
框架的宽度设置成100vw，高度设置成30vw，注意这里一定要设置vw，设置成%高没办法体现，然后设置动画，动画总长度为10秒，设置成3秒一切换
最后用animation属性把动画与元素绑定这样轮番图就完成了
。制作轮番图也遇到了很多的问题开始时图片各自只显示一半
后来找到了原因是因为图片大小设置不对，调整图片大小这个问题就解决了。还出现一个问题是第三幅图开始时跑到下面
后来查看师兄的代码找到了原因，图片要设置float才行，设置完之后图片恢复了正常。
返回列表
评论