多行文本擦除效果

小木木爸

已于 2024-07-23 14:28:40 修改

阅读量363

点赞数 2

分类专栏：前端小屋文章标签： css3 css html 多行文本擦除效果

于 2024-07-23 14:23:08 首次发布

本文链接：https://blog.csdn.net/qq_15557073/article/details/140635056

版权

前端小屋专栏收录该内容

36 篇文章 0 订阅

订阅专栏

多行文本擦除效果是一种在网页设计中常用的视觉效果，主要通过CSS动画来实现。以下是实现多行文本擦除效果的基本步骤和关键要点：

1. HTML结构

首先，需要准备两段相同的文本，第一段文本正常显示，第二段文本用于实现擦除效果。第二段文本通常会被放置在绝对定位的容器中，以便覆盖在第一段文本上。

2. CSS样式

接下来，通过CSS设置样式和动画效果。

基础样式：设置容器、文本的基础样式，如字体、颜色、背景等。
绝对定位：为.eraser设置position: absolute;和inset: 0;（或top: 0; right: 0; bottom: 0; left: 0;），使其覆盖在.container内的第一段文本上。
渐变背景：为.text设置background: linear-gradient(to right, transparent var(--p), #000 calc(var(--p) + 30px));，其中--p是一个CSS变量，用于控制渐变的位置。初始时，--p的值设置为0%，表示渐变起始位置在文本的最左侧。
文本颜色：将.text的color设置为transparent，使文本不可见，仅通过背景渐变显示文本被“擦除”的效果。
动画效果：使用@keyframes定义动画，通过改变--p的值从0%到100%，实现文本从左到右的擦除效果。同时，使用animation属性将动画应用到.text上，并设置动画时长、动画曲线等。

3. 注意事项

兼容性：CSS变量和@property规则在较新的浏览器中得到了较好的支持，但在一些旧版浏览器中可能无法使用。因此，在实现时需要考虑到目标用户的浏览器兼容性。
性能：虽然CSS动画通常比JavaScript动画性能更好，但在复杂页面或大量动画效果时仍需注意性能问题。
动画曲线：可以根据需要调整animation属性中的timing-function值，以实现不同的动画效果（如缓入、缓出等）。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>多行文本擦除效果</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      body {
        background: #000;
        width: 20%;
        margin: 0 auto;
        color: #fff;
      }
      .container {
        width: 80%;
        margin: 1em auto;
        font-family: '演示悠然小楷';
        line-height: 2;
        text-indent: 2em;
        position: relative;
        font-size: 26px;
      }
      .eraser {
        position: absolute;
        inset: 0;
      }

      .text {
        --p: 0%;
        background: linear-gradient(to right, #0000 var(--p), #000 calc(var(--p) + 30px));
        color: transparent;
        animation: erase 5s linear forwards;
      }
      /* 数值类的css属性 */
      @property --p {
        syntax: '<percentage>';
        initial-value: 0%;
        inherits: false;
      }

      @keyframes erase {
        to {
          --p: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>
        白马带著她一步步的回到中原。白马已经老了，只能慢慢的走，但终是能回到中原的。江南有杨柳、桃花，有燕子、金鱼.…汉人中有的是英俊勇武的少年，倜傥潇洒的少年.…但这个美丽的姑娘就像古高昌国人那样固执:“那都是很好很好的，可是我偏不喜欢。”
      </p>
      <p class="eraser">
        <span class="text">
          白马带著她一步步的回到中原。白马已经老了，只能慢慢的走，但终是能回到中原的。江南有杨柳、桃花，有燕子、金鱼.…汉人中有的是英俊勇武的少年，倜傥潇洒的少年.…但这个美丽的姑娘就像古高昌国人那样固执:“那都是很好很好的，可是我偏不喜欢。”
        </span>
      </p>
    </div>
  </body>
</html>