下面的代码只有在支持HTML5下的浏览器中运行!!html5写的3D逼真圣诞树效果

html5写的3D逼真圣诞树效果

html, body { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; }

p { margin: 0; padding: 0; border: 0; }

.nav {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 27px;

background-color: white;

color: black;

text-align: center;

line-height: 25px;

}

a { color: black; text-decoration: none; border-bottom: 1px dashed black; }

a:hover { border-bottom: 1px solid red; }

.previous { float: left; margin-left: 10px; }

.next { float: right; margin-right: 10px; }

.green { color: green; }

.red { color: red; }

textarea { width: 100%; height: 100%; border: 0; padding: 0; margin: 0; padding-bottom: 20px; }

.block-outer { float: left; width: 22%; height: 100%; padding: 5px; border-left: 1px solid black; margin: 30px 3px 3px 3px; }

.block-inner { height: 68%; }

.one { border: 0; }

var collapsed = true;

function toggle() {

var fs = top.document.getElementsByTagName('frameset')[0];

var f = fs.getElementsByTagName('frame');

if (collapsed) {

fs.rows = '250px,*';

// enable resizing of frames in firefox/opera

fs.noResize = false;

f[0].noResize = false;

f[1].noResize = false;

} else {

fs.rows = '30px,*';

// disable resizing of frames in firefox/opera

fs.noResize = true;

f[0].noResize = true;

f[1].noResize = true;

}

collapsed = !collapsed;

}

var b = document.body;

var c = document.getElementsByTagName('canvas')[0];

var a = c.getContext('2d');

document.body.clientWidth; // fix bug in chrome.

// start of submission //

M=Math;Q=M.random;J=[];U=16;T=M.sin;E=M.sqrt;for(O=k=0;x=z=j=i=k<200;)with(M[k]=k?c.cloneNode(0):c){width=height=k?32:W=446;with(getContext('2d'))if(k>10|!k)for(font='60px Impact',V='rgba(';I=i*U,fillStyle=k?k==13?V+'205,205,215,.15)':V+(147+I)+','+(k%2?128+I:0)+','+I+',.5)':'#cca',i<7;)beginPath(fill(arc(U-i/3,24-i/2,k==13?4-(i++)/2:8-i++,0,M.PI*2,1)));else for(;x=T(i),y=Q()*2-1,D=x*x+y*y,B=E(D-x/.9-1.5*y+1),R=67*(B+1)*(L=k/9+.8)>>1,i++>0)+',40,.1)'),moveTo(U+x*8,U+y*8),lineTo(U+x*U,U+y*U),stroke();for(y=H=k+E(k++)*25,R=Q()*W;P=3,jH&Q()>.8?Q(P=9)*4:0)>>1]}setInterval(function G(m,l){A=T(D-11);if(l)return(m[2]-l[2])*A+(l[0]-m[0])*T(D);a.clearRect(0,0,W,W);J.sort(G);for(i=0;L=J[i++];a.drawImage(M[L[3]+1],207+L[0]*A+L[2]*T(D)>>0,L[1]>>1)){if(i==2e3)a.fillText('Merry Christmas!',U,345);if(!(i%7))a.drawImage(M[13],((157*(i*i)+T(D*5+i*i)*5)%W)>>0,((113*i+(D*i)/60)%(290+i/99))>>0);}D+=.02},1)

// end of submission //

