• 前端 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>
  • 相关阅读:
    如果nginx启动成功，但外部仍然不能访问的问题
    【MDP】①二次规划问题MATLAB求解器quadprog
    react-router基本使用
    “数字支付龙头”汇付天下：以CRM为起点建设业务全流程数字化
    Windows安装多个版本的Java
    Glide4.0 Transformation大全，罗列搜集所有Transformation，实现图片的变换
    Redis（一）--Redis入门（2）--Redis数据类型
    STM32 HAL库开发转固件库开发杂谈
    PAL8像素格式
    在单片机中什么是FLASH
  • 原文地址：https://blog.csdn.net/weixin_64684095/article/details/139281502