热门关键字:
jquery > jquery插件 > html5 > 网友Adam分享原创html5实现3d变幻字体特效

网友Adam分享原创html5实现3d变幻字体特效

11013
所属分类:html5
发布时间:2013/8/23 14:25:02
下载量:1367
评论数:2
转载请自觉注明原文:http://www.jq-school.com/Detail.aspx?id=307

首先非常感谢网友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}
];


效果太难捕抓了,大概效果如下:

网友Adam分享原创html5实现3d变幻字体特效






如果您觉得本作品对您的学习有所帮助:支付鼓励



关键字:HTML5 css3 360度旋转 3D特效 图片3D旋转 3D效果 2D特效 box2d Aui-core 网友Adam’
  • 网友Adam分享原创html5实现3d变幻字体特效如果你喜欢学院的资源就下载吧,亲,谢谢!
  • 网友Adam分享原创html5实现3d变幻字体特效
  • 网友Adam分享原创html5实现3d变幻字体特效
  • 提示:如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !

声明: 本站内容均为网友原创或整理于互联网,版权归作品最初创作人,转载请注明(出处)原文链接,转载前请邮件至磐temdy@qq.com,一旦发现造成侵权行为,后果自负。。

友荐云推荐