純粋な CSS を使用してマウスクリック時の水の波紋効果を実装する手順

純粋な CSS を使用してマウス クリックの水の波紋エフェクトを実装する手順には、特定のコード サンプルが必要です

マウス クリックの水の波紋エフェクトは、Web で一般的なインタラクティブ エフェクトの 1 つです。より鮮明な体験をユーザーにもたらすことができます。この記事では、純粋な CSS を使用してこの効果を実現する方法を共有し、具体的なコード例を示します。

実装手順は次のとおりです。

ステップ 1: HTML 構造

まず、HTML ファイル内にマウス クリック効果を持つ要素を作成します。 <div> 要素をコンテナとして使用し、CSS でスタイル設定用のクラス名を設定できます。 <pre class='brush:html;toolbar:false;'>&lt;div class=&quot;ripple-container&quot;&gt; &lt;button class=&quot;ripple-button&quot;&gt;Click me&lt;/button&gt; &lt;/div&gt;</pre><p>ステップ 2: CSS スタイル設定</p> <p>次に、CSS ファイルの <code>ripple-container クラスと ripple-button クラスのスタイルを設定します。 。水の波紋効果に対応するために、ripple-container クラスを相対位置に設定します。同時に、ボタン内にエフェクトが表示されるように、ripple-button クラスを絶対配置に設定する必要があります。

.ripple-container {
  position: relative;
  display: inline-block;
}

.ripple-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 24px;
  background-color: #44a1ff;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

ステップ 3: 水の波紋エフェクトを定義する

::after 疑似要素と animation 属性を使用して水の波紋を定義します効果。水の波紋を円形に設定し、内側から外側に向かって徐々に広がるようにアニメートします。さらに、水の波紋の色と持続時間を設定する必要もあります。

.ripple-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  animation: rippleEffect 1s ease-out;
}

@keyframes rippleEffect {
  0% {
    width: 0;
    height: 0;
    opacity: 0.4;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}

ステップ 4: クリック イベントをバインドする

最後に、クリック イベントを JavaScript ファイルのボタン要素にバインドします。マウスでボタンをクリックすると、水の波紋効果をトリガーする .ripple クラスが追加されます。

const button = document.querySelector('.ripple-button');

button.addEventListener('click', function(e) {
  // 只有当水波纹动画结束后，我们才会添加动画类
  if (!button.classList.contains('ripple')) {
    button.classList.add('ripple');
    setTimeout(function(){
      button.classList.remove('ripple');
    }, 1000);
  }
});

これまでのところ、純粋な CSS を使用してマウスクリック時の水の波紋効果を実現するためのすべての手順が完了しました。上記のコードを追加し、ブラウザで HTML ファイルを開くと、ボタンをクリックして、マウスをクリックしたときに水の波紋エフェクトが表示されることを確認します。

この記事が、マウスをクリックしたときの水の波紋効果を実現するのに役立つことを願っています。ご質問や疑問がございましたら、いつでもフィードバックをお寄せください。読んでいただきありがとうございます。