script / html css style

背景1

背景2

html特效参考，粒子漩涡

h5的canvas+js，在虚拟的三维坐标系定义点数组坐标（point.xyz），然后数学计算（Math），最后映射到canvas的二维坐标下。原生2dcanvas能做到这些，但如果更复杂的3d场景一般用webgl了。

<style>
<!--
/* h2 用户自定义样式，以class "lindows1" 标识 */
.lindows1:hover {
    color: rgb(255, 102, 0);
}

/* h2 用户自定义样式，以class "lindows1" 标识 */
.lindows1 {
    box-shadow: rgb(95, 90, 75) 0px 0px 0px 1px, rgba(10, 10, 0, 0.5) 1px 1px 6px 1px;
    color: rgb(255, 255, 255);
    font-family: 微软雅黑, 宋体, 黑体, Arial;
    font-size: 20px;
    font-weight: bold;
    height: 35px;
    line-height: 21px;  
    text-shadow: rgb(34, 34, 34) 2px 2px 3px;
    background: rgb(0, 142, 183);
    border-radius: 6px;
    padding: 8px 0px 5px 5px;
    margin: 18px 0px !important;
}

/* h3 用户自定义样式，以class "lindows2" 标识 */

.lindows2 {
    box-shadow: rgb(95, 90, 75) 0px 0px 0px 1px, rgba(10, 10, 0, 0.5) 1px 1px 6px 1px;
    color: rgb(255, 255, 255);
    font-family: 微软雅黑, 宋体, 黑体, Arial;
    font-size: 18px;
    font-weight: bold;
    height: 29px;
    line-height: 20px;
    text-shadow: rgb(34, 34, 34) 2px 2px 3px;
    background: rgb(57, 154, 178);
    border-radius: 6px;
    padding: 8px 0px 5px 5px;
    margin: 18px 0px !important;
}
-->

