首先非常感谢网友Adam的无私分享,这款作品是他百忙之中抽空写的一款原创html5实现3d变幻字体特效,网友Adam是jquery学堂群里面的网友【亚当】,是大家公认的前端大神,前面已经分享了很多款给力的作品,这款html5的效果不知道怎么去形容它,太棒了,大家自己去看一下呗。。。
注明:请使用支持html5的浏览器(谷歌、火狐等)浏览作品,否则看不到效果!
包括了以下功能:
1、3d特效
2、溶解效果
3、鼠标特效
4、360度旋转特效
5、放大特效
6、背景颜色切播
要变幻的字体内容设置代码如下:
var textSet = [
{text:"WEBSPHERE", sphereRadius:140, sphereSpace:80, unitTime:100, time:1000},
{text:"THIS_IS", sphereRadius:120, sphereSpace:70, unitTime:120, time:4000},
{text:"EXPERIMENTAL", sphereRadius:120, sphereSpace:70, unitTime:50, time:2000},
{text:"TYPEFACE", sphereRadius:120, sphereSpace:70, unitTime:100, time:4000},
{text:"BASED_ON", sphereRadius:100, sphereSpace:60, unitTime:100, time:3000},
{text:"HELVETICA", sphereRadius:140, sphereSpace:80, unitTime:100, time:2000},
{text:"@@@@@@@@", sphereRadius:60 + Math.random()*60, sphereSpace:200, unitTime:100, time:4000},
{text:"MOVABLE", sphereRadius:120, sphereSpace:70, unitTime:100, time:2000},
{text:"AND", sphereRadius:100, sphereSpace:60, unitTime:150, time:3500},
{text:"PROGRAMABLE", sphereRadius:120, sphereSpace:70, unitTime:50, time:2000},
{text:"!!!!!!!", sphereRadius:100, sphereSpace:60, unitTime:100, time:3500},
{text:"HACK_ME!", sphereRadius:140, sphereSpace:80, unitTime:100, time:2500},
{text:"@@@@@@@@", sphereRadius:60 + Math.random()*60, sphereSpace:200, unitTime:100, time:4000}
];
效果太难捕抓了,大概效果如下:
如果您觉得本作品对您的学习有所帮助:
关键字:
HTML5 css3 360度旋转 3D特效 图片3D旋转 3D效果 2D特效 box2d Aui-core 网友Adam’