共计 1534 个字符，预计需要花费 4 分钟才能阅读完成。
前言
在上一篇，我们已经实现了用纯 css 实现水滴扩散动画，但是有一些瑕疵，文章结尾处也提到过，一是页面加载进来就会看到按钮上的水滴动画运动一次，二是点击的时候不能根据鼠标的位置来扩散，今天我们来解决这个问题。
以下所有基础代码均来自上一篇
css 中只能做到固定的点扩散
无法避免的 js
虽然我很想通过 css 来实现想要的效果，毕竟属于 UI 交互方面，尽量别扯上 js，无奈后劲不足，很多功能确实无法实现，比如获取鼠标位置，这个 css 就真没辙了。
思考了很久，还是只能通过 js 来获取位置坐标了，但是我们可以减少 js 的逻辑，我们只需要知道坐标即可，剩下的给 css 来做就好了。
实现思路
css 新特性
其实用的 css 很多新特性的话，很多以前只能通过 js 来实现的 css 也可以代替了。
css 原生变量 var，大家平时应该都接触过了吧。可能平时由于兼容性的问题，用起来缩手缩脚，干脆为了兼容性就不用了
其实只要不考虑 IE 的话兼容性还是可以的，就算要兼顾 IE，可以保证按钮是完好的，只是没有动画效果不就可以了吗，这也是所谓的优雅降级吧
var 的用法很简单
:root {
–main-bg-color: red;
}
.container {
width: 20px;
height: 20px;
background-color: var(–main-bg-color);/**background-color:red**/
}
有关 var 的详细用法，大家可以自行百度
全能 js
我们用 js 只有一个目的，就是获取鼠标点击的位置
很简单，事件对象 event 中有个 offsetX 和 offsetY 就是用来描述鼠标位置相对于父元素的位置
其实这个属性早些年是 IE 私有的，谷歌和火狐看着好用，不知道从上面版本也都支持了，所以兼容性没太大问题~
var x = event.offsetX;
var y = event.offsetY;
具体实现
我们需要在点击的时候获取到左边，然后存在 css 变量中
示例代码
function ripple(ev){
var x = ev.offsetX;
var y = ev.offsetY;
this.style.setProperty(‘–x’,x+’px’);
this.style.setProperty(‘–y’,y+’px’);
}
没错，就这么一丁点 js
相应的 css 部分我们要拿到我们保存的变量，来改变中心点的位置
.btn>span:after{
content: ”;
position: absolute;
background: transparent;
border-radius:50%;
width: 100%;
padding-top: 100%;
margin-left: -50%;
margin-top: -50%;
left: var(–x,-100%);
top: var(–y,-100%);
}
这里我们解决了两个问题，
首次进来会触发一次：这里我们把 left 给了一个默认值 -100%
left: var(–x,-100%);
也就是说，当前面的 –x 没有值或者非法的时候就会取后面一个值，-100% 会让水滴动画的过程在视线之外触发，页面上根本看不见。
跟随鼠标点击的位置扩散：现在已经获取到了鼠标的位置，所以就很容易实现了鼠标在哪点击就从哪里扩散的问题
完整 demo
https://codepen.io/xboxyan/pe…
小节
其实 js 实现是很简单的，css 才是难点，css 远比 js 灵活的多。比方说积木，积木的各种小零件是固定的，种类也有限，但是你可以组合出各种不同的玩具出来，可以称之为头脑创意吧，然而你组合出来一辆小汽车，却没法自动行驶，那么你就需要用上电机模组了，这是功能驱动。实际上在研发积木的过程中才是最耗费心思的地方，那些动力系统才是一层不变的。