</style>

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>首页</title>
  6 
  7 <style>
  8 html,body{
  9     margin:0px;
 10     width:100%;
 11     height:100%;
 12     overflow:hidden;
 13   background:#000;
 14 }
 15 
 16 #canvas{
 17     position:absolute;
 18     width:100%;
 19     height:100%;
 20 }
 21 </style>
 22 
 23 </head>
 24 <body>
 25 
 26 <canvas id="canvas"></canvas>
 27 
 28 <script>
 29 function project3D(x,y,z,vars){
 30 
 31     var p,d;
 32     x-=vars.camX;
 33     y-=vars.camY-8;
 34     z-=vars.camZ;
 35     p=Math.atan2(x,z);
 36     d=Math.sqrt(x*x+z*z);
 37     x=Math.sin(p-vars.yaw)*d;
 38     z=Math.cos(p-vars.yaw)*d;
 39     p=Math.atan2(y,z);
 40     d=Math.sqrt(y*y+z*z);
 41     y=Math.sin(p-vars.pitch)*d;
 42     z=Math.cos(p-vars.pitch)*d;
 43     var rx1=-1000;
 44     var ry1=1;
 45     var rx2=1000;
 46     var ry2=1;
 47     var rx3=0;
 48     var ry3=0;
 49     var rx4=x;
 50     var ry4=z;
 51     var uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);
 52     var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;
 53     var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;
 54     if(!z)z=0.000000001;
 55     if(ua>0&&ua<1&&ub>0&&ub<1){
 56         return {
 57             x:vars.cx+(rx1+ua*(rx2-rx1))*vars.scale,
 58             y:vars.cy+y/z*vars.scale,
 59             d:(x*x+y*y+z*z)
 60         };
 61     }else{
 62         return { d:-1 };
 63     }
 64 }
 65 
 66 
 67 function elevation(x,y,z){
 68 
 69     var dist = Math.sqrt(x*x+y*y+z*z);
 70     if(dist && z/dist>=-1 && z/dist <=1) return Math.acos(z / dist);
 71     return 0.00000001;
 72 }
 73 
 74 
 75 function rgb(col){
 76 
 77     col += 0.000001;
 78     var r = parseInt((0.5+Math.sin(col)*0.5)*16);
 79     var g = parseInt((0.5+Math.cos(col)*0.5)*16);
 80     var b = parseInt((0.5-Math.sin(col)*0.5)*16);
 81     return "#"+r.toString(16)+g.toString(16)+b.toString(16);
 82 }
 83 
 84 
 85 function interpolateColors(RGB1,RGB2,degree){
 86     
 87     var w2=degree;
 88     var w1=1-w2;
 89     return [w1*RGB1[0]+w2*RGB2[0],w1*RGB1[1]+w2*RGB2[1],w1*RGB1[2]+w2*RGB2[2]];
 90 }
 91 
 92 
 93 function rgbArray(col){
 94 
 95     col += 0.000001;
 96     var r = parseInt((0.5+Math.sin(col)*0.5)*256);
 97     var g = parseInt((0.5+Math.cos(col)*0.5)*256);
 98     var b = parseInt((0.5-Math.sin(col)*0.5)*256);
 99     return [r, g, b];
100 }
101 
102 
103 function colorString(arr){
104 
105     var r = parseInt(arr[0]);
106     var g = parseInt(arr[1]);
107     var b = parseInt(arr[2]);
108     return "#"+("0" + r.toString(16) ).slice (-2)+("0" + g.toString(16) ).slice (-2)+("0" + b.toString(16) ).slice (-2);
109 }
110 
111 
112 function process(vars){
113 
114 
115     if(vars.points.length<vars.initParticles) for(var i=0;i<5;++i) spawnParticle(vars);
116     var p,d,t;
117     
118     p = Math.atan2(vars.camX, vars.camZ);
119     d = Math.sqrt(vars.camX * vars.camX + vars.camZ * vars.camZ);
120     d -= Math.sin(vars.frameNo / 80) / 25;
121     t = Math.cos(vars.frameNo / 300) / 165;
122     vars.camX = Math.sin(p + t) * d;
123     vars.camZ = Math.cos(p + t) * d;
124     vars.camY = -Math.sin(vars.frameNo / 220) * 15;
125     vars.yaw = Math.PI + p + t;
126     vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
127     
128     var t;
129     for(var i=0;i<vars.points.length;++i){
130         
131         x=vars.points[i].x;
132         y=vars.points[i].y;
133         z=vars.points[i].z;
134         d=Math.sqrt(x*x+z*z)/1.0075;
135         t=.1/(1+d*d/5);
136         p=Math.atan2(x,z)+t;
137         vars.points[i].x=Math.sin(p)*d;
138         vars.points[i].z=Math.cos(p)*d;
139         vars.points[i].y+=vars.points[i].vy*t*((Math.sqrt(vars.distributionRadius)-d)*2);
140         if(vars.points[i].y>vars.vortexHeight/2 || d<.25){
141             vars.points.splice(i,1);
142             spawnParticle(vars);
143         }
144     }
145 }
146 
147 function drawFloor(vars){
148     
149     var x,y,z,d,point,a;
150     for (var i = -25; i <= 25; i += 1) {
151         for (var j = -25; j <= 25; j += 1) {
152             x = i*2;
153             z = j*2;
154             y = vars.floor;
155             d = Math.sqrt(x * x + z * z);
156             point = project3D(x, y-d*d/85, z, vars);
157             if (point.d != -1) {
158                 size = 1 + 15000 / (1 + point.d);
159                 a = 0.15 - Math.pow(d / 50, 4) * 0.15;
160                 if (a > 0) {
161                     vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(d/26-vars.frameNo/40),[0,128,32],.5+Math.sin(d/6-vars.frameNo/8)/2));
162                     vars.ctx.globalAlpha = a;
163                     vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
164                 }
165             }
166         }
167     }        
168     vars.ctx.fillStyle = "#82f";
169     for (var i = -25; i <= 25; i += 1) {
170         for (var j = -25; j <= 25; j += 1) {
171             x = i*2;
172             z = j*2;
173             y = -vars.floor;
174             d = Math.sqrt(x * x + z * z);
175             point = project3D(x, y+d*d/85, z, vars);
176             if (point.d != -1) {
177                 size = 1 + 15000 / (1 + point.d);
178                 a = 0.15 - Math.pow(d / 50, 4) * 0.15;
179                 if (a > 0) {
180                     vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(-d/26-vars.frameNo/40),[32,0,128],.5+Math.sin(-d/6-vars.frameNo/8)/2));
181                     vars.ctx.globalAlpha = a;
182                     vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
183                 }
184             }
185         }
186     }        
187 }
188 
189 function sortFunction(a,b){
190     return b.dist-a.dist;
191 }
192 
193 function draw(vars){
194 
195     vars.ctx.globalAlpha=.15;
196     vars.ctx.fillStyle="#000";
197     vars.ctx.fillRect(0, 0, canvas.width, canvas.height);
198     
199     drawFloor(vars);
200     
201     var point,x,y,z,a;
202     for(var i=0;i<vars.points.length;++i){
203         x=vars.points[i].x;
204         y=vars.points[i].y;
205         z=vars.points[i].z;
206         point=project3D(x,y,z,vars);
207         if(point.d != -1){
208             vars.points[i].dist=point.d;
209             size=1+vars.points[i].radius/(1+point.d);
210             d=Math.abs(vars.points[i].y);
211             a = .8 - Math.pow(d / (vars.vortexHeight/2), 1000) * .8;
212             vars.ctx.globalAlpha=a>=0&&a<=1?a:0;
213             vars.ctx.fillStyle=rgb(vars.points[i].color);
214             if(point.x>-1&&point.x<vars.canvas.width&&point.y>-1&&point.y<vars.canvas.height)vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
215         }
216     }
217     vars.points.sort(sortFunction);
218 }
219 
220 
221 function spawnParticle(vars){
222 
223     var p,ls;
224     pt={};
225     p=Math.PI*2*Math.random();
226     ls=Math.sqrt(Math.random()*vars.distributionRadius);
227     pt.x=Math.sin(p)*ls;
228     pt.y=-vars.vortexHeight/2;
229     pt.vy=vars.initV/20+Math.random()*vars.initV;
230     pt.z=Math.cos(p)*ls;
231     pt.radius=200+800*Math.random();
232     pt.color=pt.radius/1000+vars.frameNo/250;
233     vars.points.push(pt);    
234 }
235 
236 function frame(vars) {
237 
238     if(vars === undefined){
239         var vars={};
240         vars.canvas = document.querySelector("canvas");
241         vars.ctx = vars.canvas.getContext("2d");
242         vars.canvas.width = document.body.clientWidth;
243         vars.canvas.height = document.body.clientHeight;
244         window.addEventListener("resize", function(){
245             vars.canvas.width = document.body.clientWidth;
246             vars.canvas.height = document.body.clientHeight;
247             vars.cx=vars.canvas.width/2;
248             vars.cy=vars.canvas.height/2;
249         }, true);
250         vars.frameNo=0;
251 
252         vars.camX = 0;
253         vars.camY = 0;
254         vars.camZ = -14;
255         vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
256         vars.yaw = 0;
257         vars.cx=vars.canvas.width/2;
258         vars.cy=vars.canvas.height/2;
259         vars.bounding=10;
260         vars.scale=500;
261         vars.floor=26.5;
262 
263         vars.points=[];
264         vars.initParticles=700;
265         vars.initV=.01;
266         vars.distributionRadius=800;
267         vars.vortexHeight=25;
268     }
269 
270     vars.frameNo++;
271     requestAnimationFrame(function() {
272         frame(vars);
273     });
274 
275     process(vars);
276     draw(vars);
277 }
278 frame();
279 </script>
280 
281 <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
282 <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
283 <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
284 </div>
285 </body>
286 </html>