<a href="" class="a1">商家入口</a>
.a1{
background-color: orange;
display: inline-block;
width: 100px;
height: 35px;
text-align: center;
text-decoration: none;
//设置好元素的定位和边界
overflow: hidden;
position: absolute;
}
//插入一个伪元素
.a1::before{
content: ‘‘;
position: absolute;
//设置缩放为0
transform: scale(0);
border-radius: 50%;
background-color: #fff;
width: 200px;
height: 200px;
opacity: 0.5;
top: -80px;left: -50px;
}
//通过指针事件和缩放的动画事件，实现波浪效果
.a1:hover::before{
animation: 1s ani2;
}
@keyframes ani2{
??? 0%{
??????? -webkit-transform: scale(0);
???????? opacity: 0.5;
??? }
??? 100%{
??????? -webkit-transform: scale(1);
??????? opacity: 0;
??? }
}
css3实现悬停波浪效果
原文地址：https://www.cnblogs.com/webwangjie/p/9613057.html