说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

圣诞节快乐:来自程序员们的问候

HTML文档下载 WORD文档下载 PDF文档下载
转眼间,一年一度的圣诞节又来临了。在这个越来越受到国人重视的节日中,每个人有每个人的浪漫方式,当然程序员们也不例外。来看看程序员们是如何为这个节日增添不一样的气氛的。

转眼间,一年一度的圣诞节又来临了。在这个越来越受到国人重视的节日中,每个人有每个人的浪漫方式,当然程序员们也不例外。

下面就来看看一些IT企业和程序员们是如何为这个节日增添不一样的气氛的。

一、来自IT巨头的问候

1.  Google的彩蛋

每到节日,Google就会在其搜索引擎中加入一些彩蛋,在用户搜索特定关键词的时候出现特殊的页面效果。临近圣诞,当用户在Google中输入“圣诞节”时,会页面上端出现飘雪的场景和圣诞老人驾驶鹿车飞驰的画面。


2.  百度的小游戏

当用户在百度中搜索“圣诞节”时,就会出现一个小游戏。该游戏基于HTML5制作。


详细信息可查看这个页面的源码。http://www.baidu.com/ur/show/uhchristmas?from=christmasresult

3.  微软追踪圣诞老人网站

微软今年推出了一个追踪圣诞老人的网站,该主题网站基于Html5和WebGL技术,首页有圣诞节的倒计时,此外还有许多好玩的在线游戏,最主要的是该网站在触摸设备上也有很好的体验。


网站地址:http://www.noradsanta.org/

二、来自初级程序员的问候

如果你刚开始学习HTML5,你可以制作一些简单的效果来庆祝圣诞节。

1.  使用canvas功能绘制的简单圣诞树

在绘图板中绘制下面这个图形并不算什么难事,但是使用代码来生成这个圣诞树却需要一定的HTML5基础。

下面这个图形使用HTML5中的<canvas>标签来绘制,如果你熟悉HTML5,这对你来说轻而易举。


源码:http://www.spjeff.com/2013/12/05/christmas-tree-html5-js-and-css3/

2. 雪花效果

jQuery的出现,让各种动画效果变得更加容易。比如,你可以通过jQuery、jQuery.snow.js插件以及少量的代码,就可以让页面中飘舞这雪花。


源码:https://github.com/tzach/merry-christmas

3.  一个非常漂亮的圣诞贺卡

该贺卡通过Construct2制作,然后通过c2runtime.js使得该贺卡可以直接在网页中运行。Construct2是一款用来制作HTML5应用的软件,拥有一个清晰直观、支持“拖拽”操作的开发环境,即使你没有任何编程经验也能开发自己的HTML5应用。


演示:http://3.s3.envato.com/files/72733144/blue/index.html

三、来自中级程序员的问候

随着编程技能的进一步掌握,你可以使用稍复杂的技术来实现一些更绚丽的效果。

1. CSS3实现圣诞树动画

该动画主要使用CSS3实现各种转场效果,并使用了HTML5中的<audio>标签来播放音频文件。同时还使用了StyleFix和PrefixFree脚本,这样在编写代码时可以不用为特定的CSS3属性添加浏览器前缀,也可以在其他浏览器中播放。


演示:http://christmasexperiments.com/2013/11/experiment.html

源码:https://github.com/podrivo/christmas

2. HTML表单元素制作的圣诞树

下面这个圣诞树没有采用松树的形式,而是采用了HTML表单元素来制作,比如输入框、单选钮,进度条,按钮等。


演示:http://hakim.se/experiments/css/domtree/

源码:https://github.com/hakimel/DOM-Tree

3. 3D雪花效果

该效果使用HTML5的<canvas>标签和three.js实现了3D的雪花飞舞效果。你可以拖动鼠标进行旋转。


演示:http://seb.ly/demos/JSSnowNew/snow3d.html

源码:https://github.com/sebleedelisle/live-coding-presentations/tree/master/2011/JSSnow

四、来自高级程序员的问候

1.  代码不到1KB的3D圣诞树

下面这个3D圣诞树只用1021字节的JavaScript代码编写而成,逼真的3D及旋转效果,将JavaScript功能发挥到了极致。


演示:http://js1k.com/2010-xmas/demo/856

