Css特效涟漪按钮

编程入门行业动态更新时间:2024-10-17 07:30:05

Css特效<a href=https://www.elefans.com/category/jswz/34/1711292.html style= 涟漪按钮"/>

Css特效涟漪按钮

1. 首先创建两个按钮，使按钮居中，圆角，渐变等

2. 接着获取按钮元素，遍历出每个a标签，mousedown鼠标点击接着给它一个回调function（e）对象，然后设置一个span元素，接着运算这个span的坐标，因为它是点击哪就以哪为中心扩散的，所以这个坐标是随着你点击的位置进行改变的。我们只要获取到当前点击的坐标和当前元素距离界面窗口的一个位置进行运算就能得到一个最合适的坐标

5.最后span的样式，transform：translate（-50%，-50%）是让它每次点击都是居中展开。

更多推荐

Css特效涟漪按钮

本文发布于:2024-02-26 02:46:14，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1701100.html