记录一个很酷的动画，效果如图：
是基于html+css3+anime.js实现的，看了眼代码，其实是默认文字的div中定位了几个相同的文字块，利用clip-path这个属性去裁剪展示其中的一部分，用于展示故障的效果，动画则是使用anime.js去循环改变X与Y轴的位置，同时调整绘制的颜色，demo代码如下：
<!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/
标签：css3,info,loading,100%,box,js,html,anime,path From： https://www.cnblogs.com/nangras/p/17774081.html