CSS3制作圓形水波

在CSS3中，我們可以使用動(dòng)畫和線性漸變來制作一個(gè)圓形水波效果，以下是一個(gè)簡(jiǎn)單的示例：

HTML結(jié)構(gòu)：

<div class="water-wave"></div>

CSS樣式：

.water-wave {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(to right, #000, #000 20%, #fff 20%, #fff 40%, #000 40%, #000 60%, #fff 60%, #fff 80%, #000 80%, #000);
  animation: water-wave 2s linear infinite;
}
@keyframes water-wave {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)帶有圓形邊框的div元素，并使用線性漸變來模擬水波的效果，我們使用@keyframes規(guī)則來創(chuàng)建一個(gè)名為water-wave的動(dòng)畫，該動(dòng)畫將元素從rotate(0)旋轉(zhuǎn)到rotate(1turn)，從而實(shí)現(xiàn)水波不斷旋轉(zhuǎn)的效果，我們將動(dòng)畫應(yīng)用到div元素上，并設(shè)置動(dòng)畫的持續(xù)時(shí)間為2秒，以及無限循環(huán)。