CSS3实现图⽚滚动播放效果
CSS3实现图⽚滚轮效果
在平常我们使⽤⼀些滚动图⽚的效果，都是⽤javascript代码（JQuery）实现，但是在如今Html5和CSS3盛⾏的时代，可以替代javascript代码来实现⼀些常见的效果来提⾼⽹页的加载速度，对⽤户来说体验是更加友好的。特别是现在平台开发⽐较⽕热的年代，同样的效果⽤HTML5+CSS3替代将会带来更绝妙的移动终端体验。⽐如本篇⽂章所要介绍的CSS3图⽚滚轮效果。
本篇内容的知识点来⾃于W3School官⽅⽂档，CSS3 @keyframes 规则。
语法规则：
@keyframes animationname {keyframes-selector {css-styles;}}
动画Animationname为动画名称，由开发者⾃定义，keyframes-selector为动画时长的百分⽐（可以控制其运动速度）。
原理：在⼀个⼩的div⾥⾯嵌套着⼀个⼤div，⼩div和所要展⽰的单张图⽚是同样⾼宽，⼤div⾥⾯是⼀个横向列表，包含所有要展⽰的图⽚，在执⾏过程中，通过改变⼤div的⽔平位置（每次向左或向右移动⼀张图⽚的宽度）来实现图⽚切换。
html滚动效果代码Html关键代码：
<div class="container">
<div class="img">
<ul class="nav">
<li><a href="#"><img src="imgs/logo.png"></a></li>
<li><a href="#"><img src="imgs/name.png"></a></li>
<li><a href="#"><img src="imgs/mmc.png"></a></li>
</ul>
</div>
</div>
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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。