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

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