uniapp项目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>

核心要点

1、scrollCon需要添加css：white-space: nowrap。

2、scrollCon的宽度动态计算，是每个子item的宽度*数据长度。

3、如果动画速度过快or过慢，可以修改动画的60s。