css3制作图片自动轮播效果-创新互联
大家在浏览网页的过程中,会遇见一种名叫图片轮播的特殊效果:在同样的位置不同的图片会根据时间的变化循环播放,达到一种类似于播放幻灯片的效果。那么我们在网页开发的过程中如何实现图片的轮播特效呢?本文将向大家展示一下如何使用css3实现图片的轮播特效。
成都创新互联于2013年成立,先为横峰等服务建站,横峰等地企业,进行企业商务咨询服务。为横峰企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。使用css3实现轮播特效的主体思想
我们会在同样的位置准备好多个大小相同的图片,并且横放在div容器内,然后在div容器之上设置一个展示容器,其中展示容器的大小和图片大小相同,最后给图片容器添加自定义动画,并且在动画不同阶段设置递增的偏移值。
注意
动画效果分为两部分:切换和停留。
动画的偏移值和图片大小相关。
使用css3实现轮播特效的原理
首先必须保证展示容器大小与图片大小相同,再为图片添加float效果,然后确定插入的图片数量并且为每个图片设置动画阶段,其中每个阶段都是通过使用keyframes设置递增的margin-left值达到切换的效果。
使用css3实现图片轮播特效的步骤(代码)
步骤一:使用HTML添加图片
步骤二:使用css3设置动画阶段
#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; } }
实现图片轮播的效果图
以上就是如何使用css3实现图片的自动轮播特效(附完整代码)的详细内容,更多请关注创新互联网站制作公司其它相关文章!
当前文章:css3制作图片自动轮播效果-创新互联
地址分享:http://ybzwz.com/article/cdgsis.html