首先先展示一下最后的效果，需要的就继续看下去：
那团乱码是会一直变的
那么如何实现上图的效果呢？？？
其实就是运用了TweenMax的插件ScrambleTextPlugin（在这个页面可以下载：https://www.tweenmax.com.cn/source/）
代码如下：
JS
$(document).ready(function(){
vartl=newTimelineLite();
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
<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<metaname="keywords"content="twelve">
<title>Chat</title>
<scriptsrc="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<scriptsrc="js/chatting_room.js"></script>
<scriptsrc='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js'></script>
<scriptsrc="js/ScrambleTextPlugin.min.js"></script>
<linkrel="stylesheet"href="css/chatting_room.css"type="text/css">
</head>
<bodyonselectstart="returnfalse"oncontextmenu=self.event.returnValue=false><!---->
<divid="scramble1">
Hel..hello...canuseeme??Okk,listen...pressF11,bettertolook...
</div>
<divid="scramble2">
Well..I'mtwelve,gladtoooooooooseeu...
</div>
<divid="scramble3">
And...SorryThispageisdeveloping...andIdon'tknowwhat...whatthispagewillbe...
</div>
<divid="scramble4">
(end...:-)
</div>
<scriptsrc='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js'></script>
<scriptsrc="js/ScrambleTextPlugin.min.js"></script>
</body>
</html>
CSS
body{
background-color:rgb(0,0,0);
}
div{
font-size:60%;
}
.class1{
background-color:rgb(0,0,0);
color:rgb(21,170,8);
}
.class2{
background-color:rgb(0,0,0);
color:rgb(28,224,10);
font-family:Arial,Helvetica,sans-serif;
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h56366.shtml
