纯css如何实现图片轮播
纯css如何实现图片轮播?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
创新互联是一家专注于成都网站制作、成都做网站、外贸营销网站建设与策划设计,卫辉网站建设哪家好?创新互联做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:卫辉等地区。卫辉做网站价格咨询:13518219792
实现思路:
准备相同大小的多个图片
将要展示图片横排放在一个图片容器里面
在图片容器外再加一个展示容器,展示容器大小为图片大小
给图片容器添加自定义动画,在动画不同阶段设置递增的偏移值
注意事项:
动画效果分为切换和停留两部分
自定义动画阶段与图片数量相关
动画各阶段偏移值与图片大小相关
本文中示例最后一个图片到第一个图片没有切换效果,一个思路是可以由最后一个图片再挨个切换到第一个图片
HTML代码:
代码解析:
这里创建了三个 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; } }
代码解析:
展示容器大小和图片大小一致
图片添加 float 效果,不用考虑麻烦的 margin 问题
由于示例只有三个图片,所以添加了三个动画阶段,每一阶段都是通过设置递增的 margin-left 值达到切换的效果
设置的动画阶段(如:35%~60%)是动画停留部分,和上一阶段空余时间(如25%~35%)即为动画切换部分,各部分时间长短需要自己把控
关于纯css如何实现图片轮播问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。
本文名称:纯css如何实现图片轮播
文章网址:http://pwwzsj.com/article/gpdgdj.html