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关键代码:
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怎样实现图片滚动播放结果(附代码)的细致内容,更多请关注 百分百源码网 其它相干文章!