，模拟这个效果。但是往往需要引入大量的js和css。事实上，在现有的项目中，你可能只是想添加这样一个按钮来增强用户体验。这些js库似乎有点太大了。还要注意加载问题。那么，有什么办法可以用css实现这种特殊效果呢？这个想法实际上是一个动画。一个完美的圆圈由小变大。用css3中的动画实现示例代码很容易@keyframesripple{from{transform:scale(0);不透明度：1；}到{变换：比例（1）；不透明度：0；通常，用js实现的方式很简单，就是给被点击的元素添加一个class，然后在动画结束后移除class示例代码varbtn=document.getElementById('btn');btn.addeventlistener('click',function(){addClass(btn,'animate')},false)btn.addeventlistener('transitionend',function(){//监听css3动画结束removeClass(btn,'animate')},false)那么如何通过css触发动画呢？css实现css中与鼠标交互的伪类主要有hovermousepassing:activemousepress:focusmousefocus:checkedmouseselection很多时候我们页面中的效果都是通过hover来实现的，鼠标放置到触发一个Effect，离开恢复，但是如果你穿上它马上离开，动画会马上结束。我们先试试看。结构这是我们写的页面结构和样式
