直播app开发，CSS3动画实现左右无缝滚动图-526互联

直播app开发，CSS3动画实现左右无缝滚动图

<view class="shortList_con">
<view class="scrollCon" :style="'width:' + (shortRouteList.length)*210 + 'rpx'">
<view class="shortItem" v-for="(item, index) in shortRouteList" :key="index">
<text>{{index}}</text>
</view>
</view>
</view>
 
<script>
export default {
data() {
return {
// 数据列表
shortRouteList: [],
}
},
methods: {
// 获取数据列表
getShortRouteList() {
var _this = this;
_this.$u.get('/api/**/getList', {
pages: 1,
limit: 10,
}).then(res => {
uni.hideLoading();
console.log("==获取数据列表==");
console.log(res);
var shortRouteList = res.data;
shortRouteList = shortRouteList.concat(shortRouteList);
// console.log(shortRouteList)
_this.shortRouteList = shortRouteList;
}).catch(res => {
console.log(res);
})
},
}
}
</script>
 
<style scoped>
    .shortList_con {
width: 100%;
overflow: hidden;
}
 
.shortList_con .scrollCon {
white-space: nowrap;
animation: marquee 60s infinite linear normal;
}
 
@keyframes marquee {
0% {
transform: translateX(0);
}
 
100% {
transform: translateX(-100%);
}
}
 
.shortItem {
display: inline-block;
width: 210rpx;
height: 300rpx;
border-radius: 20rpx;
overflow: hidden;
margin-right: 20rpx;
position: relative;
}
 
.shortItem:last-child {
margin-right: 0;
}
 
.shortItem text {
font-size: 32rpx;
font-weight: bold;
text-align: center;
}
<style>

以上就是直播app开发，CSS3动画实现左右无缝滚动图，更多内容欢迎关注之后的文章

无缝