实现效果：
图片轮播，鼠标移入后轮播暂停，移除后轮播继续。
基本原理：
利用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% 注意： 您可以用一个动画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>