源码如下:

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++<W;)if(D<1)beginPath(strokeStyle=V+R+','+(R+B*L>>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,j<H;)J[O++]=[x+=T(R)*P+Q()*6-3,y+=Q()*U-8,z+=T(R-11)*P+Q()*6-3,j/H*20+((j+=U)>H&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)

2.  代码不到1KB的雪景效果

下面这个场景也是由不到1KB的JavaScript代码生成。


演示:http://js1k.com/2010-xmas/demo/855

源码如下:

for(p in a)a[p[0]+(p[6]||'')]=a[p];var M=Math,C=M.cos,S=M.sin,R=M.random,T=0,x=[],y=[],W=innerWidth,H=innerHeight,L=2047,Z=100,V=20,N=511,M=1337;c.width=W,b.style.overflow='hidden',b.style.margin='0px',c.height=H;g='globalAlpha';h='fillStyle';for(i=N;i--;){x[i]=L*R();y[i]=L*R()}setInterval(function(){T+=1/V;a[g]=0.2;function m(c){a[h]=c}m('#002');a.fc(0,0,W,H);a[g]=1;u=1;m('#ffc');for(i=0;i<N/3;++i){d=u=(u*M+1)&L;u=(u*M+1)&L;if(C(T*Z+i)<0.5){a.fx("\u2605",d,u)}}a.ba();a.arc(2*W/3,H/3,40,0,6.3,1);a.ca();a.fill();m('#cfc');B=H-V;for(j=0;j<5;++j){s=90-j*V;a.font=s+"px serif";F=1;for(i=0;i<W;i+=(F=(F*M)%Z)){a.fx("\u25B2",i-s/2,B+S(i)*30);}B-=s/2;}m('#eef');for(i=N;i--;){e=x[i];f=y[i];a.fx("\u06DE",e,f);y[i]=(f+1)%L;x[i]=(e+C(i+T)/3)%L}for(i=N*3;i--;){a.fc((x[i&N]+i)&L,(y[i&N]+i)&L,1,1)}for(i=W;i--;){d =Z+V*S(i/Z)+S(i/10);a.fc(i,H-d,1,d)}},50);

此外还有很多1KB代码编写的圣诞效果,大家可以访问js1k圣诞主页面

3.  游戏般的3D雪地场景

整个Demo是基于一个无限开阔的雪地场景的,里面有圣诞树和雪人,可以像玩FPS游戏一样在里面走动,WASD操控移动,按住鼠标左键拖拽控制方向,整个Demo是使用Oak3D框架制作的。


演示地址:http://christmas.oak3d.com/Scene/MerryChristmas.html

五、自己动手

看完上面的这些效果,你是不是也想自己动手做一个属于自己的圣诞礼物呢。下面我们为你准备了一些设计素材和教程。

  • 80套圣诞节主题设计素材
  • 16个令人印象深刻的HTML5/CSS3/Javascript实验
  • 49个免费的圣诞主题矢量图像
  • 40个最好的圣诞主题资源
  • 其他圣诞节设计资源
  • 来自w3school的HTML5教程 

【CTO论道】瑞智和康CEO陶建辉:软硬结合是消费电子新潮流 10大高效率原型设计工具 JIRA与敏捷:李小龙教给我们的敏捷开发之道 百度开放云:Light Up The World,与开发者共享云未来 有胆你就来!11个在线编码大赛 CTO如何避免决策失控:第一步-定义角色 后机械硬盘时代,那些引领风骚的闪存初创公司 致远文杰:传统企业如何实现移动化转型? 记华为HCC2013 Day2:SDN开放编程系统OPS打造生态圈 HCC2013:华为FusionCube融合至简,性能至优 已确认Stephen Elop候选微软下任CEO 英语对于软件开发者来说到底有多重要? SDCC 2013中国软件开发者大会成功落幕 新浪微博宋琦:PHP在微博优化中的“大显身手” 8月份浏览器份额:IE浏览器PC端出现反弹 移动端跌出前五 如何让Ruby项目速度提升10倍 跨平台进行到底:Facebook发布Unity SDK 云薪资管理初创公司ZenPayroll:年处理薪资超1亿美元,获多位知名CEO力挺 Twitter开源Summingbird:近原生编码下整合批处理与流处理 亚马逊推Matchbook 欲将顽固纸质书读者拉向电子书 Broadcom为可穿戴设备推新开发平台WICED 再战江湖 New Kodak还牛不牛? 郭理靖:公、私有云架构异同点与难点 美化代码的15个代码语法高亮工具 你所不知道的虚拟化和云计算 [开源推荐]Effeckt.css项目:CSS交互动画应用集锦 针对Google Glass应用的四大UX设计原则及典型应用 Google收了摩托罗拉,微软收了诺记,黑莓又将花落谁家? 十亿月PV网站秘诀:Reddit自失败中总结的25条经验 粉碎5个NoSQL流言:各司其职,NoSQL的出现比关系型更早 豌豆荚发力移动游戏平台,推出SDK 2.0 有人愿意收一个一般菜,但又不是很菜的人为徒吗?? 求救VC中的关于串口通信的问题,想请请看,急急急急急急急急急急急 ZDataGrid For VB & VB.Net 如何将界面做成如xp的样子 请教关于游戏平台的问题。。。 今天不是鬼节啊?怎么这么多早就作古的人都出来了? 超级菜的问题(关于WINNT安装)想要分的快进 怎么写dll文件 怎样插入当前时间和日期到Access数据库中 下面为什么出错了? 有人愿意收一个一般菜,但又不是很菜的人为徒吗??? TADOTable如何实现记录定位?——求救! 谁知道怎么让WEBLOGIC中消息驱动BEAN的例子MESSAGE跑起来?.. 請問各位為何javabean在suse linux的調用問題 请问如何在weblogic中设置一个jms topic?. 请教关于游戏平台的问题!! 使用QuickVxD不能生成 .h ,.cpp .mak文件,那里不对? 请问:框架(Frame)为什么不能动态生成两次 ????????????? 在win2k下有人知道ActiveReports报表怎么自定义打印纸张大小 大家讨论一下运算符重载的问题!!!! 位操作问题?欢迎各位朋友讨论! data控件能连接sqlserver数据源么? 有没有办法使重复的值只显示一个,空值不显示也不要占位置?(急呀!!!) 用TURBO C2.0能不能写32位的软件? 如何设置WN98中的硬盘驱动器盘符 SOS pekie 请教啦! 投影仪投出的图像中间部分呈粉红色,是不是投影仪坏了? 在MYSQL中我想修改root密码,可是总报错说user表是read only,如何把只读的属性去掉? 关于开发网络麻将游戏需求的问题。。谢谢。 关于jsp或applet调用本地DLL的问题 在BCB中如何添加自己的类? 关于APPLET从服务器下载图片的问题! 建议下一次改版的时候考虑一下这个问题:CSDN 的很多页面好像用NetScape不能浏览? 我不用IE很多年了, 因为太容易死机 有没有做股票的朋友? 急!!!50分求购一个在程序中实现按下按钮功能的小程序,多谢了 在图象上的汉字显示问题 请问谁知道把AVI文件转换成BMP位图数据的算法 圣诞快乐 用什么工具可以从exe文件中把资源文件,如图像、图标提取出来? Word与Delphi的结合!高手请进! 贴子为什么掉到第二页上再UP就回不到第一页去了?见龟!——千山一刀 ^^^^^^^^^如何配置sybase的clinet端????^^^^^^^^^^^^^^^^^^^^ 进程与线程 在win2000系统下,构建asp+sql的web站点,但在web页中无法显示出小数点前的零? 如何配置sybase的clinet端? 关于webbrowser。 TO:riolee(随风) 关于directshow的 开始菜单中的运行找不到 请问各位谁能提供 CString 里有一个operator LPCTSTR,难道这个LPCTSTR也可以被重载,它不是操作符啊,也不在可被重载的范围中啊? 请问到何处用蚂蚁下载photoshop6.01软件 2012年第一季度有几天? 求使(a²+ab)/(b-ab)除以(ab/2)*(b²-ab)/(a²-ab)具有正整数值的所有a的整数值 已知a(a-1)=a²-b-2求1/2(a²+b²)-ab 2012年第一季度多少天? a²+b²-2a-6b+10=0,则a²- b²除以ab=— 甲、乙、丙、丁四人向灾区捐款,甲的捐款数是其他三人捐款总数的三分之一,乙的捐款数是其他三人捐款总数的五分之一,丙的捐款数是其他三人捐款总数的六分之一,丁捐款148元.甲捐款多少 2012年的第一季度是多少天 已知∠1和2∠互补,∠3和∠4互余,求证;∠3=二分之一(∠1-∠2) 小明步行45分钟可长A地到B地,小华乘车15分钟可从B地到A地.当他们相遇时,小明已经走了30分钟,小华接小明乘车返回B地,还需要多少分钟?甲、乙两人同时从A地到B地,甲一半时间跑步,一半时间走 0.5+4/5*0.5+1/2等于多少, 已知角a和角b互为补角,角3与角2互余 ,请说明角3=1/2(角1--角2)已知角1和角2互为补角,角3与角2互余 请说明角3=1/2(角1--角2) 2-x分之x-x²-4x+4分之4-x² 0.5年等于多久 0.1年等于多久 已知角1和角2互补,角2和角3互余,用角1、角2来表示角3 x除以一个数,等于15,余3,x最大填几 (a+b分之2ab²)³除以(a²-b²分之ab³)乘以{2(a-b)分之1}² 先化简在求值(a+b/2ab²)²除以(a²-b²/ab²)²除以[1/2(a-b)]²其中a=-1/2,b=2/3(要过程啊)2(a-b)是连到一起的不要看错了赶紧啊急急急急急精英们都到那里了啊(求标准答案100分啊 (x²-2x)除以2x分之x-2 (-1\2 ab)³(2ab³)² 23×(-5)-(-3)÷128分之3 (2分之1-2x-4分之1)除以2x²-8分之x-3 a=2-√2,b=2+√2,求(a³b+a²b²/a²+2ab+b²)÷(a²-ab/a²-b²) 化简a²-b²/a²﹢ab 已知:a+b=1,a²+b²=2,求:a的11次方+b的11次方=?用构造法,要不然会死人的,重赏要用一个公式,目前答的都不算对,好像用的是(x-a)(x-b)的公式,要升次,不能把a,b数值求出来 126^10的千位数,百位数,十位数和个位数的和怎麼快速运算啊时间限制10秒之内.能解释最好. 2008年第29届奥运会在北京举行,这一年的第一季度有几天? 化简:(√a²+a√b)/(ab-b²)-(a+√ab+b)/(a√a-b√b) 已知a=-3,B=2,求代数式(1/a+1/b)除以a²+2ab+b²/a+b的值 2008年第29届奥运会在北京举行,这一年的第一季度有( )天. (a²-b²)/(ab)-(ab-b²)/(ab-a²)可化简为已知x²+5xy+y²=0,则(y)/(x)+(x)/(y)的值为 先化解代数式(a²-b²分之a²+b²-a+b分之a-b)÷(a-b)(a+b)²分之2ab然后请你去一组a,b的值代入求值.思考:所取a,b的值要满足什么条件? (a²b)²除以(2ab)²×(3a)²=?(a²b)的平方除以(2ab)²×(3a)²=? 化简ab分之a²-b²-ab-a²分之ab-b²= 温哥华是什么国2011年第一季度有几天 如果a²=3a,那么a=3,这句话对么? 怎么作一个角是已知角的二分之一? 2011年第一周是哪几天? a²-3a-1=3 求a求详细过程 (ab分之a²+b²)+【2-(ab分之a²-b²)】 2011年的第一季度有多少天,这一年共有多少天 386000加上百分17的税是多少 若b分之a=2,则(a²+b²)分之(a²-ab+b²)的值为若a分之1-b分之1=a+b分之1,则a分之b-b分之a-3的值是 还有2011年的第一季度的收益 已知a+b=2,则(2分之1)a²+(2分之1)b²+ab的值是—————— ab分之(a-b)²-ab分之a²-b² 先化简在求值(a-b分之a - a²-2ab+b²分之a²)除以(a+b分之a - a²-b²分之下面还有先化简,在求值(a-b分之a - a²-2ab+b²分之a²)除以(a+b分之a - a²-b²分之a²)+1求a=3分 已知a+b=-2,ab=-2分之5,求a(a+b)(a-b)-a(a+b)²的值原式=a(a²-b²﹚-a﹙a+b﹚²=a﹙a²-b²﹚-a﹙a²+2ab+b²﹚=a[﹙a²-b²﹚-﹙a²+2ab+b²﹚]=a﹙-2b²-2ab﹚=-2ab² ab-b²分之a+b÷[-(a-b)²分之ab+b²] 0+(-3.71)+(+1.71)+(-5) 已知a-b=-10,求a²+b²的和除以2,再减ab的值 如果b分之a=2求a²+b²分之a²-ab+b²的值 数学达人来回答啊(a+b分之2ab²)³除以(a²-b²分之ab³)乘以{2(a-b)分之1}² 平年一年有( ) 天,闰年一年有( ) 天.1900年2月的下旬有( ) 天. 18/49、41/111、47/129、51/139 四个分数比大小.过程在哪里.顺便:1110/2221和3332/6665 2012年的第一季度有几天 已知:如图角1等於角2 求证:角3等於二分之一(角acb减角b) 比较分数17/49,41/111,47/129,139/51. 2012年第一季度有几天,全年有几天? 已知角一小于角二,那么角二与二分之一(角一减角二)之间的关系是? 18/49,41/111,47/1291/139
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn