本文摘自PHP中文网,作者烟雨青岚,侵删。

理论基础
CSS3 animation 属性和 @keyframes 规则
主体思想
1、准备相同大小的多个图片
2、将要展示图片横排放在一个图片容器里面
3、在图片容器外再加一个展示容器,展示容器大小为图片大小
4、给图片容器添加自定义动画,在动画不同阶段设置递增的偏移值
注意事项
动画效果分为切换和停留两部分
自定义动画阶段与图片数量相关
动画各阶段偏移值与图片大小相关
- 本文中示例最后一个图片到第一个图片没有切换效果,一个思路是可以由最后一个图片再挨个切换到第一个图片
HTML
1 2 3 4 5 6 7 |
|
解析:
这里创建了三个 img 元素,img 元素外面是图片容器,图片容器外面是展示容器。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|
解析:
1、展示容器大小和图片大小一致
2、图片添加 float 效果,不用考虑麻烦的 margin 问题
3、由于示例只有三个图片,所以添加了三个动画阶段,每一阶段都是通过设置递增的 margin-left 值达到切换的效果
4、设置的动画阶段(如:35%~60%)是动画停留部分,和上一阶段空余时间(如25%~35%)即为动画切换部分,各部分时间长短需要自己把控
运行效果
感谢大家的阅读,希望大家收益多多。
本文转自:https://blog.csdn.net/u011848617/article/details/80468463
推荐教程:《CSS教程》
以上就是CSS实现轮播图效果(附代码)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《css》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者