CSS隨便玩 - 波浪效果

近來在逛逛網頁時，發現現在的形象網站都做得很 Fashion，也富有許多動畫效果，原本以為是用 GIF 動畫圖片或用 CANVAS 畫出來，但打開 F12 發現大部分都是用 HTML 與 CSS 拼湊出來的，很難想像設計這些動畫的工程師是多麼富有創意。今天限量來研究了一個類似水桶上的水波動動畫效果。


以下為實作的程式碼：
CSS

.wave-container {
  position: relative;
  background-color: #2A73FE;
  width: 200px;
  height: 150px;
  margin: 0 auto;
}

.wave {
  position: absolute;
  bottom: 60%;
  width: 200px;
  height: 100px;
}

.wave::before {
  content: "";
  background-color: #fff;
  opacity: 0.5;
  border-radius: 40%;
  position: absolute;
  left: -75%;
  bottom: 25%;
  width: 500px;
  height: 500px;
  -webkit-animation: spin 8s linear infinite;
  -moz-animation: spin 8s linear infinite;
  animation: spin 8s linear infinite;
}

.wave::after {
  content: "";
  background-color: #fff;
  opacity: 0.5;
  border-radius: 40%;
  position: absolute;
  left: -75%;
  bottom: 25%;
  width: 500px;
  height: 500px;
  -webkit-animation: spin 10s linear infinite;
  -moz-animation: spin 10s linear infinite;
  animation: spin 10s linear infinite;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

HTML

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

執行結果

展示網址：CSS Wave Tank Demo

實作說明

在 CSS 實作中定義了兩個 Class，wave-container (水桶)與 wave (水波)。要使用時顧名思義，要先有水桶裡面才可以放水才會有水波，所以 HTML 就用一個 DIV 掛上 wave-container 當水桶，裡面再掛個 DIV 掛上 wave 當水波。wave-container position 設為 relative 為了將 wave 跟著自己的位置。再來 wave position 設為 absolute 讓他跟著 wave-container。主要的特效重點為wave::before 與 wave::after，當 DIV 掛上 wave 後，會在這個 DIV 裏頭多了 before 與 after 的物件，為了製造出波浪效果，before 和 after 設計成兩個相同的正方形且要設定 border-radius，然後掛上無限旋轉的效果，差異在於要讓兩個的旋轉速度設為不同，再將背景設為白色半透明，這樣兩個轉起來，透過看到邊角的曲線角度差異與兩個旋轉速率不同的邊角，就會看起來像是波浪了。