🌊ビッグウェーブに乗ろう🏄CSSで簡単な動く波を作る

# シンプルなCSSで波を描画する

HTMLとCSSだけで簡単に波を表現できる方法を紹介します。

SVGで波のパスを定義

まずSVGの<path>要素を使って、波の形状を定義します。

<svg>
  <defs>
    <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" /> 
  </defs>
</svg>

ここではシンプルな波形のパスをd属性に指定しています。

CSSでアニメーション

この波形を複数重ねて適用し、CSSのanimationを使って動かします。

.wave {
  animation: wave 10s linear infinite;
}
.wave:nth-child(2) {
  animation-delay: 0.5s;  
}
/* 中略 */
@keyframes wave {
  0% { transform: translateX(0); }
  50% { transform: translateX(50px); }
  100% { transform: translateX(0); }  
}

位置を往復させるアニメーションを指定し、少しずつタイミングをずらして重ねていくことで、自然な波を表現できます。

簡単な波が完成

HTMLとCSSだけで、コード量を最小限にしながらシンプルな波を実装できました。

SVGの形状とアニメーションを使いこなすことで、様々なエフェクトが表現できます。