css实现图片轮播
利用css3 animation 属性和 @keyframes 实现图片轮播效果
具体步骤:
1.准备相同大小的多个图片
2.将图片横排放在一个图片盒子里
3.在图片盒子外再加一个展示盒子,展示盒子大小为图片大小
4.给图片盒子添加自定义动画,在动画不同阶段设置递增的偏移值
注意事项:
1.动画效果分为切换和停留两部分
2.动画各阶段偏移值与图片大小有关
3.可以在最后再放一张第一张图片,可以使切换更自然。
HTML代码:
<div > <div > < img src="1.png" /> < img src="2.png" /> < img src="3.png" /> < img src="1.png" /> </div> </div>
CSS代码:
#container { width: 400px; height: 300px; overflow: hidden; } #photo { width: 1200px; animation: switch 5s ease-out infinite; } #photo > img { float: left; width: 400px; height: 300px; } @keyframes switch { 0%, 25% { margin-left: 0; } 35%, 60% { margin-left: -400px; } 70%, 100% { margin-left: -800px; } }
解析:
展示盒子大小和图片大小一致
给图片添加 float 效果,不用考虑margin问题
由于示例只有三个图片,所以添加了三个动画阶段,每一阶段都是通过设置递增的 margin-left 值达到切换的效果
设置的动画阶段(如:35%~60%)是动画停留部分,和上一阶段空余时间(如25%~35%)即为动画切换部分,各部分时间长短需要自己把控
运行效果