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

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

div { 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实现圣诞树效果相关推荐

  1. html5设计礼品盒效果,HTML5/CSS3圣诞树和礼盒

    CSS 语言: CSSSCSS 确定 body { background: #FFF; } .container { position: absolute; left: 300px; top: 50p ...

  2. html如何添加时钟效果,HTML5实现时钟效果

    以下是完整代码,保存到html文件可以查看效果. HTML5时钟-柯乐义 柯乐义 原文 HTML5时钟 柯乐义提示您,请使用支持HTML5的浏览器,例如Chrome,IE9,IE10,Firefox等 ...

  3. html 搜索 高亮效果,html5输入框高亮效果

    [实例简介]登录界面输入框高亮效果 [实例截图] [核心代码] 当前输入框高亮显示 body,form,h2,p,input{margin:0;padding:0;} body{color:#4f4f ...

  4. html5悬浮效果,html5悬浮球效果

    1 .SuspendedBall{ 2 position:fixed; 3 width:50px; 4 height:50px; 5 background:#3071a9; 6 border-radi ...

  5. 代码实现:圣诞树效果(易懂,必会)/用html实现圣诞树效果

    下面的代码只有在支持HTML5下的浏览器中运行!! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" &q ...

  6. 10个奇幻的HTML5和Javascript效果

    导读:10款令人惊奇的HTML5和javascript效果.回到几年前,这些效果是根本不可能实现,只能用flash做,但是现在,已经很轻松的就可以实现了. Breathing Galaxies 使用键 ...

  7. 手机 html 折叠效果,HTML5仿苹果手机的面板合拢折叠效果

    passbook仿苹果手机的面板合拢折叠效果-html5特效 .pocket{ width:300px; height:460px; padding: 10px; overflow: hidden; ...

  8. 查看php文件的效果,HTML5的交互式动画效果文件夹预览查看特效

    HTML5交互式动画效果文件夹预览查看特效 HTML5交互式动画效果文件夹预览查看特效是一款当鼠标经过的时候文件夹里面的图片悬停显示预览效果. js代码 (function() { new DeviF ...

  9. 14个HTML5实现的效果合集

    HTML5可不是什么虚幻的概念,与其高谈阔论的讨论HTML5未来的趋势和价值,不如一起研究一下现在的HTML5可以做出哪些成果,可以让我们做出出色的产品. Form Follows Function就 ...

  10. html5 制作书架展示 PHP,简单做出HTML5翻页效果文字特效

    简单做出HTML5翻页效果文字特效 之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的, ...

最新文章

  1. JWT(JSON Web Token)简介及实现
  2. 论程序员价值:解决失误bug被涨绩效,零失误时无人问津
  3. html5之通讯API
  4. Silverlight之添加全局样式
  5. gui窗口遮挡算法_基于 C 语言开发的 GUI 框架
  6. 通过反射给属性赋值代码示例
  7. 限制textbox中的内容
  8. 排序算法之(7)——堆排序
  9. myeclipse上进行tomcat远程调试
  10. 数字带通滤波器c语言程序,C语言编写FIR数字低通滤波器
  11. VirtualBox虚拟机配置CentOS7网络图文详解教程
  12. 云小课 | 玩转HiLens Studio之快速订购HiLens Studio版本
  13. Linux操作系统内核启动参数详细解析[转]
  14. 科研英文论文翻译工具——Copytranslator
  15. Jason表情包在线生成,王境泽表情包,为所欲为表情包,窃格瓦拉表情包,在线生成
  16. linux u盘启动制作教程,cdlinux u盘启动制作教程
  17. mysql及格率70以上_数据库实例(统计最高分学生信息,不及格率等等)
  18. 4.0版本的wed.xml。 中间的部分是配置springMVC的。
  19. centos7 设置代理
  20. 优秀的论文答辩PPT模板值得被应用

热门文章

  1. java智能点餐系统研究内容_JAVA课程实践报告 基于web的点餐系统毕业设计
  2. 华为大数据研发第2轮面试
  3. form表单回车会自动提交
  4. 2018-2019-2 20189215 《网络攻防技术》第二周作业
  5. Python 百分号打头的行命令
  6. 一份超全面的机器学习公共数据集
  7. Axure RP 10怎么卸载干净,Axure RP 10怎么在注册表卸载清除
  8. PyTorch搭建LSTM实现时间序列预测(负荷预测)
  9. 斯坦福大学终身教授张首晟:区块链最核心的理念,必然是「 In Math We Trust 」
  10. jQuery 遍历 - closest() 方法 is()方法