CSS文字擦除效果

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <p>
      Some parents have publicly reported that a homeroom teacher at Laohekou Fourth Middle School in Xiangyang City, Hubei Province, posted a notice in the group chat stating that medical certificates are required for not ordering milk. The chat screenshot shows that the group notified that "schools with milk allergies require medical certificates", and parents also uploaded screenshots of milk ordering and payment. A parent of a first-year student at the school told reporters that at the beginning of the new semester, they were required to order milk for 330 yuan per semester. The homeroom teacher also issued a notice stating that unless the child is allergic to milk and has a medical certificate, they can refuse to order milk. Speaking of this, it is clearly a mandatory requirement to order milk, which is very repulsive. The staff of the Education Bureau of Laohekou City stated that ordering milk is based on voluntary principles and is never mandatory. They will verify and understand the situation with parents.
    </p>
    <p class="eraser">
      <span>
        Some parents have publicly reported that a homeroom teacher at Laohekou Fourth Middle School in Xiangyang City, Hubei Province, posted a notice in the group chat stating that medical certificates are required for not ordering milk. The chat screenshot shows that the group notified that "schools with milk allergies require medical certificates", and parents also uploaded screenshots of milk ordering and payment. A parent of a first-year student at the school told reporters that at the beginning of the new semester, they were required to order milk for 330 yuan per semester. The homeroom teacher also issued a notice stating that unless the child is allergic to milk and has a medical certificate, they can refuse to order milk. Speaking of this, it is clearly a mandatory requirement to order milk, which is very repulsive. The staff of the Education Bureau of Laohekou City stated that ordering milk is based on voluntary principles and is never mandatory. They will verify and understand the situation with parents.
      </span>
    </p>
  </div>
</body>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  body{
    background: #000;
    color: #fff;
  }
  .container{
    width: 500px;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
  }
  p{
    text-indent: 2em;
  }
  .eraser{
    position: absolute;
    top: 1px;
  }
  @property --p {
    syntax: "<percentage>";
    initial-value: 0%;
    inherits: false;
  }
  .eraser span{
    --p:0%;
    color: transparent;
    background: linear-gradient(to right, #0000 var(--p), #000 calc(0px + var(--p)));
    animation:erase 5s forwards;
  }
 @keyframes erase{
    to{
      --p: 100%;
    }
  }
</style>
</html>

　　

posted @   福超  阅读(12)  评论(0)  编辑  收藏  举报
相关博文：
· uniapp小程序 表单校验踩过的坑
· H5百度地图选择
· 初始CSS
· SpringSecurity认证和授权流程详解
· 《HTTP协议与内外网划分：网络世界的基石知识》
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示