如何使用 HTML 和 CSS 创建反射效果？

反射效果主要用于模拟图片或文字在水面上产生的反射效果，即将原图或文字翻转，然后反着放在图片或文字下方，以达到反射效果的视觉效果。下面介绍如何使用 HTML 和 CSS 来创建反射效果。

使用 CSS3 transform 属性实现图片反射

反射效果最常见的应用是在图片上，下面我们就来看看如何使用 CSS3 transform 属性实现图片反射。

HTML 代码

<div class="wrapper">
  <img src="image.jpg" alt="image" />
</div>

CSS 代码

.wrapper {
  width: 300px;
  height: 300px;
  position: relative;
}

img {
  position: absolute;
  bottom: 0;
}

img::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%);
  transform: scaleY(-1);
}

实现原理

上述 CSS 代码中，我们首先创建一个 wrapper 容器，然后在该容器内放置一张图片。由于我们要实现反射效果，所以图片的定位属性设为 absolute，bottom 属性设为 0，固定在容器底部。

接着，在图片的 ::after 伪元素中，我们设置了一个纯白色的渐变背景，从透明到白色，上下固定位置的比例分别为 0% 和 100%。然后，通过 transform: scaleY(-1); 实现了该渐变的上下翻转。因为图片定位在了容器底部，所以这个渐变背景就像是图片的镜像一样翻转了过来。

使用 CSS3 filter 属性实现文字反射

除了在图片上应用反射效果，我们还可以在文字上应用反射效果。下面我们来看看如何使用 CSS3 filter 属性实现文字反射。

HTML 代码

<div class="wrapper">
  <p>Hello, reflection.</p>
</div>

CSS 代码

.wrapper {
  width: 300px;
  height: 150px;
  position: relative;
}

p {
  position: absolute;
  bottom: 0;
  font-size: 32px;
  font-weight: bold;
  color: #333;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(white));
  background-image: linear-gradient(to bottom, transparent 0%, white 200%);
  -webkit-filter: blur(2px) opacity(0.8) invert(1);
  filter: blur(2px) opacity(0.8) invert(1);
}

实现原理

首先，我们同样建立了一个容器，然后在容器内添加了一段文字。我们对文字应用了 text-shadow，使其有一定的阴影效果，并将文字的颜色设置为透明。

然后，我们使用 -webkit-text-fill-color: transparent; 和 -webkit-background-clip: text; 属性将文字颜色和背景颜色设为透明，然后使用 gradient 实现文字的反射效果。由于我们需要实现文字反射的倒影效果，所以这里的渐变方向是从上到下。

最后，我们通过 filter 属性实现了字体的压缩模糊、透明度和颜色翻转，以达到文字倒影效果的视觉效果。

总结

使用 HTML 和 CSS 可以非常方便地实现反射效果。在这篇文章中，我们介绍了两种应用反射效果的常见场景，并详细介绍了如何使用 CSS 实现反射效果的原理和具体实现步骤。希望对想要学习如何实现反射效果的开发者们有所帮助！