css3实现动态滚动播放列表功能

css3实现动态滚动播放列表功能

需要自动滚动循环播放的列表，使用纯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实现动态滚动播放列表功能