前端开发攻略---用代码实现在PPT中十分常见的文本擦除效果。

最新推荐文章于 2024-07-06 14:50:23 发布

bbamx.

最新推荐文章于 2024-07-06 14:50:23 发布

阅读量345

点赞数 4

分类专栏：前端开发攻略文章标签： css 前端 css3 html

本文链接：https://blog.csdn.net/nibabaoo/article/details/137643543

版权

前端开发攻略专栏收录该内容

44 篇文章 0 订阅

订阅专栏

1、演示

2、实现原理

自定义属性 --p 的定义：

@property --p { ... }：这里定义了一个名为 --p 的自定义属性。
syntax: '<percentage>';：规定了 --p 属性的语法，即它的值应该是一个百分比。
initial-value: 0%;：设定了 --p 属性的初始值为 0%，表示动画开始时的背景渐变起始位置。
inherits: false;：指定了 --p 属性的值不会继承父元素的值，而是在元素内部单独定义和控制。

HTML 结构：

包含一个主要容器，其中有两个段落（p），一个是可见的，一个是隐藏的。

CSS 样式：

可见段落的样式：
没有特殊说明，但可以假设它包含了容器的背景、边框、大小等样式。
隐藏段落的样式：
绝对定位（position: absolute）于容器之内，并且覆盖在可见的段落之上。
其中的文字使用一个 span 元素包裹，并赋予类名为 text。
span.text 元素的背景被设置为渐变，起始位置和结束位置由 --p 控制，初始时是完全透明的，随着动画的进行，逐渐变为不透明，从而呈现出文字擦除的效果。

CSS 动画：

使用了关键帧动画（@keyframes erase）来控制渐变的过程。
关键帧从 0% 到 100% 定义了动画过程，在这个过程中，背景渐变从完全透明变为不透明，从而显示出隐藏文本。

文本擦除效果实现原理：

当动画播放时，隐藏段落中的文本逐渐变得可见，就好像被擦除一样。
这是通过调整背景渐变来实现的，背景逐渐变得不透明，从而显示出文本。

3、代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: #000;
        display: flex;
        justify-content: center;
      }
      .container {
        color: #fff;
        width: 700px;
        font-family: '行楷-简', Courier, monospace;
        line-height: 2;
        text-indent: 2em;
        position: relative;
      }
      .eraser {
        position: absolute;
        inset: 0;
      }
      .text {
        --p: 0%;
        padding: 3px 0;
        background: linear-gradient(to right, #0000 var(--p), #000 calc(var(--p) + 30px));
        color: transparent;
        animation: erase 8s linear forwards;
      }

      @keyframes erase {
        to {
          --p: 100%;
        }
      }

      @property --p {
        syntax: '<percentage>';
        initial-value: 0%;
        inherits: false;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>
        那时颓废还没有变成一种时尚，文化界刚结束一场热闹的人文精神的争论，主要是在面对越来越物质化的现代社会，当原有的思想精神支柱不断的崩溃时，人们开始对于明天和自身的茫然和困惑。那时候，学者们认真而激烈的讨论，而街边的孩子们却瞪着茫然的眼睛，观望着大街上的人群和车流，无动于衷的走过十字路口，溶入人群。
        我也是他们中间的一个。坐在角落里，看着眼前的人，懒洋洋的笑。在不知不觉中把城市的灰，以及沮丧无奈诅咒反抗融进了生命。那年我十八岁。我不爱任何人。我觉得自己已经老了。我常常坐在路边看夕阳。人们说我看着很颓废。
      </p>
      <p class="eraser">
        <!-- 不能直接把文字放入P里面 -->
        <span class="text">
          那时颓废还没有变成一种时尚，文化界刚结束一场热闹的人文精神的争论，主要是在面对越来越物质化的现代社会，当原有的思想精神支柱不断的崩溃时，人们开始对于明天和自身的茫然和困惑。那时候，学者们认真而激烈的讨论，而街边的孩子们却瞪着茫然的眼睛，观望着大街上的人群和车流，无动于衷的走过十字路口，溶入人群。
          我也是他们中间的一个。坐在角落里，看着眼前的人，懒洋洋的笑。在不知不觉中把城市的灰，以及沮丧无奈诅咒反抗融进了生命。那年我十八岁。我不爱任何人。我觉得自己已经老了。我常常坐在路边看夕阳。人们说我看着很颓废。
        </span>
      </p>
    </div>
  </body>
</html>

4、解释

1、为什么要用 <span><span/>包裹文字而不直接放入<p><p/>标签中

通过将文字放入 span 元素中，可以更灵活地应用动画效果。在这个例子中，通过为 span 元素应用渐变背景，可以实现文字擦除的效果，而直接在 p 标签中放置文字无法实现同样的效果。

2、@property --p { ... }

因为动画的本质是CSS样式属性中数字的变化。--p的值虽然是一个数字。但是不属于CSS中的属性。这段代码是在把--p变为CSS中的属性

bbamx.

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端开发攻略---用代码实现在PPT中十分常见的文本擦除效果。

实现一个文本擦除的动画效果。通过控制背景渐变的变化，文字逐渐从完全隐藏变为可见，仿佛被擦除的效果。具体来说，它通过自定义 CSS 属性 --p 控制渐变的进度，在关键帧动画中实现了文字擦除的效果。同时，使用 span 元素包裹文本，以便更精细地控制文字样式和动画效果。
复制链接

扫一扫