简单代码实现文字动画，作者曾1K实现3D圣诞树

发布时间：2018-08-17 09:38:49 所属栏目：专访来源：站长网

导读：超小代码实现的文字动画功能，代码基本上都来自 Romn Corts,就是那个只用了1K字符写出3D圣诞树的技术大牛，技术这东西绝对不是说笑的，也不是能抄袭来的，大家自己看看下边的效果吧，不佩服不行啊，够牛悍! 方法：点击下边的运行按钮，看到非常普通的文字

　　超小代码实现的文字动画功能，代码基本上都来自 Román Cortés,就是那个只用了1K字符写出3D圣诞树的技术大牛，技术这东西绝对不是说笑的，也不是能抄袭来的，大家自己看看下边的效果吧，不佩服不行啊，够牛悍!

　　方法：点击下边的运行按钮，看到非常普通的文字，我们用鼠标点击就可以看到文字动画效果了。

　　演示：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Who am I</title> <style type="text/css"> body { font-family: '<b>微软雅黑</b>'; line-height: 2; font-size: 18px; color: #444; } b{font-weight:normal;} </style> </head> <body> <div id="avata" style="width:50%;word-wrap:break-word;cursor:pointer;" onclick="anim()">烈火学院 www.veryhuo.com 提供各种教程，源码，设计素材，书籍教程，网页模板、网页特效，常用软件。</div> <script type="text/javascript">/*<![CDATA[*/ var d='43#43643F44)44745!45345G:%6?>6E/6JH6P,JU96X1JF8(F89F9#F90F9HF:1F:AX01X0?X0OX18X23X2DX3/X3@1%E6%@:45?@C?A+;&2>CODA0I@JO%6M71LFAW*1V9BU0+55D56.56=56O578;@>AJ>H9*N**SO>Y&BXO,XO?Y()Y(;1B46)43$F3%03%B3&,3&=3&O1E86E9=J#=J5=JE=>C=?-=??=@(=@:82#C;7H;,JB@JC,JC=JCOJD:JE#JE4DF<O7<U(<ZA<U&BTO,TO>U((U(OU):U*$43#43643F44)44745!45345G:%6?>6E/6JH6P,JU96X1JF8(F89F9#F90F9HF:1F:AX01X0?X0OX18X23X2DX3/X3@1%E6%@:45?@C?A+;&2>CODA0I@JO%6M71LFAW*1V9BU0+55D56.56=56O578;@>AJ>H9*N**SO>Y&BXO,XO?Y()Y(;1B46)43$F3%03%B3&,3&=3&O1E86E9=J#=J5=JE=>C=?-=??=@(=@:82#C;7H;,JB@JC,JC=JCOJD:JE#JE4DF<O7<U(<ZA<U&BTO,TO>U((U(OU):U*$43#43643FU(OU):U*$'; var xo=[], yo=[], xd=[], yd=[], e=[], an=-1, dir=-1 , t=0; var e; function i() { var n=0, g=document.getElementById('avata'), l=g.innerHTML, s=''; while (n<l.length) { var r=l.charAt(n); if (r==' ') {s+=r; n++} if (r=='<') while (l.charAt(n-1)!='>') s+=l.charAt(n++); s+='<b>'+l.charAt(n++)+'</b>'; } g.innerHTML=s; e=document.getElementById('avata').getElementsByTagName('b'); for (n=0; n<e.length; n++) { xo[n]=e[n].offsetLeft; yo[n]=e[n].offsetTop; var p=d.charCodeAt(n*3)*1600+d.charCodeAt(n*3+1)*40+d.charCodeAt(n*3+2)-78768; yd[n]=p%500; xd[n]=(p-yd[n])/500; } for (n=0; n<e.length; n++) { e[n].style.position='absolute'; e[n].style.left=xo[n]+'px'; e[n].style.top=yo[n]+'px'; } } function ani() { t=parseInt(e.length/4)+2; for (var n=0; n<t; n++) { m=e.length-1-n; if ((an-n<=30)&&(an-n>=0)) { var b=(Math.cos((((an-n)*Math.PI)/30))+1)/2; var a=1-b; for (i=0; i<=t; i+=t) { e[n+i].style.left=((yd[n+i]+111)*a+xo[n+i]*b)+'px'; e[n+i].style.top=((xd[n+i]+74)*a+yo[n+i]*b)+'px'; e[m-i].style.left=((yd[m-i]+111)*a+xo[m-i]*b)+'px'; e[m-i].style.top=((xd[m-i]+74)*a+yo[m-i]*b)+'px'; } } } an+=dir; if ((an-t<=30)&&(an>=0)) { window.setTimeout("ani()", 30); } } function anim() { dir*=-1; if ((an<0)||(an-t>30)) ani(); } i(); /*]]>*/ </script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：济源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!