动画效果向左循环滚动
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;
}
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>