css多行文本擦拭效果

最新推荐文章于 2024-07-20 21:01:09 发布

 勿忘初心

最新推荐文章于 2024-07-20 21:01:09 发布

阅读量496

点赞数 10

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_64740434/article/details/135956224

版权

<!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: "<percentage>";
        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>

在这里插入图片描述

 勿忘初心

关注

10
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
css多行文本擦拭效果

* 动画生效一定是一个数值类的css属性 --p初始只是变量,因此要定义为css属性 *//* 定义一个css属性属性值规定为百分比值初始值0% 不可继承*//* 指定元素的框模型类型,元素的宽度和高度会包括边框和内边距 *//* 文本段落行首缩进 */
复制链接

扫一扫