之前公式有一个小的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>
搞定 !