前端入坑纪 62
今天来分享 一个类似水波纹扩散的鼠标hover效果
好，详解如下！
OK，first things first！ 点我查看实际效果
漪涟,爱你哦(手机上看效果,可能要点下它)
HTML 结构
<a class="ylBtn" href="javascript:;">爱你o</a>
给我一个a, 还你一个漪涟. HTML就是只要个a就够了.
CSS 结构
.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;
}
- 波纹通过两个伪元素来实现,分别是::before,::after ,相对a来绝对定位
- 波纹的动画通过@keyframes 来分别创建,各自有不同的透明度和大小的变化
- 两伪元素都是在hover的时候,执行动画效果.infinite参数可以让动画一直循环
总结
总得说来,这个效果不算很难.想要调出好的漪涟效果,最关键的还是动画的animation-timing-function.我这里用 ease-out 和 linear 随意组合了下.有兴趣的小伙伴可以去百度深入了解下
好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！
*****作者原创内容,大家互相支持,谢谢!!!*****
打开支付宝首页搜 625097528 领红包，领到大红包的小伙伴赶紧使用哦！
支持你我，扫一扫红包
