首先贴一下TweenMax的中文网：https://www.tweenmax.com.cn/

首先先展示一下最后的效果，需要的就继续看下去：

那团乱码是会一直变的

那么如何实现上图的效果呢？？？

其实就是运用了TweenMax的插件ScrambleTextPlugin（在这个页面可以下载：https://www.tweenmax.com.cn/source/）

代码如下：

JS

$(document).ready(function(){

    var tl = new TimelineLite();

    tl.to("#scramble1",3,{delay:2})//这边的delay就是用来做延迟显示的，也可以去掉的。用scrambleText这个插件的意义其实就是：当第一个动画结束之后，第二个动画才会开始，所以应该是去避免使用delay属性的

      .to("#scramble1",8,{scrambleText:{text:"{original}", chars:"upperAndLowerCase", revealDelay:0.5, tweenLength:true, newClass:"class2", oldClass:"class1",speed:10,delimiter:""}, ease:Linear.easeNone})

      .to("#scramble2",3,{delay:2})

      .to("#scramble2",8,{scrambleText:{text:"{original}", chars:"upperAndLowerCase", revealDelay:0.5, tweenLength:true, newClass:"class2", oldClass:"class1",speed:10,delimiter:""}, ease:Linear.easeNone})

      .to("#scramble3",3,{delay:2})

      .to("#scramble3",8,{scrambleText:{text:"{original}", chars:"upperAndLowerCase", revealDelay:0.5, tweenLength:true, newClass:"class2", oldClass:"class1",speed:10,delimiter:""}, ease:Linear.easeNone})

      .to("#scramble4",3,{delay:2})

      .to("#scramble4",8,{scrambleText:{text:"{original}", chars:"upperAndLowerCase", revealDelay:0.5, tweenLength:true, newClass:"class2", oldClass:"class1",speed:10,delimiter:""}, ease:Linear.easeNone});

})

相应的参数如下图所示：

HTML 

<!DOCTYPE html>

<html lang="zh-CN">

    <head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <meta name="keywords" content="twelve">

        <title>Chat</title>

        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

        <script src="js/chatting_room.js"></script>

        <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js'></script>

        <script src="js/ScrambleTextPlugin.min.js"></script>

        <link rel="stylesheet" href="css/chatting_room.css" type="text/css">

    </head>

    <body onselectstart="return false" oncontextmenu=self.event.returnValue=false><!---->

        <div id="scramble1">

            Hel..hello... can u see me?? Okk, listen ...press F11, better to look...

        </div>

        <div id="scramble2">

            Well.. I'm twelve, glad tooooooooo see u...

        </div>

        <div id="scramble3">

            And...Sorry  This page is developing...and I don't know what ... what this page will be...

        </div>

        <div id="scramble4">

            (end... :-)

        </div>

        <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js'></script>

        <script src="js/ScrambleTextPlugin.min.js"></script>

    </body>

</html>

CSS

body {

    background-color: rgb(, , );

}

div {

    font-size: %;

}

.class1 {

    background-color: rgb(, , );

    color: rgb(, , );

}

.class2 {

    background-color: rgb(, , );

    color: rgb(, , );

    font-family: Arial, Helvetica, sans-serif;

}

结束疗~ 如果有错误或者需要改进的欢迎在评论区留言，我会尽快回复和改正的！谢谢浏览~

或者html/css/js 的结构写的不漂亮的话也欢迎大家指出来！谢谢！

