当前位置：首页 > CSS

CSS制作镜面文字

2026-03-12 07:10:30CSS

使用 `transform` 和 `opacity` 创建镜面效果

通过 CSS 的 transform 属性和 opacity 属性可以模拟镜面文字效果。将文字垂直翻转并降低透明度，形成镜像。

.mirror-text {
  position: relative;
  display: inline-block;
}

.mirror-text::after {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 0;
  transform: scaleY(-1);
  opacity: 0.5;
}

HTML 结构示例：

CSS制作镜面文字

<div class="mirror-text" data-text="镜面文字">镜面文字</div>

添加渐变遮罩增强真实感

通过 mask-image 或 linear-gradient 为镜像文字添加渐变遮罩，模拟镜面反射的衰减效果。

.mirror-text::after {
  /* 其他属性同上 */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

使用 `text-reflect` 属性（实验性特性）

部分浏览器支持原生的 text-reflect 属性，可直接生成文字镜像：

CSS制作镜面文字

.mirror-text {
  -webkit-box-reflect: below 0px linear-gradient(transparent, rgba(0,0,0,0.5));
}

注意：此属性需要 -webkit- 前缀，且兼容性有限（主要支持 WebKit/Blink 内核浏览器）。

调整间距和定位

通过调整镜像元素的位置和间距，可以控制镜面效果的表现形式：

.mirror-text::after {
  top: calc(100% + 5px); /* 增加间距 */
  transform-origin: 0 0; /* 调整翻转轴心 */
}

完整代码示例

<style>
.mirror-text {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: bold;
  color: #333;
}

.mirror-text::after {
  content: attr(data-text);
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  transform: scaleY(-1);
  opacity: 0.3;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
}
</style>

<div class="mirror-text" data-text="HELLO WORLD">HELLO WORLD</div>