怎么用css给文字加水面倒影的效果

在CSS中，给文本添加水面倒影效果通常是通过结合`::before`和`::after`伪元素、`transform: scale()`以及一些背景图像来实现的。这种方法可以模拟水面上的文字倒影，但需要注意的是，这并不是真正的“水面”倒影，因为CSS本身不支持3D交互。

下面是一个简单的示例，我们将创建一个文字上部的倒影效果：

.text-with-reflection {
  position: relative;
  color: #fff; /* 文字颜色 */
  font-size: 18px;

  /* 使用伪元素创建倒影 */
  ::before,
  ::after {
    content: attr(data-text); /* 倒影的内容等于真实文字 */
    position: absolute;
    bottom: -2em; /* 倒影距离底部的距离 */
    left: 0;
    width: 100%; /* 倒影宽度与文本相同 */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
    transform: translateY(-100%) scale(1.2); /* 倒影位置下拉并缩小，增强模糊效果 */
    transition: all 0.3s ease-in-out;
  }

  /* 真实的文字 */
  ::before {
    z-index: 1;
    opacity: 1;
  }

  /* 当鼠标悬停时，隐藏真实文字，显示倒影 */
  &:hover::before {
    opacity: 0;
  }
}

/* 使用data-text属性传递文字内容，如 <span data-text="Hello">World</span> */