CSS实现轮播图结果(附代码)
CSS实现轮播图结果(附代码)
理论根基
CSS3 animation 属性和 @keyframes 规则
主体思想
1、预备雷同大小的多个图片
2、将要展现图片横排放在一个图片容器里面
3、在图片容器外再加一个展现容器,展现容器大小为图片大小
4、给图片容器增加自定义动画,在动画不一样阶段设定递增的偏移值
留意事项
动画结果分为切换和逗留两部分
自定义动画阶段与图片数目相关
动画各阶段偏移值与图片大小相关
- 本文中示例最后一个图片到第一个图片没有切换结果,一个思绪是可以由最后一个图片再受个切换到第一个图片
HTML
<p id="container"> <p id="photo"> <img src="1.png" /> <img src="2.png" /> <img src="3.png" /> </p> </p>
解析:
这里创立了三个 img 元素,img 元素外面是图片容器,图片容器外面是展现容器。
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; } }
解析:
1、展现容器大小和图片大小一致
2、图片增加 float 结果,不消思考费事的 margin 问题
3、由于示例只要三个图片,所以增加了三个动画阶段,每一阶段都是通过设定递增的 margin-left 值到达切换的结果
4、设定的动画阶段(如:35%~60%)是动画逗留部分,和上一阶段空余时间(如25%~35%)即为动画切换部分,各部分时间长短需要本人把控
运转结果
感激大家的阅读,但愿大家收益很多。
本文转自:https://blog.csdn.net/u011848617/article/details/80468463
引荐教程:《CSS教程》
以上就是CSS实现轮播图结果(附代码)的具体内容,更多请关注百分百源码网其它相关文章!