html部分
<body>
<div id="wrap">
<ul id="list">
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
<li>5
</li>
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
<li>5
</li>
</ul>
</div>
</body>
css部分
<style>
*{padding: 0; margin: 0;}
#wrap{width: 500px; height: 100px; position: relative; margin: 180px; overflow: hidden;}
#list{width: 1000px; height: 100px; position: absolute; top: 0; left: 0; -webkit-animation: 5s domove linear infinite; -ms-animation: 3s domove linear infinite;}
#list li{width: 98px; height: 98px; border: 1px solid #fff; background: black; list-style: none; float: left; color: #fff; font-size: 25px; line-height: 98px; text-align: center;}
@-webkit-keyframes domove{
0%{
left: 0%;
}
100%{
left: -500px;
}
}
@-ms-keyframes domove{
0%{
left: 0%;
}
100%{
left: -500px;
}
}
#wrap:hover #list{ -webkit-animation-play-state: paused;} //停止动画
</style>
效果图
转载请注明原文地址: https://www.6miu.com/read-58525.html
