纯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; 
  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%)
}

咱们把上面的overflow: hidden去掉，把这个圆缩小一点看看效果

而后，咱们写个缩放的动画

@keyframes ripple{
    from {
        transform:translate(-50%,-50%) scale(0);
        /**因为咱们默认写了变换属性，因此这里要补上translate(-50%,-50%)，否则就会被替换了**/
        background: rgba(0,0,0,.25);
    }
    to {
        transform:translate(-50%,-50%) scale(1);
        background: transparent;
    }
}

hover小交互体验

鼠标通过试试？

.btn:hover:after{
  animation: ripple 1s;
}

效果仍是不错的，就是若是鼠标离开的太快，那么刚刚扩大的圆立刻就缩回去了，有点违和

可是这不是咱们想要的效果呀。咱们但愿的是点击一次触发一次，而不是这样放上去就完了，不再会触发了。

active尝试

平时工做中，active用到的也比较多，一般是用在点击的效果上，那么拿来试试？

.btn:active:after{
  animation: ripple 1s;
}

效果也是差强人意，有点相似鼠标按住的意思，你必须一直按住鼠标，才能完整的触发，好比说上面的例子，动画的运行实现是1s，那么你必须点在那个按钮上持续1s才能看到完整的动画效果，不然，就像上面鼠标离开同样，动画立刻就缩回去了

focus体验

若是须要让任意一个元素获焦，你能够给太指定一个tabindex属性

<a class="btn" tabindex="1">button</a>

.btn:focus:after{
  animation: ripple 1s;
}

foucs也能够触发，只是触发之后只有等失去焦点以后才能再次触发，实际的操做表现就是，点过一次之后，再点一下外面的空白

难道就没有办法了吗？

固然仍是有的，放在最后的确定就是解决方式，haha

checked

checked并不能直接触发，这是表单元素选中后触发的，为此，咱们须要改造一下页面结构

<label class="btn">
  <input type="checkbox"><span>button</span>
</label>

咱们这里换成了lable并计入了input[type=checkbox]标签，主要是为了在点击按钮的时候触发input选中。

加一点样式

.btn>span:after{
  /**换一下选择器**/
}
.btn>input[type=checkbox]{
  display: none
}
.btn>input[type=checkbox]:checked+span:after{
  animation: ripple 1s;
}

这样也能触发动画，但问题是，当再次点击的时候就成了非选中状态了，怎么触发动画呢？

其实能够用:not来实现

.btn>input[type=checkbox]:not(:checked)+span:after{
  animation: ripple 1s;
}

乍一看好像挺聪明的，仔细一想，正反两个都写了动画，不就跟:checked不要紧了？还不如直接

.btn>input[type=checkbox]+span:after{
  animation: ripple 1s;
}

无限轮回中...

这个问题困扰了我很久，不过皇天不负有心人，后来试着在两种状态下触发不一样的动画是能够分别触发的，以下

.btn>input[type=checkbox]:checked+span:after{
  animation: ripple1 1s;
}
.btn>input[type=checkbox]:not(:checked)+span:after{
  animation: ripple2 1s;
}

这个应该很好理解吧。

那么，重点来了，如今把动画ripple1和ripple2里面的动画过程都改为同样，也是能够分别触发的，也就是说，只要动画名称不同，css都会当成不一样的动画来处理

这样就简单了，咱们只须要默认一个状态，选中一个状态，而后分别触发名称不一样的动画就好了~

.btn>input[type=checkbox]+span:after{
  animation: ripple-in 1s;
}
.btn>input[type=checkbox]:checked+span:after{
  animation: ripple-out 1s;
}
@keyframes ripple-in{
    from {
        transform:translate(-50%,-50%) scale(0);
        background: rgba(0,0,0,.25);
    }
    to {
        transform:translate(-50%,-50%) scale(1);
        background: transparent;
    }
}
@keyframes ripple-out{/*仅仅名称不一样*/
    from {
        transform:translate(-50%,-50%) scale(0);
        background: rgba(0,0,0,.25);
    }
    to {
        transform:translate(-50%,-50%) scale(1);
        background: transparent;
    }
}

效果就如文章一开始所示，完美

完整demo以下

https://codepen.io/xboxyan/pe...

一些不足

因为上述动画样式在默认状况下就会被触发，因此页面加载进来就会看到按钮上的水滴动画运动一次，不过也不是特别明显，还能够接受。

其次，实际效果确定是但愿鼠标点击哪里，就以该点为中心扩散，咱们css确定是作不到这点的，只能从中心扩散，这也只能妥协了。这里提供一个思路，可使用css的变量，每次点击的时候吧相应的值存在style里面，这样css中也能用上。

但愿能用css从此挖掘出更多有趣的效果^ ^

喜欢的能够关注个人博客 https://blog.codelabo.cn

查看原文