• 前端 CSS 经典：多行文本擦除效果

    前言：使用动画实现更改变量 --p，实现多行文本擦除效果，css 动画逻辑，什么样的动画是生效的，一定是一个数值类的 CSS 属性。--p 只是个变量，不是 CSS 属性，通过 Houdini API 使它变成一个属性。

    效果图：

    代码实现：

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="utf-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta
    7.       name="viewport"
    8.       content="initial-scale=1.0, user-scalable=no, width=device-width"
    9.     />
    10.     <title>documenttitle>
    11.     <style>
    12.       * {
    13.         margin: 0;
    14.         padding: 0;
    15.         box-sizing: border-box;
    16.         text-align: justify;
    17.       }
    18.  
    19.       body {
    20.         background: #000;
    21.         color: #fff;
    22.       }
    23.  
    24.       .contain {
    25.         width: 80%;
    26.         margin: 1em auto;
    27.         line-height: 2;
    28.         text-indent: 2em;
    29.         position: relative;
    30.       }
    31.       .eraser {
    32.         position: absolute;
    33.         inset: 0;
    34.       }
    35.       .text {
    36.         background: linear-gradient(
    37.           to right,
    38.           #0000 var(--p),
    39.           #000 calc(var(--p) + 30px)
    40.         );
    41.         color: transparent;
    42.         animation: erase 5s linear forwards;
    43.       }
    44.  
    45.       @property --p {
    46.         syntax: "";
    47.         initial-value: 0%;
    48.         inherits: false;
    49.       }
    50.  
    51.       @keyframes erase {
    52.         to {
    53.           --p: 100%;
    54.         }
    55.       }
    56.     style>
    57.   head>
    58.   <body>
    59.     <div>
    60.       <div class="contain">
    61.         <p>
    62.           台湾省是中国的！是中国不可获取的一部分，任何台独势力，我们都绝不姑息！解放军万岁！收复台湾指日可待！台湾省是中国的！是中国不可获取的一部分，任何台独势力，我们都绝不姑息！解放军万岁！收复台湾指日可待！台湾省是中国的！是中国不可获取的一部分，任何台独势力，我们都绝不姑息！解放军万岁！收复台湾指日可待！台湾省是中国的！是中国不可获取的一部分，任何台独势力，我们都绝不姑息！解放军万岁！收复台湾指日可待！台湾省是中国的！是中国不可获取的一部分，任何台独势力，我们都绝不姑息！解放军万岁！收复台湾指日可待！
    63.         p>
    64.         <p class="eraser">
    65.           <span class="text">
    66.             台湾省是中国的！是中国不可获取的一部分，任何台独势力，我们都绝不姑息！解放军万岁！收复台湾指日可待！台湾省是中国的！是中国不可获取的一部分，任何台独势力，我们都绝不姑息！解放军万岁！收复台湾指日可待！台湾省是中国的！是中国不可获取的一部分，任何台独势力，我们都绝不姑息！解放军万岁！收复台湾指日可待！台湾省是中国的！是中国不可获取的一部分，任何台独势力，我们都绝不姑息！解放军万岁！收复台湾指日可待！台湾省是中国的！是中国不可获取的一部分，任何台独势力，我们都绝不姑息！解放军万岁！收复台湾指日可待！
    67.           span>
    68.         p>
    69.       div>
    70.     div>
    71.     <script>script>
    72.   body>
    73. html>
  • 相关阅读:
    torchtext中文文本预处理使用流程文档
    集合工具类---Collections
    重写并自定义依赖的原生的Bean方法
    GRACE球谐数据滤波处理（利用matlab实现GRACE月水储量的二维傅里叶变化滤波）
    C++多线程学习06
    中国人保为天能电力器具承保产品责任险，为消费者保驾护航！
    bash: redi-cli: 未找到命令...
    数组概念题目精选
    阿里云GPU计算型gn6v云服务器性能配置|活动优惠价
    Win11如何格式化硬盘？
  • 原文地址：https://blog.csdn.net/weixin_64684095/article/details/139281502