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>
搞定 !
版权声明：本文为TLSF原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。