html+css3+anime.js实现文字故障动画

记录一个很酷的动画，效果如图：

 是基于html+css3+anime.js实现的，看了眼代码，其实是默认文字的div中定位了几个相同的文字块，利用clip-path这个属性去裁剪展示其中的一部分，用于展示故障的效果，动画则是使用anime.js去循环改变X与Y轴的位置，同时调整绘制的颜色，demo代码如下：

?
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
    />
    <meta name="referrer" content="no-referrer" />
    <title>demo</title>
  </head>
  <body>
    <div class="loading_box">
    <div class="loading_info">
      <div class="loading_info_text_lists">
        访问者接入
        <div class="loading_info_text loading_info_text1">访问者接入</div>
        <div class="loading_info_text loading_info_text2">访问者接入</div>
        <div class="loading_info_text loading_info_text3">访问者接入</div>
        <div class="loading_info_text loading_info_text4">访问者接入</div>
        <div class="loading_info_text loading_info_text5">访问者接入</div>
      </div>
      <div class="loading_info_text_lists">
        资料延展中
        <div class="loading_info_text loading_info_text1">资料延展中</div>
        <div class="loading_info_text loading_info_text2">资料延展中</div>
        <div class="loading_info_text loading_info_text3">资料延展中</div>
        <div class="loading_info_text loading_info_text4">资料延展中</div>
        <div class="loading_info_text loading_info_text5">资料延展中</div>
      </div>
    </div>
</div>
  </div>
  <style>
    html, body{
        margin: 0;
        padding: 0;
    }
    .loading_box{
        padding: 36px;
        box-sizing: border-box;
        background-color: rgb(39, 38, 38);
    }
    .loading_box .loading_info {
      font-size: 20px;
      line-height: 48px;
      color: rgb(159, 159, 159);
    }
    .loading_box .loading_info .loading_info_text_lists {
      position: relative;
      display: block;
      width: 160px;
      height: 48px;
    }
    .loading_box .loading_info .loading_info_text_lists:last-child {
      margin-left: 30px;
    }
    .loading_box .loading_info .loading_info_text_lists .loading_info_text {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      color: rgb(159, 159, 159);
    }
    .loading_box .loading_info .loading_info_text_lists .loading_info_text1 {
      -webkit-clip-path: polygon(0 0%, 100% 0%, 0 20%, 100% 20%);
      clip-path: polygon(0 0%, 100% 0%, 0 20%, 100% 20%);
    }
    .loading_box .loading_info .loading_info_text_lists .loading_info_text2 {
      -webkit-clip-path: polygon(0 20%, 100% 20%, 0 40%, 100% 40%);
      clip-path: polygon(0 20%, 100% 20%, 0 40%, 100% 40%);
    }
    .loading_box .loading_info .loading_info_text_lists .loading_info_text3 {
      -webkit-clip-path: polygon(0 40%, 100% 40%, 0 60%, 100% 60%);
      clip-path: polygon(0 40%, 100% 40%, 0 60%, 100% 60%);
    }
    .loading_box .loading_info .loading_info_text_lists .loading_info_text4 {
      -webkit-clip-path: polygon(0 60%, 100% 60%, 0 80%, 100% 80%);
      clip-path: polygon(0 60%, 100% 60%, 0 80%, 100% 80%);
    }
    .loading_box .loading_info .loading_info_text_lists .loading_info_text5 {
      -webkit-clip-path: polygon(0 80%, 100% 80%, 0 100%, 100% 100%);
      clip-path: polygon(0 80%, 100% 80%, 0 100%, 100% 100%);
    }
  </style>
   
  <script src="./jquery.js"></script>
  <script src="./anime.3.2.1.js"></script>
  <script>
    // 加载中文字故障动画
    let badWords = anime({
        targets: '.loading_info_text',
        translateX: [function () { return anime.random(-3, 3); }, function () { return anime.random(-3, 3); }],
        translateY: [function () { return anime.random(-2, 2); }, function () { return anime.random(-2, 2); }],
        color: function () { return 'rgb(' + anime.random(0, 255) + ',' + anime.random(0, 255) + ',' + anime.random(0, 255) + ')' },
        direction: 'alternate',
        opacity: [0, 1],
        loop: true,
        easing: 'easeInOutSine',
        delay: function () { return anime.random(0, 200); },
        duration: 200,
    })
  </script>
</html>

　　

相关学习文章：

【clip-path】

https://www.cnblogs.com/pizitai/p/6188346.html

https://blog.csdn.net/qq_41490563/article/details/125526889?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-125526889-blog-127320123.235%5Ev38%5Epc_relevant_sort&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-125526889-blog-127320123.235%5Ev38%5Epc_relevant_sort&utm_relevant_index=1

【动画效果】

https://animejs.com/

posted @   芝麻小仙女  阅读(101)  评论(0)  编辑  收藏  举报
相关博文：
· html+css3+anime.js实现线条来回滑动且渐隐动画
· css3序列帧动画&图片资源初次加载闪屏处理
· 使用html+css实现的文字效果
· CSS 赛博朋克 “故障风”按钮制作方法
· 记录--当文字成为雨滴：HTML、CSS、JS创作炫酷的"文字雨"动画！
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae