重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章运用简单易懂的例子给大家介绍CSS3如何实现图片滚动播放效果,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
创新互联建站-专业网站定制、快速模板网站建设、高性价比通榆网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式通榆网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖通榆地区。费用合理售后完善,十余年实体公司更值得信赖。
CSS3实现图片滚轮效果
在平常我们使用一些滚动图片的效果,都是用javascript代码(JQuery)实现,但是在如今Html5和CSS3盛行的时代,可以替代javascript代码来实现一些常见的效果来提高网页的加载速度,对用户来说体验是更加友好的。
特别是现在微信平台开发比较火热的年代,同样的效果用HTML5+CSS3替代将会带来更绝妙的移动终端体验。比如本篇文章所要介绍的CSS3图片滚轮效果。
本篇内容的知识点来自于W3School官方文档,CSS3 @keyframes 规则。
语法规则:
@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
关于CSS3如何实现图片滚动播放效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。