html css动画效果向左循环滚动_css animation向左循环滚动

动画效果向左循环滚动

Css部分

.ad-all{
overflow: hidden;
height: 100px;
}
.ad-ul{
width:200%;
list-style: none;
animation-name: move;//名称
animation-duration: 10s;//时间
animation-iteration-count:infinite;//无限循环
animation-timing-function: linear;
}

.ad-ul-li{
    width: 240px;float: left;
}

.ad-ul-li-img{width:100%}
/* 创建动画 */
@keyframes move {
    from{
        transform: translateX(0);
    }to{
        transform: translateX(-960px);-960px是屏幕总宽度
    }
}
/* 鼠标上移 停止动画 */
.ad-all:hover ul{
    cursor: pointer;animation-play-state: paused;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

htm部分

 <div class="ad-all">
     <ul class="ad-ul">
        <li class="ad-ul-li"><a href="#"><img src="img/g-2.jpg" class="ad-ul-li-img"/></a></li>
           <li class="ad-ul-li"><a href="#"><img src="img/g-2.jpg" class="ad-ul-li-img"/></a></li>
              <li class="ad-ul-li"><a href="#"><img src="img/g-2.jpg" class="ad-ul-li-img"/></a></li>
                 <li class="ad-ul-li"><a href="#"><img src="img/g-2.jpg" class="ad-ul-li-img"/></a></li>
   <li class="ad-ul-li"><a href="#"><img src="img/g-2.jpg" class="ad-ul-li-img"/></a></li>
      <li class="ad-ul-li"><a href="#"><img src="img/g-2.jpg" class="ad-ul-li-img"/></a></li>
      </ul>
 </div>
1
2
3
4
5
6
7
8
9
10