html 图片自动滚动播放,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关键代码：

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

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/1790.html

微信打赏

支付宝打赏

感谢您对作者dylon的打赏，我们会更加努力！如果您想成为作者，请点我

html 图片自动滚动播放,CSS3实现图片滚动播放效果相关推荐

织梦网站巧用标签实现图片自动Alt功能，强化织梦seo效果
织梦网站巧用标签实现图片自动Alt功能,强化织梦seo效果很多织梦网站的站长筒子们在做网站的时候,在网站中有时候会插入图片,尤其是那些使用图片类型织梦模板的站长筒子,在使用图片集的时候,会用到很多的 ...
html图片自动适应,css如何让图片自适应？
要使图片能够自适应显示,我们一般可以通过设置CSS样式,让图片作为父元素的背景图片,再设置相关属性来实现.下面我们来看一下使用css设置图片自适应的方法. css设置图片自适应示例: HTML代码: ...
html图片左右滚动播放,CSS3实现横向滚动播放
CSS3实现无限横向滚动,纵向滚动同理,控制属性left换成top既可以 2020年消防工程报名条件已经公布,各个地区的考生可以根据自身条件查看是否符合标准 2020年消防工程报名条件已经公布,各个地 ...
html5图片自动翻转特效,CSS3带动态阴影效果的3D图片翻转特效
在前不久我们讲解了CSS3 3D卡片翻转技术,在这篇文章中,我们要跟进一步,在卡片3D翻转的基础上,制作卡片的动态阴影效果.最终效果是鼠标滑过图片时,卡片会3D翻转,图片的背面显示图片的标题,在图片的 ...
html怎么给图片加倒影,用CSS3实现图片倒影效果，同时给出兼容早期版本IE的方案...
关于倒影效果,相信大家都不陌生.它在web2.0时代颇受欢迎,几乎每个网站都喜欢使用一下,至少可以让网站的设计跟得上时代的步伐. 现在,这种效果虽然谈不上时尚,但仍然符合大众的审美标准.用的人少了,大 ...
css 图片变大缩小,css3实现图片的变大变小
主要是使用 css3的animation,scale等于1是原图大小,大于1是把图片放大,小于1 是把图片缩小.animation-delay用来延迟5秒触发这个动画 Document * { mar ...
html怎样让图片自动转圈,html5怎样做出图片转圈的动画效果
这次给大家带来html5怎样做出图片转圈的动画效果,h5做出图片转圈的动画效果的注意事项有哪些,下面就是实战案例,一起来看一下. @mixin ani-btnRotate{ @keyframes bt ...
html如何设置图片自动居中,css如何使图片居中？
在我们的WEB前端css开发过程中,我们避免会遇到让图片居中的情况,为了网页美观以及用户的体验,我们有时候就要让图片居中,那么我们也都知道图片居中的方法有很多,今天我们就给大家详细介绍下CSS实现图片 ...
css中图片渐变怎么弄,CSS3 渐变图片滤镜
CSS 语言: CSSSCSS 确定 *, ::before, ::after { -moz-box-sizing: border-box; box-sizing: border-box; } bod ...

html 图片自动滚动播放,CSS3实现图片滚动播放效果

html 图片自动滚动播放,CSS3实现图片滚动播放效果相关推荐

最新文章

热门文章