基于 CSS 实现的数字模糊效果，在鼠标滑过或者移动端点击数字时显示出数字，营造一种神秘感从而增加网站的交互性，实现原理是根据悬停或聚焦调整数字的外观，在谜语、谜题或者有隐藏数字来增加神秘效果的网站使用。

下面介绍如何使用 CSS 创建揭示秘码

1、设置 HTML 结构，创建一个包含密码代码结构，使用一个无序列表，用列表项来表示密码的每一位数字。每个列表项都应包含一个表示数字的 span 元素。

<section>
  <p>Glide To Reveal Secret Code</p>
  <ul class="code">
    <li tabindex="0" class="digit">
      <span>0</span>
    </li>
    /*这里仅展示部分示例代码，下载后查看完整版代码*/
  </ul>
</section>

2、接下来，应用 CSS 样式来实现滑动效果，以揭示密码，利用 CSS 属性，如背景、颜色、字体大小和方框阴影，使元素更加亮眼。

/*这里仅展示部分示例代码，下载后查看完整版代码*/
.digit:first-of-type {
  padding-left: 5rem;
}
.digit:last-of-type {
  padding-right: 5rem;
}

使用 CSS 过渡和悬停/聚焦效果，使密码揭示器具有交互性。为列表项中的数字定义样式，以便在悬停或聚焦时改变其外观。利用 CSS 变量和计算创建滑动效果，在与数字互动时逐一显示数字。