Langkah untuk melaksanakan kesan riak air pada klik tetikus menggunakan CSS tulen

Langkah-langkah untuk melaksanakan kesan riak air klik tetikus menggunakan CSS tulen memerlukan contoh kod khusus

Kesan riak air klik tetikus ialah salah satu kesan interaktif biasa dalam pembangunan web, dan ia boleh membawa pengalaman yang lebih jelas kepada pengguna . Dalam artikel ini, kami akan berkongsi cara untuk mencapai kesan ini menggunakan CSS tulen dan memberikan contoh kod khusus.

Langkah pelaksanaan adalah seperti berikut:

Langkah 1: Struktur HTML

Mula-mula, cipta elemen dengan kesan klik tetikus dalam fail HTML. Anda boleh menggunakan elemen <div> sebagai bekas dan menetapkan nama kelas untuk penggayaan dalam CSS. <code><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);
  }
});

Langkah 2: Penggayaan CSS

Seterusnya, tetapkan gaya kelas ripple-container dan ripple-button dalam fail CSS. Kami menetapkan kelas ripple-container kepada kedudukan relatif untuk menampung kesan riak air. Pada masa yang sama, kelas ripple-button hendaklah ditetapkan kepada kedudukan mutlak untuk memastikan kesannya dipaparkan di dalam butang.

rrreee

Langkah 3: Tentukan kesan riak air🎜🎜Gunakan elemen pseudo ::after dan atribut animasi untuk menentukan kesan riak air. Kami menetapkan riak air menjadi bulat dan menghidupkannya secara beransur-ansur dari dalam ke luar. Selain itu, kita juga perlu menetapkan warna dan tempoh riak air. 🎜rrreee🎜Langkah 4: Ikat acara klik 🎜🎜Akhir sekali, ikat acara klik pada elemen butang dalam fail JavaScript. Apabila tetikus mengklik butang, kelas .ripple akan ditambah untuk mencetuskan kesan riak air. 🎜rrreee🎜Pada ketika ini, kami telah menyelesaikan semua langkah untuk mencapai kesan riak air pada klik tetikus menggunakan CSS tulen. Dengan menambah kod di atas dan membuka fail HTML dalam penyemak imbas, klik butang untuk melihat paparan kesan riak air apabila tetikus mengklik. 🎜🎜Saya harap artikel ini akan membantu anda mencapai kesan riak air apabila anda mengklik pada tetikus Jika anda mempunyai sebarang pertanyaan atau keraguan, sila berikan maklum balas. Terima kasih kerana membaca. 🎜