html如何制作圣诞树,分享用HTML5来实现一个3D逼真的圣诞树相关推荐

  1. 分享用Adobe Air向iOS移植游戏的经验

    分享用Adobe Air向iOS移植游戏的经验 http://gamerboom.com/archives/47931 发布时间:2012-02-21 17:04:42 Tags:Adobe Air, ...

  2. 视频教程-线上培训上课实录整站设计制作开发全能培训-HTML5/CSS

    线上培训上课实录整站设计制作开发全能培训 粉丝已经近2万人.传课网业余讲师. 彭亮 ¥39.00 立即订阅 扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订阅课程,领取优惠,最 ...

  3. html语言制作带样式的表格,html制作一个复杂表格 html5/CSS3做一个表格

    table td{width: 100px;padding: 5px;}DataDataDataDataDataDataDataDataDataDataDataDataDataDataData 用HT ...

  4. 如何用Photoshop制作动态分镜

    动态分镜(Animatics) 是视频制作前期流程的核心部分.你可以用photoshop制作一个简单的动态分镜,只需要以下几个简单步骤: 新建文件 添加时间轴 添加分镜图 设定分镜时间 预览/播放动态 ...

  5. 如何用手机HTML制作哆啦a梦,HTML5利用canvas绘制哆啦A梦头部-电脑自学网

    html5的canvas是很强大的,下面本篇文章使用html5 canvas 实现一个简单的哆啦A梦头部.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 效果如下: 代码如下: 您的 ...

  6. 基于 HTML5 WebGL 的加油站 3D 可视化监控

    前言 随着数字化,工业互联网,物联网的发展,我国加油站正向有人值守,无人操作,远程控制的方向发展,传统的人工巡查方式逐渐转变为以自动化控制为主的在线监控方式,即采用数据采集与监控系统 SCADA.SC ...

  7. linux下u盘如何将分割的合在一起,我又一个8g的U盘,想分两个区,一个区装系统,用PE引导,另一个分割槽用来存放档案,有什么工具,怎么操作,...

    我又一个8g的U盘,想分两个区,一个区装系统,用PE引导,另一个分割槽用来存放档案,有什么工具,怎么操作,以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的 ...

  8. 圣诞节怎么能缺少圣诞树呢?Python+HTML打造专属于你的圣诞树

    前言: 美酒一杯让人醉,温馨陪伴浪漫随;雪花片片惹人爱,烦恼忧伤全不见;字里行间藏真情,文短情深送心愿:圣诞佳节快来到,祝大家永远开心幸福! Hello大家好,我是Dream. 圣诞节马上到了,一些朋 ...

  9. 基于 HTML5 WebGL + WebVR 的 3D 虚实现实可视化培训系统

    前言 2019 年 VR, AR, XR, 5G, 工业互联网等名词频繁出现在我们的视野中,信息的分享与虚实的结合已经成为大势所趋,5G 是新一代信息通信技术升级的重要方向,工业互联网是制造业转型升级 ...

  10. 基于 HTML5 WebGL 的发动机 3D 可视化系统

    前言 工业机械产品大多体积庞大.运输成本高,在参加行业展会或向海外客户销售时,如果没有实物展示,仅凭静态.简单的图片说明书介绍,无法让客户全面了解产品,不仅工作人员制作麻烦,客户看得也费力.如果能在 ...

最新文章

  1. C#:String.Format数字格式化输出
  2. git在项目中的实际运用
  3. 串—KMP算法(详细)
  4. (转)使用XmlDocument类完成对XML的查、删、添、改
  5. 刷机后如何升级android,手机系统怎么升级 三大方法大全【图文】
  6. spring cloud 调用接口间歇性返回http 500 - Internal Server Error的错误
  7. 把网站图片和php程序分离,我的图片服务器和WEB应用服务器相分离的简单方案
  8. android 代码混淆原理,Android 代码混淆
  9. 基于HoG 的图像特征提取及其分类研究
  10. chm打开秒退_无法打开chm文件
  11. “工欲善其事,必先利其器”-- 教你几招如何选择合适的数据可视化工具
  12. python高阶知识之——列表推导式(63)
  13. turtlesim画正方形代码对比
  14. 10个超赞的jQuery图片滑块动画
  15. 我的世界服务器修改id指令,我的世界基础指令(essential)指令权限大全-Minecraft指令...
  16. ePower入门-TLE9879连接不上JLink
  17. 叶酸PEG叶酸,FA-PEG-FA
  18. 深入学习 Java 8 全新日期时间库 java.time(五)
  19. 发动机测试人员如何无需取样就能精准把握机油质量?
  20. 黑马程序员-java-高新技术上《九》

热门文章

  1. Spring Security认证_内存认证
  2. 错误 C1041 无法打开程序数据库“xxx\Debug\core142.pdb”
  3. 三角形周长最短问题_三角形周长最短的动点问题
  4. dsp28335 Ecap总结
  5. 仙境传说 RO手游 自动技能 定时加状态脚本
  6. 2021级新生个人训练赛第37场
  7. nginx 403错误
  8. 三维软件中制作动画导入Unity中使用
  9. 在vue中如何使用umy-ui
  10. Linux下的任务管理器 top命令