提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: HTML教程 > CSS3如何实现图片滚动播放效果(附代码)_html5教程,css

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如何实现图片滚动播放效果(附代码)的详细内容,更多请关注ki4网其它相关文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"CSS3如何实现图片滚动播放效果(附代码)_html5教程,css"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线