前端入坑紀(jì) 62
今天來分享 一個(gè)類似水波紋擴(kuò)散的鼠標(biāo)hover效果
好，詳解如下！
OK，first things first！ 點(diǎn)我查看實(shí)際效果
漪漣,愛你哦(手機(jī)上看效果,可能要點(diǎn)下它)
HTML 結(jié)構(gòu)
<a class="ylBtn" href="javascript:;">愛你o</a>
給我一個(gè)a, 還你一個(gè)漪漣. HTML就是只要個(gè)a就夠了.
CSS 結(jié)構(gòu)
.ylBtn{
position: relative;
display: block;
line-height: 47px;
height: 47px;
width: 47px;
font-size: 12px;
background-color: bisque;
color: #666;
text-align: center;
border-radius: 50%;
margin: 10% auto
}
.ylBtn::before{
content: "";
display: block;
position:absolute;
z-index: -1;
top:0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #fff;
opacity: .2;
}
.ylBtn::after{
content: "";
display: block;
position:absolute;
z-index: -2;
top:0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #fff;
opacity: 0;
}
@keyframes yls{
0%{
transform: scale(1);
opacity:.5;
}
100%{
transform: scale(1.8);
opacity: 0;
}
}
@keyframes ylss{
0%{
transform: scale(1);
opacity:.5;
}
100%{
transform: scale(1.3);
opacity: 0;
}
}
.ylBtn:hover::before{
animation: yls 1200ms linear infinite;
}
.ylBtn:hover::after{
animation: ylss 1200ms ease-out infinite;
}
- 波紋通過兩個(gè)偽元素來實(shí)現(xiàn),分別是::before,::after ,相對a來絕對定位
- 波紋的動(dòng)畫通過@keyframes 來分別創(chuàng)建,各自有不同的透明度和大小的變化
- 兩偽元素都是在hover的時(shí)候,執(zhí)行動(dòng)畫效果.infinite參數(shù)可以讓動(dòng)畫一直循環(huán)
總結(jié)
總得說來,這個(gè)效果不算很難.想要調(diào)出好的漪漣效果,最關(guān)鍵的還是動(dòng)畫的animation-timing-function.我這里用 ease-out 和 linear 隨意組合了下.有興趣的小伙伴可以去百度深入了解下
好了，到此，本文告一段落！感謝您的閱讀！祝你身體健康，闔家幸福！
*****作者原創(chuàng)內(nèi)容,大家互相支持,謝謝!!!*****
打開支付寶首頁搜 625097528 領(lǐng)紅包，領(lǐng)到大紅包的小伙伴趕緊使用哦！
支持你我，掃一掃紅包
