[分享]css3按钮点击水波效果

CSS3 按钮点击水波效果是一种非常酷炫的效果，它可以在按钮被点击时产生一个水波纹，为网站的交互体验增添不少亮点。下面我们将一步步介绍实现该效果的方法：//HTML 代码 点击试试 //CSS3 代码...

CSS3 按钮点击水波效果是一种非常酷炫的效果，它可以在按钮被点击时产生一个水波纹，为网站的交互体验增添不少亮点。下面我们将一步步介绍实现该效果的方法：

//HTML 代码
<button class="ripple-btn">点击试试</button>

//CSS3 代码
.ripple-btn{
  position: relative;
  overflow: hidden;
  background-color: #2196F3;
  color: #fff;
  font-size: 20px;
  padding: 15px 30px;
  border-radius: 5px;
  cursor: pointer;
}

.ripple-btn:after{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background-color: rgba(255,255,255,0.7);
  opacity: 0.5;
  border-radius: 100%;
  width: 0;
  height: 0;
}

.ripple-btn:active:after{
  animation: ripple 0.8s linear;
}

@keyframes ripple{
  to{
    opacity: 0;
    transform: translate(-50%, -50%) scale(2);
  }
} 

根据以上代码，我们可以看到实现效果的思路是，在按钮的伪元素 after 中添加一个圆形的水波纹。在按钮被点击的瞬间触发动画，让水波纹从中心扩散出去，逐渐变大，淡出，最终消失。

总的来说，CSS3 按钮点击水波效果是一种非常实用、酷炫的交互效果，它能让用户在使用网站时更加愉悦、舒适。大家不妨尝试在自己的网站中添加一些这样的效果，以提升用户体验。