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

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

是基于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>

芝麻小仙女

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

公告