本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于如何使用純css實(shí)現(xiàn)Material Design中按鈕的水滴動(dòng)畫(huà)效果，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

大家平時(shí)應(yīng)該經(jīng)常見(jiàn)到這種特效，很炫酷不是嗎

這是谷歌Material Design中最常見(jiàn)的特效了，市面上也有很多現(xiàn)成的js庫(kù)，用來(lái)模擬這一特效。但是往往要引入一大堆js和css，其實(shí)在已有的項(xiàng)目中，可能只是想加一個(gè)這樣的按鈕，來(lái)增強(qiáng)用戶體驗(yàn)，這些js庫(kù)就顯得有些過(guò)于龐大了，同時(shí)由于是js實(shí)現(xiàn)，很多時(shí)候還要注意加載問(wèn)題。

那么，有沒(méi)有辦法用css來(lái)實(shí)現(xiàn)這一特效呢

思路

其實(shí)就是一個(gè)動(dòng)畫(huà)，一個(gè)正圓從小變大，用css3中的動(dòng)畫(huà)很容易實(shí)現(xiàn)

示例代碼

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

通常用js來(lái)實(shí)現(xiàn)的方式很簡(jiǎn)單，就是給點(diǎn)擊元素添加一個(gè)class，然后再動(dòng)畫(huà)結(jié)束后移除該class

示例代碼

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

那么如何通過(guò)css來(lái)實(shí)現(xiàn)動(dòng)畫(huà)的觸發(fā)呢？

CSS實(shí)現(xiàn)

css中與鼠標(biāo)交互的偽類(lèi)主要有

• hover鼠標(biāo)經(jīng)過(guò)

• :active鼠標(biāo)按下

• :focus鼠標(biāo)聚焦

• :checked鼠標(biāo)選中

很多情況下，我們頁(yè)面中的效果都是通過(guò)hover來(lái)實(shí)現(xiàn)的，鼠標(biāo)放上去觸發(fā)一個(gè)效果，離開(kāi)還原，但是如果放上去馬上離開(kāi)，那么動(dòng)畫(huà)也會(huì)馬上結(jié)束。

我們先試一下。

結(jié)構(gòu)

這是我們寫(xiě)好的頁(yè)面結(jié)構(gòu)和樣式

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

很簡(jiǎn)單，就是一個(gè)普通的按鈕樣式

下面我們?cè)诎粹o中添加我們需要的正圓。

我們用偽元素來(lái)實(shí)現(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去掉，把這個(gè)圓縮小一點(diǎn)看看效果

然后，我們寫(xiě)個(gè)縮放的動(dòng)畫(huà)

@keyframes?ripple{
????from?{
????????transform:translate(-50%,-50%)?scale(0);
????????/**由于我們默認(rèn)寫(xiě)了變換屬性，所以這里要補(bǔ)上translate(-50%,-50%)，不然就會(huì)被替換了**/
????????background:?rgba(0,0,0,.25);
????}
????to?{
????????transform:translate(-50%,-50%)?scale(1);
????????background:?transparent;
????}
}

hover小交互體驗(yàn)

鼠標(biāo)經(jīng)過(guò)試試？

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

效果還是不錯(cuò)的，就是如果鼠標(biāo)離開(kāi)的太快，那么剛剛擴(kuò)大的圓馬上就縮回去了，有點(diǎn)違和

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

active嘗試

平時(shí)工作中，active用到的也比較多，通常是用在點(diǎn)擊的效果上，那么拿來(lái)試試？

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

效果也是差強(qiáng)人意，有點(diǎn)類(lèi)似鼠標(biāo)按住的意思，你必須一直按住鼠標(biāo)，才能完整的觸發(fā)，比如說(shuō)上面的例子，動(dòng)畫(huà)的運(yùn)行實(shí)現(xiàn)是1s，那么你必須點(diǎn)在那個(gè)按鈕上持續(xù)1s才能看到完整的動(dòng)畫(huà)效果，否則，就像上面鼠標(biāo)離開(kāi)一樣，動(dòng)畫(huà)馬上就縮回去了

focus體驗(yàn)

如果需要讓任意一個(gè)元素獲焦，你可以給太指定一個(gè)tabindex屬性

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

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

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

難道就沒(méi)有辦法了嗎？

當(dāng)然還是有的，放在最后的肯定就是解決方式，haha

checked

checked并不能直接觸發(fā)，這是表單元素選中后觸發(fā)的，為此，我們需要改造一下頁(yè)面結(jié)構(gòu)

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

我們這里換成了lable并計(jì)入了input[type=checkbox]標(biāo)簽，主要是為了在點(diǎn)擊按鈕的時(shí)候觸發(fā)input選中。

加一點(diǎn)樣式

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

這樣也能觸發(fā)動(dòng)畫(huà)，但問(wèn)題是，當(dāng)再次點(diǎn)擊的時(shí)候就成了非選中狀態(tài)了，怎么觸發(fā)動(dòng)畫(huà)呢？

其實(shí)可以用:not來(lái)實(shí)現(xiàn)

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

乍一看好像挺聰明的，仔細(xì)一想，正反兩個(gè)都寫(xiě)了動(dòng)畫(huà)，不就跟:checked沒(méi)關(guān)系了？還不如直接

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

無(wú)限輪回中...

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

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

這個(gè)應(yīng)該很好理解吧。

那么，重點(diǎn)來(lái)了，現(xiàn)在把動(dòng)畫(huà)ripple1和ripple2里面的動(dòng)畫(huà)過(guò)程都改成一樣，也是可以分別觸發(fā)的，也就是說(shuō)，只要?jiǎng)赢?huà)名稱(chēng)不一樣，css都會(huì)當(dāng)成不同的動(dòng)畫(huà)來(lái)處理

這樣就簡(jiǎn)單了，我們只需要默認(rèn)一個(gè)狀態(tài)，選中一個(gè)狀態(tài)，然后分別觸發(fā)名稱(chēng)不同的動(dòng)畫(huà)就行了~

.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{/*僅僅名稱(chēng)不同*/
????from?{
????????transform:translate(-50%,-50%)?scale(0);
????????background:?rgba(0,0,0,.25);
????}
????to?{
????????transform:translate(-50%,-50%)?scale(1);
????????background:?transparent;
????}
}

效果就如文章一開(kāi)始所示，完美

完整demo如下

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

一些不足

由于上述動(dòng)畫(huà)樣式在默認(rèn)情況下就會(huì)被觸發(fā)，所以頁(yè)面加載進(jìn)來(lái)就會(huì)看到按鈕上的水滴動(dòng)畫(huà)運(yùn)動(dòng)一次，不過(guò)也不是特別明顯，還可以接受。

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

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

Atas ialah kandungan terperinci 如何使用純css實(shí)現(xiàn)Material Design中按鈕的水滴動(dòng)畫(huà)效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!