純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

查看原文