HTML代码：
<div class=”wave”>
<span class=”current”></span>
<span class=”波浪”></span>
<span class=”before”></span>
<span class=”after”></span>
</div>
CSS代码：
.wave {
position: relative;
width: 20px;
height: 20px;
.current,
.before,
.after {
position: absolute;
width: 20px;
height: 20px;
background-color: #f00;
animation-name: wave;
animation-duration: 1s;
animation-iteration-count: infinite;
.current {
animation-iteration-count: 1;
animation-direction: alternate;
.波浪 {
animation-iteration-count: 2;
.before {
animation-duration: 0.5s;
animation-iteration-count: 1;
.after {
animation-duration: 0.5s;
animation-iteration-count: 2;
上述代码创建了一个彩色波浪效果，其中包含一个current标记，表示当前活跃的波浪，多个波浪标记表示波浪的不同部分。使用CSS的动画属性，可以控制波浪的起伏和持续时间。代码中的波浪标记使用了不同的颜色，通过设置animation-name和animation-duration属性来实现彩色波浪效果。在animation-iteration-count属性中，设置为 infinite，表示无限循环。
上述代码可以在HTML中通过添加一个div元素来实现彩色波浪效果。