Home>Article>Web Front-end> Learn about the css3+javascript button water ripple effect through code examples

Learn about the css3+javascript button water ripple effect through code examples

青灯夜游
青灯夜游 forward
2021-04-27 10:24:24 3081browse

This article uses code examples to introduce how to use css3 javascript to achieve the water ripple effect of buttons. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Learn about the css3+javascript button water ripple effect through code examples

css3 js to achieve button water ripple effect

HTML

  • First we usetags to define two buttons
button button

CSS3

  • Adjust layout style
  • Color range
* { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; /* 字体 */ } body { display: flex; justify-content: center;/* 弹性盒子 */ align-items: center; min-height: 100vh; flex-direction: column; background: #1f2a33; } a { position: relative; display: inline-block; padding: 12px 36px; margin: 10px 0; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 18px; letter-spacing: 2px; border-radius: 40px; overflow: hidden; background: linear-gradient(90deg, #0162c8, #55e7fc); } /* 子伪类选择器 */ a:nth-child(2) { background: linear-gradient(90deg, #755bea, #ff72c0); } span { position: absolute; background: #fff; transform: translate(-50%, -50%); pointer-events: none; border-radius: 50%; animation: animate 1s linear infinite; } @keyframes animate { 0% { width: 0px; height: 0px; opacity: 0.5; } 100% { width: 500px; height: 500px; opacity: 0; } }

JavaScript

  • Enable js listening event
  • Timer
  • Purpose: To control the animation and click effects per unit time to be unified
const buttons = document.querySelectorAll('a'); buttons.forEach(btn => { //箭头函数 (ES6) btn.addEventListener('click', function (e) { let x = e.clientX - e.target.offsetLeft; let y = e.clientY - e.target.offsetTop; let ripples = document.createElement('span'); ripples.style.left = x + 'px'; ripples.style.top = y + 'px'; this.appendChild(ripples); setTimeout(() => { ripples.remove() }, 1000); }) })

Rendering:

Learn about the css3+javascript button water ripple effect through code examples

For more programming-related knowledge, please visit:programmingvideocourse! !

The above is the detailed content of Learn about the css3+javascript button water ripple effect through code examples. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete