css：无限滚动波浪线

以上是需要实现的效果，一条无限滚动波浪线，可以用来做区块的分割线。

要形成上下交替的圆形，思路是给div加圆角边框，第一个只有上边框，第二个只有下边框。

循环了100个div，这个数量根据自己容器宽度调整，或者动态计算。

<div class="wave-container">
		<div class="waves">
			<div class="wave" v-for="item in 100"></div>
		</div>
</div>

css需要注意的点就是容器overflow要设置hidden，然后使用奇数偶数来设置上下边框。 

.wave-container {
		margin-top: 10%;
		overflow: hidden;
		display: flex;
	}

	.waves {
		display: flex;
	}
.wave:nth-child(odd) {
		border-radius: 50% 50% 0 0;
		border-top: 1px solid #55aaff;
	}

	.wave:nth-child(even) {
		border-radius: 0 0 50% 50%;
		border-bottom: 1px solid #55aaff;
	}

这样一条静态的波浪线就生成了，然后要让它动起来，加上动画即可，设置infinite，就会无限滚动。

.waves {
		display: flex;
		animation: wave-scroll 20s linear infinite;
	}

	@keyframes wave-scroll {
		from {
			transform: translateX(0);
		}

		to {
			transform: translateX(-100%);
		}
	}

 但是现在的效果是波浪滚动全滚动到左边后，就产生空白了，要形成无缝衔接的效果，就需要复制一个相同的波浪，如下图，1号和2号，它俩都向左移动，当1号移出容器后，2号替代1号占据了容器，此时1号已经移动到-100%的位置，然后1号又回到0%重新向着-100%运动，如此交替移动，形成无缝衔接，平时经常用到的无缝衔接滚动列表也可以用这个思路实现。

以下是全部代码：

<template>
	<div class="wave-container">
		<div class="waves">
			<div class="wave" v-for="item in 100"></div>
		</div>
		<div class="waves">
			<div class="wave" v-for="item in 100"></div>
		</div>
	</div>
</template>

<script>
</script>

<style scoped>
	.wave-container {
		margin-top: 10%;
		overflow: hidden;
		display: flex;
	}

	.waves {
		display: flex;
		animation: wave-scroll 20s linear infinite;
	}

	@keyframes wave-scroll {
		from {
			transform: translateX(0);
		}

		to {
			transform: translateX(-100%);
		}
	}

	.wave {
		width: 30px;
		height: 30px;
	}


	.wave:nth-child(odd) {
		border-radius: 50% 50% 0 0;
		border-top: 1px solid #55aaff;
	}

	.wave:nth-child(even) {
		border-radius: 0 0 50% 50%;
		border-bottom: 1px solid #55aaff;
	}
</style>