這篇文章主要介紹了純css實(shí)現(xiàn)Material Design水滴動(dòng)畫(huà)按鈕效果怎么弄，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

十余年的灣里網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整灣里建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“灣里網(wǎng)站設(shè)計(jì)”,“灣里網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

在上一篇，我們已經(jīng)實(shí)現(xiàn)了用純css實(shí)現(xiàn)水滴擴(kuò)散動(dòng)畫(huà)，但是有一些瑕疵，文章結(jié)尾處也提到過(guò)，一是頁(yè)面加載進(jìn)來(lái)就會(huì)看到按鈕上的水滴動(dòng)畫(huà)運(yùn)動(dòng)一次，二是點(diǎn)擊的時(shí)候不能根據(jù)鼠標(biāo)的位置來(lái)擴(kuò)散，今天我們來(lái)解決這個(gè)問(wèn)題。

以下所有基礎(chǔ)代碼均來(lái)自上一篇

css中只能做到固定的點(diǎn)擴(kuò)散

無(wú)法避免的js

雖然我很想通過(guò)css來(lái)實(shí)現(xiàn)想要的效果，畢竟屬于UI交互方面，盡量別扯上js，無(wú)奈后勁不足，很多功能確實(shí)無(wú)法實(shí)現(xiàn)，比如獲取鼠標(biāo)位置，這個(gè)css就真沒(méi)轍了。

思考了很久，還是只能通過(guò)js來(lái)獲取位置坐標(biāo)了，但是我們可以減少js的邏輯，我們只需要知道坐標(biāo)即可，剩下的給css來(lái)做就好了。

實(shí)現(xiàn)思路

css新特性

其實(shí)用的css很多新特性的話，很多以前只能通過(guò)js來(lái)實(shí)現(xiàn)的css也可以代替了。

css原生變量var，大家平時(shí)應(yīng)該都接觸過(guò)了吧?？赡芷綍r(shí)由于兼容性的問(wèn)題，用起來(lái)縮手縮腳，干脆為了兼容性就不用了

其實(shí)只要不考慮IE的話兼容性還是可以的，就算要兼顧IE，可以保證按鈕是完好的，只是沒(méi)有動(dòng)畫(huà)效果不就可以了嗎，這也是所謂的優(yōu)雅降級(jí)吧

var的用法很簡(jiǎn)單

:root {
    --main-bg-color: red;
}
.container {
    width: 20px;
    height: 20px;
    background-color: var(--main-bg-color);/**background-color:red**/
}

有關(guān)var的詳細(xì)用法，大家可以自行百度

全能js

我們用js只有一個(gè)目的，就是獲取鼠標(biāo)點(diǎn)擊的位置

很簡(jiǎn)單，事件對(duì)象event中有個(gè)offsetX和offsetY就是用來(lái)描述鼠標(biāo)位置相對(duì)于父元素的位置

其實(shí)這個(gè)屬性早些年是IE私有的，谷歌和火狐看著好用，不知道從上面版本也都支持了，所以兼容性沒(méi)太大問(wèn)題~

var x = event.offsetX;
var y = event.offsetY;

具體實(shí)現(xiàn)

我們需要在點(diǎn)擊的時(shí)候獲取到左邊，然后存在css變量中

示例代碼

function ripple(ev){
  var x = ev.offsetX;
  var y = ev.offsetY;
  this.style.setProperty('--x',x+'px');
  this.style.setProperty('--y',y+'px');
}

沒(méi)錯(cuò)，就這么一丁點(diǎn)js

相應(yīng)的css部分我們要拿到我們保存的變量，來(lái)改變中心點(diǎn)的位置

.btn>span:after{ 
  content: ''; 
  position: absolute; 
  background: transparent; 
  border-radius:50%; 
  width: 100%; 
  padding-top: 100%; 
  margin-left: -50%; 
  margin-top: -50%; 
  left: var(--x,-100%); 
  top: var(--y,-100%); 
}

這里我們解決了兩個(gè)問(wèn)題，

首次進(jìn)來(lái)會(huì)觸發(fā)一次：這里我們把left給了一個(gè)默認(rèn)值-100%

left: var(--x,-100%);

也就是說(shuō)，當(dāng)前面的--x沒(méi)有值或者非法的時(shí)候就會(huì)取后面一個(gè)值，-100%會(huì)讓水滴動(dòng)畫(huà)的過(guò)程在視線之外觸發(fā)，頁(yè)面上根本看不見(jiàn)。

跟隨鼠標(biāo)點(diǎn)擊的位置擴(kuò)散：現(xiàn)在已經(jīng)獲取到了鼠標(biāo)的位置，所以就很容易實(shí)現(xiàn)了鼠標(biāo)在哪點(diǎn)擊就從哪里擴(kuò)散的問(wèn)題

完整demo

button

.btn{
 display: block; 
 width: 300px; 
 margin: 50px; 
 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;
 }
.btn>span{
 position: absolute; 
 left: 0; top: 0; 
 width: 100%; 
 height: 100%;
 }
.btn>span:after{
 content: ''; 
 position: absolute; 
 background: transparent; 
 border-radius:50%; 
 width: 100%; 
 padding-top: 100%; 
 margin-left: -50%; 
 margin-top: -50%; 
 left: var(--x,-100%); 
 top: var(--y,-100%); 
 }
.btn:active{
 background: orangered;
 }
.btn>input[type=checkbox]{display: none}
.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: scale(0);
        background: rgba(0,0,0,.25)
    }
    to {
        transform: scale(1.5);
        background: transparent
    }
}
@keyframes ripple-out{
    from {
        transform: scale(0);
        background: rgba(0,0,0,.25)
    }
    to {
        transform: scale(1.5);
        background: transparent
    }
}

function ripple(dom,ev){
  console.log(ev)
  var x = ev.offsetX;
  var y = ev.offsetY;
  dom.style.setProperty('--x',x+'px');
  dom.style.setProperty('--y',y+'px');
}

小節(jié)

其實(shí)js實(shí)現(xiàn)是很簡(jiǎn)單的，css才是難點(diǎn)，css遠(yuǎn)比js靈活的多。比方說(shuō)積木，積木的各種小零件是固定的，種類也有限，但是你可以組合出各種不同的玩具出來(lái)，可以稱之為頭腦創(chuàng)意吧，然而你組合出來(lái)一輛小汽車，卻沒(méi)法自動(dòng)行駛，那么你就需要用上電機(jī)模組了，這是功能驅(qū)動(dòng)。實(shí)際上在研發(fā)積木的過(guò)程中才是最耗費(fèi)心思的地方，那些動(dòng)力系統(tǒng)才是一層不變的。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享純css實(shí)現(xiàn)Material Design水滴動(dòng)畫(huà)按鈕效果怎么弄內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!