JS字符错乱的文字动画

一款字符错乱的文字动画效果，一开始先显示错乱变化的字符，最后显示成预设的文字内容，支持多行文本内容的显示切换，显示切换的时间等均可自由调整。

分类：文字特效 > 文字动画难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需设置好页面元素的样式，代码如下：

html,
body {
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  background: #212121;
  height: 100%;
}
.container {
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}
.text {
  font-weight: 100;
  font-size: 28px;
  color: #fafafa;
}
.dud {
  color: #757575;
}

页面的body部分，设置好文字的div容器，代码如下：

<div class="container">
  <div class="text"></div>
</div>

页面的底部，需引入必要的JS文件来控制文字动画的显示效果，代码如下：

<script type="text/javascript" src="js/index.js"></script>