css多行文本擦拭效果

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>多行文本擦拭效果title>
    <style>
      * {
        margin: 0;
        padding: 0;
        /* 指定元素的框模型类型,元素的宽度和高度会包括边框和内边距 */
        box-sizing: border-box;
      }
      body {
        background: #000;
        color: #fff;
      }
      .container {
        width: 80%;
        margin: 1em auto;
        line-height: 2;
        /* 文本段落行首缩进 */
        text-indent: 2em;
        position: relative;
      }
      .eraser {
        position: absolute;
        inset: 0;
      }
      .text {
        color: transparent;
        --p: 0%;
        background: linear-gradient(
          to right,
          #0000 var(--p),
          #000 calc(var(--p) + 30px)
        );
        /* 动画生效 一定是一个数值类的css属性 --p初始只是变量,因此要定义为css属性 */
        animation: eraser 5s linear forwards;
      }
      /* 定义一个css属性   属性值规定为百分比值 初始值0% 不可继承*/
      @property --p {
        syntax: "";
        initial-value: 0%;
        inherits: false;
      }
      @keyframes eraser {
        to {
          --p: 100%;
        }
      }
    style>
  head>
  <body>
    <div class="container">
      <p>
        柔和的晨光洒在窗前,微风轻拂着花朵,带来一丝丝清新的芬芳。远处,湖面上泛起涟漪,仿佛是大自然在吟唱一首美妙的乐章。这个清晨,我站在这片宁静的土地上,感受到了生命的美妙。
        阳光穿过树叶的缝隙,投下斑驳的光影。树枝上的鸟儿欢快地歌唱着,它们的声音在空中飘荡,如同一曲天籁之音。我闭上眼睛,让阳光温暖我的脸庞,感受大自然的呼吸。
        走进花海,一片花瓣落在我的手心,柔软而香甜。花朵绽放的时刻是如此短暂,但每一朵都是那样的美丽,每一朵都有独特的芬芳。它们散发着花香,吸引着蜜蜂和蝴蝶前来品味。我凝视着花海,仿佛置身于一个梦幻的仙境。
        夕阳西下,天空渐渐染上了一抹橙红色。那是一种温柔而宁静的颜色,给人一种安心的感觉。我坐在湖畔,看着夕阳的余晖映照在湖面上,波光粼粼。湖水悄悄地流淌着,它带走了白昼的喧嚣,带来了夜晚的宁静。
        夜幕降临,星星点点的繁星闪烁在黑暗的天空中。它们如同钻石般闪耀着光芒,让人陶醉其中。我仰望着星空,感受到了无尽的宇宙之美。每一个星座都有属于自己的故事,它们在夜空中编织出一幅神奇的图案。
        生命的美妙就在这些平凡的瞬间中。当我们用心去感受大自然的恩赐时,我们才能真正领悟到生活的价值。无论是阳光、花朵、湖水还是星星,它们都是大自然赋予我们的礼物,提醒我们珍惜每一个瞬间。
        让我们用心去感受大自然的美丽,让我们珍惜生命中的每一刻。唯有这样,我们才能真正体验到生命的唯美。
      p>
      <p class="eraser">
        <span class="text">
          柔和的晨光洒在窗前,微风轻拂着花朵,带来一丝丝清新的芬芳。远处,湖面上泛起涟漪,仿佛是大自然在吟唱一首美妙的乐章。这个清晨,我站在这片宁静的土地上,感受到了生命的美妙。
          阳光穿过树叶的缝隙,投下斑驳的光影。树枝上的鸟儿欢快地歌唱着,它们的声音在空中飘荡,如同一曲天籁之音。我闭上眼睛,让阳光温暖我的脸庞,感受大自然的呼吸。
          走进花海,一片花瓣落在我的手心,柔软而香甜。花朵绽放的时刻是如此短暂,但每一朵都是那样的美丽,每一朵都有独特的芬芳。它们散发着花香,吸引着蜜蜂和蝴蝶前来品味。我凝视着花海,仿佛置身于一个梦幻的仙境。
          夕阳西下,天空渐渐染上了一抹橙红色。那是一种温柔而宁静的颜色,给人一种安心的感觉。我坐在湖畔,看着夕阳的余晖映照在湖面上,波光粼粼。湖水悄悄地流淌着,它带走了白昼的喧嚣,带来了夜晚的宁静。
          夜幕降临,星星点点的繁星闪烁在黑暗的天空中。它们如同钻石般闪耀着光芒,让人陶醉其中。我仰望着星空,感受到了无尽的宇宙之美。每一个星座都有属于自己的故事,它们在夜空中编织出一幅神奇的图案。
          生命的美妙就在这些平凡的瞬间中。当我们用心去感受大自然的恩赐时,我们才能真正领悟到生活的价值。无论是阳光、花朵、湖水还是星星,它们都是大自然赋予我们的礼物,提醒我们珍惜每一个瞬间。
          让我们用心去感受大自然的美丽,让我们珍惜生命中的每一刻。唯有这样,我们才能真正体验到生命的唯美。
        span>
      p>
    div>
  body>
html>

css多行文本擦拭效果_第1张图片

你可能感兴趣的:(css,前端)