前言
大家平時(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)用戶(hù)體驗(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)