TweenMax—ScrambleText插件 实现类似电脑破译密码的特效的更多相关文章

  1. kettle系列-[KettleUtil]kettle插件，类似kettle的自定义java类控件

    该kettle插件功能类似kettle现有的定义java类插件,自定java类插件主要是支持在kettle中直接编写java代码实现自定特殊功能,而本控件主要是将自定义代码转移到jar包,就是说自定义 ...

  2. Duilib实现类似电脑管家扫描目录效果

    实现原理: 1.后台开线程遍历目录,遍历出一个文件路径在界面上更新显示(通过发消息通知主界面) 2.需要扩展一下Duilib控件,在此我扩展了CLabelUI,重写了PaintText函数 扩展控件的 ...

  3. js插件---在线类似excel生成图表插件解决方案

    js插件---在线类似excel生成图表插件解决方案 一.总结 一句话总结:google比百度好用多了,多用google google js editable table jquery 双向绑定 这种 ...

  4. CSDN开源夏令营 基于Compiz的switcher插件设计与实现之compiz特效插件介绍及特效实现

    compiz自带的特效插件不够多,也不够强大.为了更好的体验compiz的特效,我们能够安装特效插件,在终端输入命令:sudo apt-get install compiz-plugins就能够下载特 ...

  5. PowerToys插件扩展(类似Alfred)

    在mac系统除了自带的Spotlight还有一个很好用的工具叫Alfred image 在windows系统也有一个很好用的工具叫PowerToys,是微软的一个开源项目 image https:// ...

  6. jquery.SuperSlide.js只需要调用一个插件就能实现网页大部分特效--推荐

    很棒的一个插件,http://www.superslide2.com/

  7. 容易上手-类似ERP系统 简单特效

    今天大概简单写一个效果, 这个效果 很容易 上手的: html: <style type="text/css">.menu_list ul{display:none;} ...

  8. eclipse安装插件的各种方法

    做为当下最流行的开源IDE之一,Eclipse的一大优势就在于其无数优秀的插件.一个好的插件可以大大的提高我们的工作效率,学习如何安装Eclipse插件自然也是必修课了.下面介绍Eclipse插件的安 ...

  9. 【Android Studio安装部署系列】二十四、Android studio中Gradle插件版本和Gradle版本关系

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 在从Android Studio3.0.0版本升级到Android Studio3.0.1版本的时候,出现了一个问题,需要升级Gra ...

随机推荐

  1. Linux学习笔记(一)

    操作系统(operation system,os) 主要作用是管理好硬件设备,并为用户和应用程序提供一个简单的接口, 以便于使用,作为中间人,连接软件和硬件 操作系统linux发展历程 unix-&g ...

  2. NLP自然语言处理

    转:https://blog.csdn.net/qq_17677907/article/details/86448214 1.有哪些文本表示模型,它们各有什么优缺点?   文本表示模型是研究如何表示文 ...

  3. 记某app内购破解 – 安卓逆向菜鸟的初体验

    前言 因为某个机缘,我拿到一个赛车app,玩了一会想买个装备,居然要我掏钱包,作为一名cracker,我觉得我的尊严受到了严重的蔑视(无奈钱包空空),我觉得要捍卫我那脆弱的玻璃心(钱包),所以,开干吧 ...

  4. Linux下打开超大文件的方法

    Linux下打开超大文件方法 在Linux下用VIM打开大小几个G.甚至几十个G的文件时,是非常慢的. 这时,我们可以利用下面的方法分割文件,然后再打开. 1 查看文件的前多少行 head -1000 ...

  5. openresty开发系列32--openresty执行流程之1初始化阶段

    openresty开发系列32--openresty执行流程之初始化阶段 一)初始化阶段 1)init_by_lua   init_by_lua_block     init_by_lua_file语 ...

  6. preHandle、postHandle与afterCompletion

    preHandle 调用时间:Controller方法处理之前 执行顺序:链式Intercepter情况下,Intercepter按照声明的顺序一个接一个执行 若返回false,则中断执行,注意:不会 ...

  7. 【tensorflow基础】TensorFlow查看GPU信息

    re 1. TensorFlow查看GPU信息; end

  8. 2019 西安邀请赛 M

    Problem Description There are n planets ∼n. Each planet is connected to other planets through some t ...

  9. 【C++札记】类的继承

    继承 面向对象的设计思想,类对数据做了封装,并可以加入访问权限,类的继承是面向对象思想的精髓.类的继承可以让新类从以有的类中获得已有的特征.原有类称为基类或父类,新类称为派生类或子类. 语法: cla ...

  10. python学习-69 包装和授权

    包装 1.二次加工标准类型(包装) class List(list): def append(self, a_objcet): if type(a_objcet) is str: super().ap ...