CSS3如何实现图片滚动播放效果（附代码）

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关键代码：

<p class="container">

<p 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>

</p>

</p>

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如何实现图片滚动播放效果（附代码）的详细内容。更多信息请关注PHP中文网其他相关文章！