css点击页面有波浪

CSS点击页面有波浪的效果是一种比较常见的设计，可以使网页看起来更加炫酷和生动。下面是一个简单的实现方法：

.btn {
  
  position: relative;
  
  display: inline-block;
  
  padding: 10px 30px;
  
  background: #FFB6C1;
  
  color: #fff;
  
  font-size: 16px;
  
  text-decoration: none;
}
  .btn:hover {
  
  background: #EE82EE;
}
  .btn:before {
  
  content: "";
  
  position: absolute;
  
  top: 50%;
  
  left: 50%;
  
  transform: translate(-50%, -50%);
  
  width: 0;
  
  height: 0;
  
  border-radius: 50%;
  
  background: rgba(255, 182, 193, 0.5);
  
  z-index: -1;
  
  transition: all 0.5s ease;
}
  .btn:hover:before {
  
  width: 300px;
  
  height: 300px;
}
 

将上述代码添加到你的CSS样式表中，然后在需要使用波浪效果的地方添加以下HTML代码即可：

<a href="#" class="btn">点击我</a> 

这个波浪效果是通过添加一个伪元素:before来实现的，给它设置了一个初始大小为0的圆形，并将z-index设置为-1，让它在按钮下方。然后使用:hover伪类来控制它的大小和透明度，实现波浪效果。

如果你希望更加个性化定制这个波浪效果，可以按照上述代码进行修改，例如调整波浪的颜色、大小、透明度等。