如何使用純css實現Material Design中按鈕的水滴動畫效果

這篇文章帶給大家的內容是關於如何使用純css實現Material Design中按鈕的水滴動畫效果，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

大家通常應該常常見到這種特效，很酷不是嗎

這是GoogleMaterial 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>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>button</a>

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

foucs也可以觸發，只是觸發以後只有等失去焦點之後才能再次觸發，實際的操作表現就是，點過以後，再點一下外面的空白

就沒有辦法了嗎？

當然還是有的，放在最後的肯定就是解決方式，haha

checked

checked並不能直接觸發，這是表單元素選取後觸發的，為此，我們需要改造一下頁面結構

<label>
  <input><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今后挖掘出更多有趣的效果^

以上是如何使用純css實現Material Design中按鈕的水滴動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！