html内容
<div id="summer-wrap">
<div class="list">
<ul>
<li class="summerList" v-for="(item,index) in summerData" :key="index">
{{item.name}}
</li>
<li class="summerList" v-for="(item,index) in summerData" :key="'li2' + index">
{{item.name}}
</li>
</ul>
</div>
</div>
css
#summer-wrap{
width:100%;
height: 400px;
position: relative;
overflow:hidden;
}
.list{
position: absolute;
left: 0;
top: 0;
-webkit-animation: 30s move infinite linear;
width: 2544px; //列表实际宽度的一半
}
@-webkit-keyframes move{
0% {
left: 0;
}
50%{
left:-1272px;
}
100% {
left: -2544px //和list的宽度需一致
}
}
@keyframes move {
0% {
left: 0;
}
50%{
left:-1272px;
}
100% {
left: -2544px;
}
}
#summer-wrap:hover .list {
// 动画暂停播放
-webkit-animation-play-state: paused;
}