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>