首先贴一下tweenmax的中文网：
首先先展示一下最后的效果，需要的就继续看下去：
那团乱码是会一直变的
那么如何实现上图的效果呢？？？
其实就是运用了tweenmax的插件scrambletextplugin（在这个页面可以下载：）
代码如下：
js
$(document).ready(function(){ var tl = new timelinelite(); tl.to("#scramble1",3,{delay:2})//这边的delay就是用来做延迟显示的，也可以去掉的。用scrambletext这个插件的意义其实就是：当第一个动画结束之后，第二个动画才会开始，所以应该是去避免使用delay属性的 .to("#scramble1",8,{scrambletext:{text:"{original}", chars:"upperandlowerca", revealdelay:0.5, tweenlength:true, newclass:"class2", oldclass:"class1",speed:10,delimiter:""}, ea:linear.eanone}) .to("#scramble2",3,{delay:2}) .to("#scramble2",8,{scrambletext:{text:"{original}", chars:"upperandlowerca", revealdelay:0.5, tweenlength:true, newclass:"class2", oldclass:"class1",speed:10,delimiter:""}, ea:linear.eanone}) .to("#scramble3",3,{delay:2}) .to("#scramble3",8,{scrambletext:{text:"{original}", chars:"upperandlowerca", revealdelay:0.5, tweenlength:true, newclass:"class2", old中餐宴请礼仪class:"class1",speed:10,delimiter:""}, ea:linear.eanone}) .to("#scramble4",3,{delay:2}) .to("#scramble4",8,{scrambletext:{text:"{original}", chars:"upperandlowerca", revealdelay:0.5, tweenlength:true, newclass:"class2", oldclass:"class1",speed:10,delimiter:""}, ea:linear.eanone});})相应的参数如下图所示：
html
<!doctype html><html lang="zh-cn"> <head> <meta chart="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_r学网球oom.css" type="text/css"> </head> <body onlectstart="return fal" oncontextmenu=lf.event.returnvalue=fal><!----> <div id="scramble1"> hel..hello... can u e me?? okk, listen ...press f11, better to look... </div> <div id="scramble2"> welpresurel.. i'm twelve, glad tooooooooo e 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(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-rif;}结束疗~ 如果有错误或者需要改进的欢迎在评论区留言，我会尽快回复和改正的！谢谢浏览~
或者html/css/js 的结构写的不漂亮的话也欢迎大家指出来！谢谢！
本文发布于:2023-04-06 08:59:26，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/e98bdf04d66af8b9fa8047387de0ad0e.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：TweenMax—ScrambleText插件 实现类似电脑破译密码的特效.doc
本文 PDF 下载地址：TweenMax—ScrambleText插件 实现类似电脑破译密码的特效.pdf
| 留言与评论（共有 0 条评论） |
