<a href="" class="a1">商家入口</a>
.a1{
background-color: orange;
display: inline-block;
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;
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;
}
}