css3 轮播图
之前公式有一个小的case，文字轮播，鼠标移入后轮播暂停，移除后轮播继续，考虑用js写，但想到c3动画api：animation可以实现，就利用它来实现，不需要js哦。
首先还是介绍一下animation吧。
基础用法（详见w3c）：
下面开始代码实现步骤
1，轮播图的实现原理如图（渣渣美术手感，谢绝吐槽─━ _ ─━）
html元素构建结构类似这样
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
</ul>
</div>
如图，设置每个li标签的宽高和显示元素<div>相同，这时候会发现ul的长度会超过div,再利用css属性中overflow：hidden，（内容会被修剪，并且其余内容是不可见的）。他会隐藏掉多余的部分，这样：
这是后你移动ul,就会产生图片移动的轮播效果
好，下面我们进入代码编写模块。
首先根据 animation的设置，写一个
@keyframes
@keyframes imgMove {
from {
transform: translateX(0px);
}
to {
transform: translateX(-882px);
}
}
这里可以看到，我是利用transform: translateX( )来控制他的位移的，
然后是animation 的编写
animation: imgMove 5s linear infinite;
介绍一下设置
1- animation-name 执行动画的名称imgMove
2-animation-duration 完成动画的时间5s
3-animation-timing-function 完成动画是的速度 linear -匀速
4-animation-iteration-count 播放的次数 infinite-无限次播放
最后是实现鼠标移入动画暂停，这里有两个介绍：
1· :hover{}定义鼠标移入触发的事件
2·animation-play-state:paused/running 动画的暂停与播放
下面是完整代码，使用时需要添加图片，各位自己添加哈
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 882px;
height: 86px;
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: 126px;
float: left;
}
div img {
width: 100%;
}
/*创建动画*/
@keyframes imgMove {
from {
transform: translateX(0px);
}
to {
transform: translateX(-882px);
}
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="images/1.jpg" alt=""/></li>
<li><img src="images/2.jpg" alt=""/></li>
<li><img src="images/3.jpg" alt=""/></li>
<li><img src="images/4.jpg" alt=""/></li>
<li><img src="images/5.jpg" alt=""/></li>
<li><img src="images/6.jpg" alt=""/></li>
<li><img src="images/7.jpg" alt=""/></li>
<!--将需要轮播的图片在复制一份-->
<li><img src="images/1.jpg" alt=""/></li>
<li><img src="images/2.jpg" alt=""/></li>
<li><img src="images/3.jpg" alt=""/></li>
<li><img src="images/4.jpg" alt=""/></li>
<li><img src="images/5.jpg" alt=""/></li>
<li><img src="images/6.jpg" alt=""/></li>
<li><img src="images/7.jpg" alt=""/></li>
</ul>
</div>
</body>
</html>
