CSS文字涂抹动画：用代码让文字动起来

2024-01-03 13:24:58

文字涂抹动画：赋予网页文字生机

网页设计中，文字扮演着至关重要的角色。为了提升文字的可读性和趣味性，我们可以借助CSS打造生动的文字涂抹动画。这种效果可以让文字逐渐从一端浮现至另一端，常用于标题、按钮和导航栏等元素。

打造文字涂抹动画的简易指南

步骤1：创建文本容器

首先，我们需要定义一个div容器来容纳文本内容：

<div id="text-wrapper">
  <h1>Hello World</h1>
</div>

步骤2：添加伪元素

接着，在div容器内加入一个伪元素。伪元素本质上是一个虚拟元素，不会出现在页面上，但可以实现特殊的动画效果：

#text-wrapper::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
  white-space: nowrap;
}

步骤3：设置伪元素宽度

伪元素的宽度决定了涂抹动画的长度：

#text-wrapper::before {
  width: 100%;
  transition: width 1s ease-in-out;
}

步骤4：添加动画效果

最后，让我们加入动画效果：

#text-wrapper:hover::before {
  width: 0%;
}

当鼠标悬停在div容器上时，伪元素宽度从100%变为0%，产生涂抹动画效果。

示例代码

完整示例代码如下：

<div id="text-wrapper">
  <h1>Hello World</h1>
</div>

#text-wrapper::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
  white-space: nowrap;
  transition: width 1s ease-in-out;
}

#text-wrapper:hover::before {
  width: 100%;
}