這篇文章給大家分享的是有關(guān)使用純css怎么實(shí)現(xiàn)Material Design中按鈕的水滴動畫效果的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供嘉峪關(guān)網(wǎng)站建設(shè)、嘉峪關(guān)做網(wǎng)站、嘉峪關(guān)網(wǎng)站設(shè)計(jì)、嘉峪關(guān)網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、嘉峪關(guān)企業(yè)網(wǎng)站模板建站服務(wù)，十余年嘉峪關(guān)做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

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

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

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

思路

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

示例代碼

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

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

示例代碼

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

那么如何通過css來實(shí)現(xiàn)動畫的觸發(fā)呢？

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

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

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

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

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

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

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

我們先試一下。

結(jié)構(gòu)

這是我們寫好的頁面結(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>

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

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

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

然后，我們寫個縮放的動畫

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

hover小交互體驗(yàn)

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

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

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

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

active嘗試

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

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

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

focus體驗(yàn)

如果需要讓任意一個元素獲焦，你可以給太指定一個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)過一次以后，再點(diǎn)一下外面的空白

難道就沒有辦法了嗎？

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

checked

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

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

我們這里換成了lable并計(jì)入了input[type=checkbox]標(biāo)簽，主要是為了在點(diǎn)擊按鈕的時候觸發(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)再次點(diǎn)擊的時候就成了非選中狀態(tài)了，怎么觸發(fā)動畫呢？

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

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

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

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

無限輪回中...

這個問題困擾了我好久，不過皇天不負(fù)有心人，后來試著在兩種狀態(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;
}

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

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

這樣就簡單了，我們只需要默認(rèn)一個狀態(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...

一些不足

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

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

感謝各位的閱讀！關(guān)于使用純css怎么實(shí)現(xiàn)Material Design中按鈕的水滴動畫效果就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

文章標(biāo)題：使用純css怎么實(shí)現(xiàn)MaterialDesign中按鈕的水滴動畫效果
網(wǎng)站鏈接：http://jinyejixie.com/article18/jjisgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、網(wǎng)站維護(hù)、電子商務(wù)、網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)