我要评论需要自动滚动循环播放的列表，使用纯css实现基础循环功能
.messages
animation-name carousel
animation-timing-function linear
animation-iteration-count infinite
.message-item
cursor pointer
margin-top 10px
&.stopplay
animation-play-state paused
/**
css3 animation-play-state 属性 值为paused时暂停动画，为running时继续动画
*/
@keyframes carousel {
0% {
transform: translatey(0%)
}
100% {
transform: translatey(-50%)
}
}完整代码
<template>
<div>
<div class="top-line">
<div class="box-title">
<span class="title">xxxx专题图</span>
</div>
</div>
<div class="scroll-box">
<ul class="messages" @mouseover="stopanim" @mouseout="runanim" v-if="list.length"
:style="{ animationduration: animationduration }" :class="{ stopplay: animationplaystate }">
<li class="message-item" v-for="(item, index) in list" :key="index" @click="todetail(item)">
<div class="message-top">
<span class="message-title">{{ item.name }}</span>
<span class="message-time">{{ item.startdate }}</span>
</div>
<p class="message-content">{{ item.content }}</p>
</li>
</ul>
<div class="none" v-else>
暂无内容
</div>
</div>
</div>
</template><script>
import test11list from '@/assets/test11list'
export default {
data() {
return {
animationduration: '',
animationplaystate: false,
list: test11list.list,
category: ''
};
},
mounted() {
this.getdata()
},
methods: {
getdata() {
let data = this.list
if (data.length <= 2) {
this.animationplaystate = true
this.animationduration = 2 + 's'//动画持续时间
} else {
// 跑马灯动画
this.animationduration = data.length * 2 + 's'
this.list = this.list.concat(this.list)
}
},
stopanim() {//鼠标移入暂停动画
this.animationplaystate = true
},
runanim() {//鼠标移除继续动画
if (this.list.length > 2) {
this.animationplaystate = false
}
}
},
};
</script><style lang="stylus" scoped>
*{
margin: 0
padding: 0
}
ul{
list-style: none
}
.scroll-box{
width 100%
height 800px
overflow hidden
border 2px solid red
}
.box-title
line-height 34px
font-size 16px
background: blue
color: #fff
opacity 1
.messages
animation-name carousel
animation-timing-function linear
animation-iteration-count infinite
.message-item
cursor pointer
margin-top 10px
&.stopplay
animation-play-state paused
/**
css3 animation-play-state 属性 值为paused时暂停动画，为running时继续动画
*/
.none
text-align center
line-height 537px
color #fff
@keyframes carousel {
0% {
transform: translatey(0%)
}
100% {
transform: translatey(-50%)
}
}
</style>到此这篇关于css3实现动态滚动播放列表的文章就介绍到这了,更多相关css3滚动播放列表内容请搜索代码网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持代码网！
发表评论