css3实现悬停波浪效果

<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