纯css实现Material Design中的水滴动画按钮

前言

大家平时应该经常见到这种特效，很炫酷不是吗

这是谷歌

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;								 
 1/4    1 2 3 4 下一页 尾页