纯css如何实现图片轮播-创新互联
创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商,新人活动买多久送多久,划算不套路!
网站建设哪家好,找成都创新互联公司!专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了博山免费建站欢迎大家使用!纯css如何实现图片轮播?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
实现思路:
准备相同大小的多个图片
将要展示图片横排放在一个图片容器里面
在图片容器外再加一个展示容器,展示容器大小为图片大小
给图片容器添加自定义动画,在动画不同阶段设置递增的偏移值
注意事项:
动画效果分为切换和停留两部分
自定义动画阶段与图片数量相关
动画各阶段偏移值与图片大小相关
本文中示例最后一个图片到第一个图片没有切换效果,一个思路是可以由最后一个图片再挨个切换到第一个图片
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如何实现图片轮播-创新互联
网站URL:http://myzitong.com/article/dioops.html