如何用HTML/CSS实现带像素化遮罩的文本及hover淡入效果？

你可以通过双文本层+CSS变换/过渡的方式实现需求，核心思路是用伪元素生成像素化的文本副本覆盖在真实文本上方，鼠标悬停时切换两层的透明度来实现淡入效果。

实现代码 #

HTML

<h1 class="pixel-text" data-text="你的标题内容">你的标题内容</h1>

CSS

.pixel-text {
  position: relative;
  font-size: 48px;
  /* 初始隐藏真实文本 */
  opacity: 0;
  /* 过渡动画 */
  transition: opacity 0.4s ease;
}

/* 像素化遮罩层（伪元素） */
.pixel-text::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: inherit;
  /* 缩放实现像素化：先缩小再放大，强制生成像素块 */
  transform: scale(0.2) scale(5);
  transform-origin: top left;
  /* 确保像素边缘清晰无模糊 */
  image-rendering: pixelated;
  /* 过渡动画 */
  transition: opacity 0.4s ease;
  z-index: 1;
}

/* 鼠标悬停时切换显示状态 */
.pixel-text:hover {
  opacity: 1;
}
.pixel-text:hover::before {
  opacity: 0;
}

关键细节说明 #

1. 像素化效果实现：通过transform: scale(0.2) scale(5)先将文本缩小到原尺寸的20%，再放大5倍还原尺寸——缩小过程中浏览器会丢失文本细节，放大后就会形成清晰的像素块效果，配合image-rendering: pixelated避免边缘模糊。
   • 调整缩放比例可以控制像素块大小：比如scale(0.1) scale(10)会生成更粗的像素块，scale(0.3) scale(3.33)则是更细腻的像素化效果。
2. 过渡动画：给真实文本和伪元素都添加opacity过渡，确保悬停时的淡入/淡出过程平滑自然。
3. 文本复用：用data-text属性存储文本内容，伪元素通过attr(data-text)读取，避免重复编写文本内容。

替代方案（模糊像素化） #

如果你想要更柔和的像素化效果，可以用filter属性替代缩放：

.pixel-text::before {
  /* ... 其他属性不变 ... */
  filter: blur(1px) contrast(20);
}

这种方式会生成类似色块拼接的模糊像素效果，适合不需要清晰像素块的场景。

内容的提问来源于stack exchange，提问作者keyboard_connection