实现效果:
图片轮播,鼠标移入后轮播暂停,移除后轮播继续。
基本原理:
利用Css3 animation动画属性,用transform 实现图片移动。通过图片复制备份,实现的图片的无缝衔接。
核心知识点:
1、@keyframes 通过 @keyframes 规则,您能够创建动画。
Firefox 支持 @-moz-keyframes 规则。
Opera 支持 @-o-keyframes 规则。
Safari 和 Chrome 支持 @-webkit-keyframes 规则。
语法
@keyframes animationname {keyframes-selector {css-styles;}}
值 | 说明 |
---|---|
animationname | 必需的。定义animation的名称。 |
keyframes-selector | 必需的。动画持续时间的百分比。 合法值: 0-100%
扫描二维码关注公众号,回复:
7670119 查看本文章
![]() 注意: 您可以用一个动画keyframes-selectors。 |
css-styles | 必需的。一个或多个合法的CSS样式属性 |
2、animation
Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
Safari 和 Chrome 支持替代的 -webkit-animation 属性。
注释:Internet Explorer 9 以及更早的版本不支持 animation 属性。
实例:
animation: imgMove 5s linear infinite;
参数:
animation-name 执行动画的名称 imgMove
animation-duration 完成动画的时间5s
animation-timing-function 完成动画是的速度 linear -匀速
animation-iteration-count 播放的次数 infinite-无限次播放
3、最后是实现鼠标移入动画暂停,这里有两个介绍:
:hover{}定义鼠标移入触发的事件
animation-play-state:paused/running 动画的暂停与播放
代码:图片大小请自行添加。例子中是90px*90px
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } div { width: 360px; height: 90px; margin: 200px auto; overflow: hidden; } div>ul { /*设置ul的宽度为2倍div的宽度*/ width: 200%; list-style: none; /*动画属性*/ animation: imgMove 5s linear infinite; } /* 暂停动画 */ div>ul:hover { animation-play-state: paused; } div>ul>li { width: 90px; float: left; } div img { width: 100%; } /*创建动画*/ @keyframes imgMove { from { transform: translateX(0px); } to { transform: translateX(-360px); } } </style> </head> <body> <div> <ul> <li><img src="images/1.png" alt="" /></li> <li><img src="images/2.png" alt="" /></li> <li><img src="images/3.png" alt="" /></li> <li><img src="images/4.png" alt="" /></li> <!--将需要轮播的图片在复制一份--> <li><img src="images/1.png" alt="" /></li> <li><img src="images/2.png" alt="" /></li> <li><img src="images/3.png" alt="" /></li> <li><img src="images/4.png" alt="" /></li> </ul> </div> </body> </html>