CSS實現彩色波浪效果示例：

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元素來實現彩色波浪效果。