Back to home
[代码分享]Js实现文字的3D旋转
2014-08-28 23:16:31 -0400
代码说明
Js实现文字的3D圆形旋转特效，代码简练，看了下效果，还挺逼真的，文字排成空心圆形呈3D旋转状，纯js实现的3D旋转，并非基于CSS3或HTML5，期待学习JavaScript文字处理的参考研究。
HTML代码
<html> <head> <script language="javascript"> Phrase="欢迎光临耀眼网盘！"; Balises=""; Taille=40; Midx=150; Decal=0.5; Nb=Phrase.length; y=-10000; for (x=0;x<Nb;x++){ Balises=Balises+'<DIV Id=L'+x+' STYLE="width:3;font-family: Courier New;font-weight:bold;position:absolute;top:160;left:70;z-index:0">'+Phrase.charAt(x)+ '</DIV>' } document.write(Balises); Time=window.setInterval("Alors()",50); Alpha=5; I_Alpha=0.05; function Alors(){ Alpha=Alpha-I_Alpha; for (x=0;x<Nb;x++){ Alpha1=Alpha+Decal*x; Cosine=Math.cos(Alpha1); Ob=document.all("L"+x); Ob.style.posLeft=Midx+100*Math.sin(Alpha1); Ob.style.zIndex=20*Cosine; Ob.style.fontSize=Taille+30*Cosine; Ob.style.color="rgb("+ (27+Cosine*80+50) + ","+ (127+Cosine*80+50) + ",0)"; } } </script> </head> <body> </body> </html>
代码演示
«Newer
Older»
Comment:
Name:
Back to home
Subscribe
|
Register
|
Login
|
N