Steps to implement the water ripple effect on mouse click using pure CSS

The steps to implement the mouse click water ripple effect using pure CSS require specific code examples

The mouse click water ripple effect is one of the common interactive effects in web development. It can bring a more vivid experience to users. In this article, we’ll share how to achieve this effect using pure CSS and provide specific code examples.

The implementation steps are as follows:

Step 1: HTML structure

First, create an element with a mouse click effect in the HTML file. You can use a <div> element as a container and set a class name for styling in 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>Step 2: CSS style settings</p> <p>Next, set the styles of the <code>ripple-container and ripple-button classes in the CSS file. We set the ripple-container class to relative positioning to accommodate the water ripple effect. At the same time, the ripple-button class should be set to absolute positioning to ensure that the effect is displayed inside the 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;
}

Step 3: Define the water ripple effect

Use the ::after pseudo-element and the animation attribute to define the water ripple effect. We set the water ripple to be circular and animate it to gradually expand from the inside out. In addition, we also need to set the color and duration of the water ripples.

.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;
  }
}

Step 4: Bind the click event

Finally, bind the click event to the button element in the JavaScript file. When the mouse clicks on the button, a .ripple class will be added to trigger the water ripple effect.

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);
  }
});

So far, we have completed all the steps to achieve the water ripple effect on mouse clicks using pure CSS. By adding the above code and opening the HTML file in the browser, click the button to see the display of the water ripple effect when the mouse clicks.

I hope this article will help you achieve the water ripple effect when you click on the mouse. If you have any questions or doubts, you are always welcome to give feedback. Thank you for reading!