css下边框波浪 |css3 动画 百分比

.wave {
position: relative;
overflow: hidden;
padding-bottom: 14px;
}
.wave:after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 15px;
background: url('wave.svg');
background-repeat: repeat-x;
animation: wave 12s linear infinite;
}
@keyframes wave {
0% {
background-position-x: 0;
}
100% {
background-position-x: 100%;
}
}

首先，大家需要一个带有底部边框的元素，可以是div 或者其他标签。在这个元素中添加一个伪元素:after，并将其位置设为绝对定位，并放置在底部。

为伪元素添加背景图片，并设置background-repeat: repeat-x;，让图片可以水平重复。然后，大家为伪元素添加了一个名为wave的动画。这个动画是一个12秒的线性动画，并且它是无限循环的。

最后，在@keyframes中，大家定义了一个名为wave的动画，让背景图片在12秒内从0%移动到100%的水平位置。这样，大家就实现了一个非常漂亮的下边框波浪效果。