阅读更多

4顶
0踩

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

下面就来看看一些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

五、自己动手

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

  • 大小: 14.5 KB
  • 大小: 46.7 KB
  • 大小: 24.1 KB
  • 大小: 5.5 KB
  • 大小: 25.6 KB
  • 大小: 19.9 KB
  • 大小: 11.2 KB
  • 大小: 29.8 KB
  • 大小: 16 KB
  • 大小: 27.9 KB
  • 大小: 23.4 KB
  • 大小: 20.2 KB
4
0
评论 共 4 条 请登录后发表评论
4 楼 814687491 2014-01-16 10:49
确实不错,可惜今天才看到!
3 楼 chj738871937 2013-12-27 13:36
雪花好看。
2 楼 sbpcx 2013-12-25 11:31
thx for share
1 楼 ini 2013-12-24 14:34
http://ini.iteye.com/blog/1994837
还有这个web前端的圣诞节祝福!

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • readbitmap:R包,用于识别和读取位图图像

    读位图 介绍 readbitmap是一个简单的R包,提供了read.bitmap函数来读取标准位图格式的图像,并通过其图像标题(或 )来识别它们,而不是依赖于文件扩展名。 有关在线文档,请参见 。 目前支持BMP,JPEG,PNG和TIFF图像 ...通过 , , 和包。 包括通过魔术值识别图像的功能(也可以使用标准文件扩展名) 包括简单的测试套件 安装 定期CRAN安装 install.packages( ' readbitmap ' ) 最新版本 if ( ! require( " devtools " )) install.packages( " devtools " ) devtools :: install_github( ' jefferis/readbitmap ' ) 依存关系 , 和tiff R软件包取决于系统libjpeg,libpng和libtiff库。

  • 一个BMP文件读写的程序

    bmpTest.h   : 介绍BMP文件的格式及结构定义bmpTest.cpp : 24bitBMP颜色数据到256色位图颜色数据的转换函数实现,具体算法可参考以 前的一个帖子bmpTransfer.cpp  :  读入一个24bitBMP文件,转换成一个256色BMP文件的程序编译完成后得到的程序,如bmpTransfer.exe执行  bmpTransfer file1 fi

  • Java实现图片格式转换(通过ImageIO)

    文章目录粗略介绍ImageIO一、遍历文件夹二、转换图片格式总结 粗略介绍ImageIO ImageIO是javax.imageio包下的一个类,用于实现Java中关于图片输入输出的一种类,这个类中所有方法均为静态方法,因此调用时直接使用ImageIO.methodName() 即可. 相对于使用FileInputStream这类的节点流,使用ImageIO能真真正正的改变图片的格式而不只是修改图片的后缀名称. 当初看到了ImageIO能真正改变图片格式,因此想着要是以后需要改变图片的格式就不用专门去找某个

  • Java——位图

    位图的概念和应用,MyBitSet的创建,set,reset,get方法的实现,使用位图进行排序的代码,java.utile包下的BitSet的使用方法说明,附带详细代码

  • Java实现24位真彩转换为8位灰度图片

    Windows下的位图文件即我们通常所熟悉的BMP图片,其存储结构的格式可以在WINGDI.h文件中找到定义。BMP文件大体上分为四个部分: 1.      位图文件头(BITMAPFILEHEADER) 2.      位图信息头(BITMAPINFOHEADER) 3.      调色板(PALETTE) 4.      位图数据(IMAGEDATA) 根据颜色深度的不同,图像上的一

  • Java二进制文件读写与bmp位图格式学习

    最近在做实训,说是要用java读取位图进行图像处理,遂进行学习。 bmp位图参考资料: 文档1 文档2 位图制作 首先使用AdobePhotoshop来制作一个3*2的位图test.bmp java提取 使用java程序用二进制读写的方式将其提取出来。 import java.io.FileInputStream; public class BmpTest { ...

  • Java代码读取图片的两种方式

    Java代码读取图片的两种方式,直接上代码:方式一: 适用场景: 图片size小方式二: 适用场景: 图片size大

  • 用java实现print screen,读取位图文件,将位图文件转化位jpeg格式并保存成文件输出!

    package screensaver;import java.awt.*;import java.awt.image.BufferedImage;import java.io.*;import java.util.*;import com.sun.image.codec.jpeg.*;import java.awt.Image;import java.awt.Toolkit;import jav

  • windows程序设计学习笔记-设备相关位图

    位图和位块传输1.保存方式 位图保存方式举例: 一个三行三列位图,行0-2,列0-2. 保存时:00-02 10-12 20-22. 按行保存,从上往下。每行从左往右。2.API 2.1. BOOL BitBlt( In HDC hdcDest, In int nXDest, In int nYDest, In int nWidth, In

  • 快速求N!

    求n的阶乘

  • java 左移_彻底弄懂Java的移位操作符

    前言对于移位操作符,很多人既感到熟悉,又感到陌生。熟悉是因为移位操作符是最基本的操作符之一,几乎每种编程语言都包含这一操作符;陌生是因为除非是追求极致性能等罕见场景,否则也很难用得上它。打开JDK源码,你会发现移位操作符的身影极为常见,弄清楚它的用法,对阅读源码很有帮助。移位操作是把数据看作是二进制数,然后将其向左或向右移动若干位的运算。在Java编程语言中,移位操作符包含三种,分别是 &lt;&...

  • 实现1位,4位,8位,24位BMP位图的互相转换的方法,32位转24位

    from: http://blog.sina.com.cn/s/blog_61e61df60100igzb.html BOOL SaveTrueBmp(HBITMAP hBitmap, CString FileName) { //设备描述表 HDC hDC; //真彩色位图中每象素所占字节数为24 WORD wBitCount=24; //定义调色板大小, 位图中像素字节大小 ,位

  • 8位位图和24位位图的相互转换

    8位位图转换为24位位图其实,只要从8位位图中取得一个像素的灰度值,然后去填充24位位图的三个字节就可以了,很明显,这样得到的24位位图是灰度的,就是RGB各分量是一样的值。主要的转换程序/*******************************************************************************函数功能:将8位位图转换为24位位图*函

  • java png 位深转换_java – 如何将24位PNG保存/转换为8位PNG?

    好的,所以我有一个可以产生可接受结果的工作解决方案 – 最终文件比我原来的手动过程略小,但在视觉上无法区分.解决方案并不像我想的那样跨平台(需要为OptiPNG寻找/构建Linux二进制文件),但它仍然是一个足够好的解决方案.正如Leigh在问题评论中建议的那样,我使用的是Quantizer来减少颜色,然后使用MapColorsFilter来修复量化器打破透明度的事实,然后最后使用OptiPNG将...

  • bitcount函数统计其整数参数的值为1的二进制位的个数

    /* bitcount: count 1 bits in x */ int bitcount(unsigned x) { int b; for (b = 0; x != 0; x >>= 1) if (x & 01) b++; return b; } 然后升级版本: 根据:表达式 x & =(x - 1) 可以删除x

  • Integer.bitCount() 函数理解(尽量通俗易懂)

    bitCount(int i) 函数,实现统计一个数的二进制位有多少个 1 。如 5 的二进制为 101,返回 2。 Jdk1.8 源码如下。初看一脸懵逼,再看还是一脸懵逼,分析 2 小时后,轰然开朗,遂有此文。 public static int bitCount(int i) { // HD, Figure 5-2 i = i - ((i &gt;&gt;&gt; 1) &amp; 0x55555555); i = (i &amp; 0x33333333) + ((i &gt;&g

  • Redis中setbit和bitcount的注意细节

    setbit 可以理解是一个位数组,至于这个数组有多大,redis中bit映射被限制在512MB之内,所以最大是2^32。 也就是在这样一个位数组上存0或者是1 ,可以结合bloomFilter的应用场景理解位数组的用法,将字符串使用一种合适哈希函数映射到不同的bit位上(2^32足够的大,可以满足需求)

  • Java Windows Bitmap decoder and encoder

    Java 编写的Windows Bitmap编码和解码程序。编码程序没有压缩,支持24位和256色。

  • 如何在 Java 应用程序中读取8 位和24 位位图文件

      Java 的当前发行版并不正式支持在 Java 应用程序中读取 Microsoft Windows 位图文件。但别担心,我们有办法解决这个问题!这篇技巧将说明如何完成这一任务 -- 我们首先说明读取 Microsoft Windows 文件格式的基本步骤。   Windows DIB(设备独立的位图)文件格式比较简单。与纯位图格式不同,DIB 格式保留着用于在内存中存储图像的明确信息。问题是图

Global site tag (gtag.js) - Google Analytics