CSS water wave effect All In One

CSS water wave effect All In One

CSS 水波纹特效 All In One

根据鼠标点击位置动态渲染

CSS ripple effect

CSS 波纹效果

https://mladenplavsic.github.io/css-ripple-effect/

https://github.com/mladenplavsic/css-ripple-effect

ripple.css

.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}
.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}
.ripple:active:after {
  transform: scale(0, 0);
  opacity: .2;
  transition: 0s;
}

demos

https://xy-ui.codelabo.cn/docs/#/xy-button

https://github.com/XboxYan/xy-ui/blob/master/components/xy-button.js

pseudo-class

伪类 bug

:active {
  // 
}

⚠️ 只有使用鼠标 ✅，才会触发 :active 伪类, js 无法模拟出来. ❌

https://caniuse.com/mdn-css_selectors_active

refs

https://stackoverflow.com/questions/72893439/is-it-possible-to-change-the-button-css-class-state-from-ripple-to-rippleac

Web Components 组件库 All In One

https://www.cnblogs.com/xgqfrms/p/16423956.html#5075160

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---