css 水波纹变形卡片

CSS水波纹变形卡片是一种使用CSS技术创建的视觉效果，它可以在用户交互时（如点击或悬停）产生类似水波纹的动画效果。这种效果通常用于卡片式设计中，以增加用户界面的动态感和交互性。以下是实现这种效果的基本步骤：

1. HTML结构：
首先，我们需要创建一个基本的HTML结构来定义卡片。

<div class="card">
  <div class="card-content">
    <h3>卡片标题</h3>
    <p>这是卡片的内容。</p>
  </div>
</div>

2. CSS样式：
接下来，我们使用CSS来设置卡片的基本样式，并添加水波纹效果。

.card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  cursor: pointer;
}

.card-content {
  padding: 20px;
}

.card::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1);
  transform-origin: center;
}

.card:active::after {
  animation: ripple 0.6s ease-out;
}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, -50%) scale(60);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(100);
    opacity: 0;
  }
}

3. 解释：
- `.card` 类设置了卡片的相对定位和溢出隐藏，这是为了确保水波纹效果不会超出卡片范围。
- `.card::after` 伪元素用于创建水波纹效果。初始状态下，它是一个小的不透明的圆点，位于卡片的中心。
- `.card:active::after` 选择器在用户点击卡片时触发水波纹动画。
- `@keyframes ripple` 定义了水波纹的动画过程，从一个小圆点扩展到较大的圆圈，同时透明度逐渐降低到0。

这种水波纹效果可以增加用户界面的互动性和现代感。它特别适用于移动设备上的按钮和卡片，因为它们提供了即时的视觉反馈，提示用户操作已被识别和响应。