前端用图片做背景无缝循环滚动

前端写网页的时候可能会遇到要用一张图片做背景循环滚动的需求

贴一下我的代码还有实际效果

<template>
	<view class="main">
		<view class="content">
			<view class="box">
				<image class="img" src="@/static/web-back1.png"></image>
				<image class="img" src="@/static/web-back1.png"></image>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 500rpx;
		height: 500rpx;
		border: 4rpx solid red;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		overflow: hidden;
		.box{
			width: 1000rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			animation: bak 3s linear  infinite;
			animation-fill-mode: both;
			.img{
				padding: 0rpx 10rpx;
				width: 500rpx;
				height: 500rpx;
			}
		}
		
	}
	@keyframes bak{
		0%{transform: translate(0rpx);}
		100%{transform: translateX(-500rpx);}
	}
</style>

我用的是uniapp写的，如果是用vue来运行，请把view换成div，单位rpx换成px即可

原理就是 两张一样的图，用css动画让他们滚动起来。

贴下我的运行效果：