前言
大家平时应该经常见到这种特效，很炫酷不是吗
这是谷歌Material Design中最常见的特效了，市面上也有很多现成的js库，用来模拟这一特效。但是往往要引入一大堆js和css，其实在已有的项目中，可能只是想加一个这样的按钮，来增强用户体验，这些js库就显得有些过于庞大了，同时由于是js实现，很多时候还要注意加载问题。
那么，有没有办法用css来实现这一特效呢？
思路
其实就是一个动画，一个正圆从小变大，用css3中的动画很容易实现
示例代码
| @keyframes ripple{ from { transform: scale(0); opacity: 1; } to { transform: scale(1); opacity: 0; }} |
通常用js来实现的方式很简单，就是给点击元素添加一个class，然后再动画结束后移除该class
示例代码
| var btn = document.getElementById('btn');btn.addeventlistener('click',function(){ addClass(btn,'animate')},false)btn.addeventlistener('transitionend',function(){//监听css3动画结束 removeClass(btn,'animate')},false) |
那么如何通过css来实现动画的触发呢？
CSS实现
css中与鼠标交互的伪类主要有
hover鼠标经过 :active鼠标按下 :focus鼠标聚焦 :checked鼠标选中很多情况下，我们页面中的效果都是通过hover来实现的，鼠标放上去触发一个效果，离开还原，但是如果放上去马上离开，那么动画也会马上结束。
我们先试一下。
结构
这是我们写好的页面结构和样式
| <style>.btn{ display: block; width: 300px; outline: 0; overflow: hidden; position: relative; transition: .3s; cursor: pointer; user-select: none; height: 100px; text-align: center; line-height: 100px; font-size: 50px; background: tomato; color: #fff; border-radius: 10px;}</style><a class="btn">button</a> |
很简单，就是一个普通的按钮样式
下面我们在按钮中添加我们需要的正圆。
我们用伪元素来实现
| .btn:after{ content: ''; position: absolute; width: 100%; padding-top: 100%; background: transparent; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%)} |
