CSS3实现图片滚轮效果
在平常我们使用一些滚动图片的效果，都是用javascript代码（JQuery）实现，但是在如今Html5和CSS3盛行的时代，可以替代javascript代码来实现一些常见的效果来提高网页的加载速度，对用户来说体验是更加友好的。
特别是现在微信平台开发比较火热的年代，同样的效果用HTML5+CSS3替代将会带来更绝妙的移动终端体验。比如本篇文章所要介绍的CSS3图片滚轮效果。
本篇内容的知识点来自于W3School官方文档，CSS3 @keyframes 规则。
立即学习“前端免费学习笔记（深入）”；
地址链接：http://www.w3school.com.cn/css3/css3_animation.asp
语法规则：
@keyframes animationname {keyframes-selector {css-styles;}}
登录后复制
动画Animationname为动画名称，由开发者自定义，keyframes-selector为动画时长的百分比（可以控制其运动速度）。
原理：在一个小的p里面嵌套着一个大p，小p和所要展示的单张图片是同样高宽，大p里面是一个横向列表，包含所有要展示的图片，在执行过程中，通过改变大p的水平位置（每次向左或向右移动一张图片的宽度）来实现图片切换。
Html关键代码：
登录后复制 @@##@@ @@##@@ @@##@@
CSS样式关键代码：
.nav{ width:2000px; height:150px; position:absolute; left:0px; top:0; z-index:9; animation:myfirst 6s infinite; -webkit-animation:myfirst 6s infinite; -0-animation:myfirst 6s infinite; -moz-animation:myfirst 6s infinite; } @keyframes myfirst { 0% {left: 0px;} 26.6% {left: 0px;} 36.6% {left: -320px;} 63.2% {left: -320px;} 73.2% {left: -640px;} 99.7% {left: -640px;} 100% {left: -0px;} }
登录后复制
如果想在展现形式上有所变更就需要调节百分比（图片停留时间和滚动速度）和移动距离。
CSS3技术因为考虑到浏览器兼容问题，所以要针对每种浏览器写出样式，名称更改为一下，其他相同。
@-o-keyframes myfirst
@-moz-keyframes myfirst
@-webkit-keyframes myfirst
滚动算法优化见demo
Demo演示链接
http://wongleetion.sinaapp.com/
本文转自：https://blog.csdn.net/u013741507/article/details/38779093
推荐教程：《CSS教程》
以上就是CSS3如何实现图片滚动播放效果（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2885292.html
