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

 

 
 
搞定 !