前言在上一篇文章中，我们用纯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;高度：20px；background-color:var(--main-bg-color);/**background-color:red**/}var的详细用法可以自行百度全能js。我们使用js只有一个目的，就是获取鼠标点击的位置。事件对象事件有offsetX和offsetY用来描述鼠标相对于父元素的位置。其实早年这个属性是IE私有的。Google和Firefox似乎很容易使用。不知道上面的版本是不是也支持，所以兼容性不是很好。大问题~varx=event.offsetX;vary=event.offsetY;具体实现，我们需要点击的时候到左边，然后存入css变量示例代码函数ripple(ev){varx=ev.offsetX;vary=ev.offsetY;this.style.setProperty('--x',x+'px');this.style.setProperty('--y',y+'px');}是的，只是一点对于js对应的css部分，我们需要获取我们保存的变量来改变中心点的位置。btn>span:after{内容：'';位置：绝对；背景：透明；边界半径：50%；宽度：100%；填充顶部：100%；左边距：-50%；保证金顶部：-50%；左：var(--x,-100%)；顶部：var(--y,-100%)；}这里我们解决了两个问题，第一次进入会触发一次：这里给left一个默认值-100%left:var(--x,-100%);也就是说，当前面的--x没有值或者不合法时，取后面的值。-100%会导致水滴动画的过程在看不见的地方被触发，页面上根本看不到鼠标点击后位置的扩散：现在已经获得了鼠标的位置，所以它很容易意识到从鼠标点击的地方传播的问题。完整demohttps://codepen.io/xboxyan/pe...其实js实现很简单，css是难点，css远比js灵活。比如积木，积木的各种小零件是固定的，种类有限，但是可以组合各种玩具，堪称脑洞大开，但组合不了汽车。对于自动驾驶，那么就需要用到电机模块，也就是函数驱动。事实上，开发积木的过程是最费心思的部分，那些动力系统是保持不变的一层。
