css点击涟浴效果

在网页设计中，美观的效果非常重要。其中，鼠标交互效果是提升用户体验的不可或缺的一部分。今天，我们来介绍一种常用的鼠标点击效果 —— CSS点击涟浴效果。

实现这一效果需要用到CSS的伪元素 :after 和 :hover。下面是CSS代码：

button {
  border: none;
  background: #007aff;
 /*按钮背景色*/
  color: #fff;
 /*字体颜色*/
  position: relative;
 /*定位*/
  overflow: hidden;
  outline: none;
 /*去除默认边框*/
  padding: 8px 25px;
 /*内边距大小*/
  font-size: 16px;
 /*字体大小*/
  cursor: pointer;
 /*设置光标*/
  transition: all 0.3s ease;
 /*过渡效果*/
}
button:hover {
  background: #1b9dff;
 /*悬浮状态下的背景色*/
}
button:after {
  content: '';
  background: rgba(255,255,255,0.4);
 /*白色背景，带透明度*/
  position: absolute;
 /*绝对定位*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
 /*缩小并隐藏*/
  border-radius: 100%;
 /*圆形*/
  pointer-events: none;
 /*点击事件穿透*/
}
button:hover:after {
  transform: translate(-50%, -50%) scale(3);
 /*变换：放大且居中*/
  transition: all 0.5s ease;
 /*过渡效果*/
}
 

通过上述代码，我们可以看到效果：当鼠标悬浮在按钮上时，按钮背景色会变得更加鲜艳，并且会有一个白色涟漪从按钮中心点向四周扩散。这就是CSS点击涟浴效果。

总之，通过CSS实现点击涟浴效果是一种简单而实用的方法，在网页设计中非常受欢迎，尤其是在移动端使用。