其原理如下所示：

http://www.romancortes.com/blog/how-i-did-the-1kb-christmas-tree/

——————————————

还有另外一个叫Dustin DeWeese程序员，也做了一个贺卡给大家（请点下面的链接）。这个贺卡需要向下滚动网页才能看得出效果来，no Javascript。

http://www.hackerfoo.com.nyud.net/christmas/christmas.html

这种使用遮罩而产生的动画的东西确实很有意思：http://blogoscoped.com/files/stripes.html，有一个小工具可以用来创建这样的东西：http://dl.dropbox.com/u/15095913/Scanimation_Creation_v1.1.zip

呵呵。挺有意思的吧。

停止演示开始演示

下面是其源码：

[javascript]
f=Math; _=document.body; _.style.background="#000"; e=_.children[0]; e.width=w=innerWidth-10; e.height=h=innerHeight-25; g=e.getContext("2d"); t=w/h; with(g){scale(w*0.5/t,h*0.5); translate(1*t,1); globalCompositeOperation="lighter"; lw=45/h; $=p=m=q=r=d=0; g=u=-8; setInterval(function(){if(–d< 0){h=f.random; e=h()*18-9; r2=h()*18-9; u2=h()*18-9; d=70}function A(C,B){return C+(B-C)*0.04}p=A(p,e); m=A(m,r2); g=A(g,u2); q=A(q,p); r=A(r,m); u=A(u,g); a=f.atan2(q,-u*2); b=f.atan2(r*2,f.sqrt(u*u+q*q)); $+=0.05; clearRect(-t,-1,2*t,2); for(i=12; i; –i){v=0; for(j=45; j; ){c=f.cos; s=f.sin; j–; w=$-j*0.03-i*3; A=f.sqrt(j+0.2); n=c(w+s(w*0.31))*2+s(w*0.83)*3+w*0.02; o=s(w*0.7)-c(3+w*0.23)*3; x=c(n)*c(o)*A-q; y=s(n)*c(o)*A-r; z=s(o)*A-u; n=c(a); o=s(a); k=x*n+z*o; h=z*n-x*o; n=c(b); o=s(b); l=y*n+h*o; z=h*n-y*o; lineTo(k/z,l/z); lineWidth=lw*(2+!j)/z; h=f.round; w=h(60-j)*(1+!j+f.max(0,s($*6-j/8)-0.95)*70); strokeStyle="rgb("+h(w*(!j+s(i+$*0.15)+1))+","+h(!j+w*(s(i-1)+1))+","+h(!j+w*(s(i-1.3)+1))+")"; if(z> 0.1){v++&&stroke()}else{v=0}beginPath(); moveTo(k/z,l/z)}}},33)}
[/javascript]

下面，让我们再看一个只有1023字节的3D演示，同样，只有在Chrome中才能看到最佳效果。

停止演示开始演示

其源代码如下：

[javascript]
with(document.body.style){margin="0px";overflow="hidden";}var w=window.innerWidth;var h=window.innerHeight;var ca=document.getElementById("c");ca.width=w;ca.height=h;var c=ca.getContext("2d");m=Math;fs=m.sin;fc=m.cos;fm=m.max;setInterval(d,30);function p(x,y,z){return{x:x,y:y,z:z};}function s(a,z){r=w/10;R=w/3;b=-20*fc(a*5+t);return p(w/2+(R*fc(a)+r*fs(z+2*t))/z+fc(a)*b,h/2+(R*fs(a))/z+fs(a)*b);}function q(a,da,z,dz){var v=[s(a,z),s(a+da,z),s(a+da,z+dz),s(a,z+dz)];c.beginPath();c.moveTo(v[0].x,v[0].y);for(i in v)c.lineTo(v[i].x,v[i].y);c.fill();}var Z=-0.20;var t=0;function d(){t+=1/30.0;c.fillStyle="#000";c.fillRect(0,0,w,h);c.fillStyle="#f00";var n=30;var a=0;var da=2*Math.PI/n;var dz=0.25;for(var z=Z+8;z>Z;z-=dz){for(var i=0;i<n;i++){fog=1/(fm((z+0.7)-3,1));if(z<=2){fog=fm(0,z/2*z/2);}var k=(205*(fog*Math.abs(fs(i/n*2*3.14+t))))>>0;k*=(0.55+0.45*fc((i/n+0.25)*Math.PI*5));k=k>>0;c.fillStyle="rgb("+k+","+k+","+k+")";q(a,da,z,dz);if(i%3==0){c.fillStyle="#000";q(a,da/10,z,dz);}a+=da;}}Z-=0.05;if(Z<=dz)Z+=dz;}
[/javascript]

你可以前往一看更多的演示。