script / html css style
1
背景1
2
背景2
3
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>
end
