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

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

這是GoogleMaterial Design中最常見的特效了，市面上也有很多現(xiàn)成的js庫，用來模擬這個特效。但往往要引入一大堆js和css，其實在已有的專案中，可能只是想加一個這樣的按鈕，來增強用戶體驗，這些js庫就顯得有些過於龐大了，同時由於是js實現(xiàn)，很多時候還要注意加載問題。

那麼，有沒有辦法用css來實現(xiàn)這一特效呢

思路

#其實就是一個動畫，一個正圓從小變大，用css3中的動畫很容易實現(xiàn)

範例程式碼

@keyframes?ripple{
????from?{
????????transform:?scale(0);
????????opacity:?1;
????}
????to?{
????????transform:?scale(1);
????????opacity:?0;
????}
}

通常用js來實現(xiàn)的方式很簡單，就是給點擊元素添加一個class，然後再動畫結束後移除該class

#範例程式碼

var?btn?=?document.getElementById('btn');
btn.addeventlistener('click',function(){
??addClass(btn,'animate')
},false)
btn.addeventlistener('transitionend',function(){//監(jiān)聽css3動畫結束
??removeClass(btn,'animate')
},false)

那麼如何透過css來實現(xiàn)動畫的觸發(fā)呢？

CSS實作

css中與滑鼠互動的偽類別主要有

• hover滑鼠經過

• :active滑鼠按下

• :focus滑鼠聚焦

• :checked滑鼠選取

#很多情況下，我們頁面中的效果都是透過hover來實現(xiàn)的，滑鼠放上去觸發(fā)一個效果，離開還原，但是如果放上去馬上離開，那麼動畫也會馬上結束。

我們先試試看。

結構

這是我們寫好的頁面結構和樣式

<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>

很簡單，就是一個普通的按鈕樣式

下面我們在按鈕中加入我們需要的正圓。

我們用偽元素來實現(xiàn)

.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;
}

效果還是不錯的，就是如果滑鼠離開的太快，那麼剛剛擴大的圓馬上就縮回去了，有點違和

但這不是我們想要的效果呀。我們希望的是點擊一次觸發(fā)一次，而不是這樣放上去就完了，再也不會觸發(fā)了。

active嘗試

平常工作中，active用到的也比較多，通常是用在點擊的效果上，那就拿來試試？

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

效果也是差強人意，有點類似滑鼠按住的意思，你必須一直按住滑鼠，才能完整的觸發(fā)，比如說上面的例子，動畫的運行實現(xiàn)是1s，那麼你必須點在那個按鈕上持續(xù)1s才能看到完整的動畫效果，否則，就像上面當滑鼠離開一樣，動畫馬上就縮回去了

focus體驗

如果需要讓任何一個元素獲得焦點，你可以給太指定一個tabindex屬性

<a>button</a>

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

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

就沒有辦法了嗎？

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

checked

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

<label>
??<input><span>button</span>
</label>

我們在這裡換成了lable併計入了input[type=checkbox]標籤，主要是為了在點擊按鈕的時候觸發(fā)input選中。

加一點樣式

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

這樣也能觸發(fā)動畫，但問題是，當再次點擊的時候就成了非選中狀態(tài)了，怎么觸發(fā)動畫呢？

其實可以用:not來實現(xiàn)

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

乍一看好像挺聰明的，仔細一想，正反兩個都寫了動畫，不就跟:checked沒關系了？還不如直接

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

無限輪回中...

這個問題困擾了我好久，不過皇天不負有心人，后來試著在兩種狀態(tài)下觸發(fā)不同的動畫是可以分別觸發(fā)的，如下

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

這個應該很好理解吧。

那么，重點來了，現(xiàn)在把動畫ripple1和ripple2里面的動畫過程都改成一樣，也是可以分別觸發(fā)的，也就是說，只要動畫名稱不一樣，css都會當成不同的動畫來處理

這樣就簡單了，我們只需要默認一個狀態(tài)，選中一個狀態(tài)，然后分別觸發(fā)名稱不同的動畫就行了~

.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...

一些不足

由于上述動畫樣式在默認情況下就會被觸發(fā)，所以頁面加載進來就會看到按鈕上的水滴動畫運動一次，不過也不是特別明顯，還可以接受。

其次，實際效果肯定是希望鼠標點擊哪里，就以該點為中心擴散，我們css肯定是做不到這點的，只能從中心擴散，這也只能妥協(xié)了。這里提供一個思路，可以使用css的變量，每次點擊的時候吧相應的值存在style里面，這樣css中也能用上。

希望能用css今后挖掘出更多有趣的效果^

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