前言
大家平時應該經常見到這種特效,很炫酷不是嗎
這是谷歌Material Design
中最常見的特效了,市面上也有很多現成的js庫,用來模擬這一特效。但是往往要引入一大堆js
和css
,其實在已有的項目中,可能只是想加一個這樣的按鈕,來增強用戶體驗,這些js
庫就顯得有些過於龐大了,同時由於是js
實現,很多時候還要注意加載問題。
那麼,有沒有辦法用css
來實現這一特效呢?
思路
其實就是一個動畫,一個正圓從小變大,用css3
中的動畫很容易實現
示例代碼
@keyframes ripple{
from {
transform: scale(0);
opacity: 1;
}
to {
transform: scale(1);
opacity: 0;
}
}
通常用js
來實現的方式很簡單,就是給點擊元素添加一個class
,然後再動畫結束後移除該class
示例代碼
var btn = document.getElementById('btn');
btn.addeventlistener('click',function(){
addClass(btn,'animate')
},false)
btn.addeventlistener('transitionend',function(){//監聽css3動畫結束
removeClass(btn,'animate')
},false)
那麼如何通過css來實現動畫的觸發呢?
CSS實現
css
中與鼠標交互的僞類主要有
-
hover
鼠標經過 -
:active
鼠標按下 -
:focus
鼠標聚焦 -
:checked
鼠標選中
很多情況下,我們頁面中的效果都是通過hover
來實現的,鼠標放上去觸發一個效果,離開還原,但是如果放上去馬上離開,那麼動畫也會馬上結束。
我們先試一下。
結構
這是我們寫好的頁面結構和樣式
<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>
很簡單,就是一個普通的按鈕樣式
下面我們在按鈕中添加我們需要的正圓。
我們用僞元素來實現
.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;
}
效果還是不錯的,就是如果鼠標離開的太快,那麼剛剛擴大的圓馬上就縮回去了,有點違和
但是這不是我們想要的效果呀。我們希望的是點擊一次觸發一次,而不是這樣放上去就完了,再也不會觸發了。
active嘗試
平時工作中,active
用到的也比較多,通常是用在點擊的效果上,那麼拿來試試?
.btn:active:after{
animation: ripple 1s;
}
效果也是差強人意,有點類似鼠標按住的意思,你必須一直按住鼠標,才能完整的觸發,比如說上面的例子,動畫的運行實現是1s
,那麼你必須點在那個按鈕上持續1s
才能看到完整的動畫效果,否則,就像上面鼠標離開一樣,動畫馬上就縮回去了
focus體驗
如果需要讓任意一個元素獲焦,你可以給太指定一個tabindex
屬性
<a class="btn" tabindex="1">button</a>
.btn:focus:after{
animation: ripple 1s;
}
foucs
也可以觸發,只是觸發以後只有等失去焦點之後才能再次觸發,實際的操作表現就是,點過一次以後,再點一下外面的空白
難道就沒有辦法了嗎?
當然還是有的,放在最後的肯定就是解決方式,haha
checked
checked
並不能直接觸發,這是表單元素選中後觸發的,爲此,我們需要改造一下頁面結構
<label class="btn">
<input type="checkbox"><span>button</span>
</label>
我們這裏換成了lable
並計入了input[type=checkbox]
標籤,主要是爲了在點擊按鈕的時候觸發input
選中。
加一點樣式
.btn>span:after{
/**換一下選擇器**/
}
.btn>input[type=checkbox]{
display: none
}
.btn>input[type=checkbox]:checked+span:after{
animation: ripple 1s;
}
這樣也能觸發動畫,但問題是,當再次點擊的時候就成了非選中狀態了,怎麼觸發動畫呢?
其實可以用:not
來實現
.btn>input[type=checkbox]:not(:checked)+span:after{
animation: ripple 1s;
}
乍一看好像挺聰明的,仔細一想,正反兩個都寫了動畫,不就跟:checked
沒關係了?還不如直接
.btn>input[type=checkbox]+span:after{
animation: ripple 1s;
}
無限輪迴中...
這個問題困擾了我好久,不過皇天不負有心人,後來試着在兩種狀態下觸發不同的動畫是可以分別觸發的,如下
.btn>input[type=checkbox]:checked+span:after{
animation: ripple1 1s;
}
.btn>input[type=checkbox]:not(:checked)+span:after{
animation: ripple2 1s;
}
這個應該很好理解吧。
那麼,重點來了,現在把動畫ripple1
和ripple2
裏面的動畫過程都改成一樣,也是可以分別觸發的,也就是說,只要動畫名稱不一樣,css都會當成不同的動畫來處理
這樣就簡單了,我們只需要默認一個狀態,選中一個狀態,然後分別觸發名稱不同的動畫就行了~
.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...
一些不足
由於上述動畫樣式在默認情況下就會被觸發,所以頁面加載進來就會看到按鈕上的水滴動畫運動一次,不過也不是特別明顯,還可以接受。
其次,實際效果肯定是希望鼠標點擊哪裏,就以該點爲中心擴散,我們css肯定是做不到這點的,只能從中心擴散,這也只能妥協了。這裏提供一個思路,可以使用css
的變量,每次點擊的時候吧相應的值存在style
裏面,這樣css
中也能用上。
希望能用css
今後挖掘出更多有趣的效果^ ^
喜歡的可以關注我的博客 https://blog.codelabo.cn