整合營銷服務(wù)商
          
				
          電腦端+手機端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          程序猿必備的8款web前端SVG動畫特效
          
        
           
          
	
	
          
		
                        
          、SVG圖片波浪效果渲染動畫
          今天我們要為大家分享一款很酷的SVG圖片動畫，主要是圖片上會出現(xiàn)波浪的渲染動畫。實現(xiàn)原理是在圖片上方利用SVG路徑繪制了一層蒙板，然后蒙版進行一定的隨機扭曲就形成了圖片上方波浪翻滾的動畫特效，而且也十分逼真。
          2、基于HTML5和SVG的手機菜單動畫
          之前我們分享過很多手機端的jQuery菜單和CSS3菜單，也有很多是PC端的菜單，都非常不錯。今天要接著分享一款基于HTML5和SVG的手機端菜單動畫，這款菜單有2種主題和動畫風(fēng)格，分別是側(cè)邊飛入和底部飛入動畫，同時點擊菜單展開按鈕又會出現(xiàn)旋轉(zhuǎn)的動畫特效。
          3、純CSS3藍色蝴蝶動畫
          之前我們分享過幾個漂亮的HTML5蝴蝶飛舞動畫，比如超炫酷HTML5 Canvas蝴蝶飛舞動畫和HTML5 SVG 3D蝴蝶飛舞動畫都非常炫酷。今天要分享的這款蝴蝶動畫是基于純CSS3的，雖然沒有前面蝴蝶動畫那么絢麗，但是藍色的蝴蝶翅膀扇動起來也是別有一番風(fēng)味的。
          4、SVG邊框可連續(xù)變化的鼠標(biāo)滑過動畫按鈕
          今天我們要給大家分享一款基于SVG的鼠標(biāo)滑過動畫按鈕，這款按鈕的鼠標(biāo)滑過動畫呈現(xiàn)的是按鈕邊框線條可連續(xù)變化，非常絢麗。像這樣的鼠標(biāo)滑過按鈕在之前我們也分享過很多，大家可以回顧一下純CSS3鼠標(biāo)滑過按鈕動畫 多種動畫風(fēng)格和jQuery/CSS3多種鼠標(biāo)滑過動畫按鈕集合，也許其中有些按鈕效果可以用得上。
          5、超炫酷HTML5 Canvas蝴蝶飛舞動畫
          還記得很早以前我們?yōu)榇蠹曳窒磉^一款非常炫酷的HTML5蝴蝶3D動畫，它是基于HTML5和SVG實現(xiàn)的。這次我們要再一次為大家介紹另外一款同樣也很酷的HTML5 Canvas蝴蝶飛舞動畫，蝴蝶是在Canvas上繪制而成，利用HTML5的動畫特性實現(xiàn)蝴蝶的飛舞，大家可以學(xué)習(xí)一下。
          6、HTML5 SVG 繪制唐老鴨卡通形象
          利用CSS3可以繪制很多人物和動物形象，比如之前介紹的純CSS3繪制可愛小男孩動畫和純CSS3繪制可愛的蚱蜢，可見CSS3十分強大。這次我們要介紹的是利用HTML5和SVG來繪制的唐老鴨卡通形象，SVG的path特性非常靈活，可以讓你繪制任何路徑。
          7、CSS3/SVG實現(xiàn)鼠標(biāo)滑過3D展開文字描述圖層
          現(xiàn)在很多HTML5動畫都會結(jié)合SVG來制作，因為SVG可以更方面地描述界面圖形元素。今天要介紹的一款動畫就是利用CSS3結(jié)合SVG實現(xiàn)的，它可以讓我們在鼠標(biāo)滑過圖片時，通過3D立體的視覺效果展示文字描述圖層，動畫效果非常絢麗。
          8、CSS3/SVG沙漏式Loading加載動畫
          之前我們也已經(jīng)分享過很多Loading動畫和進度條動畫了，很多都是比較實用的應(yīng)用。今天我們要再來分享一款基于CSS3和SVG的沙漏式Loading加載動畫，盡管實現(xiàn)起來也比較簡單，但是模擬效果相當(dāng)逼真，適合來做整個頁面加載時的等待動畫。
          本文固定鏈接: http://www.i7758.com/archives/2870.html
          多特效代碼請?zhí)砑親TML5前端交流群581549454
          廢話不多說，上代碼！
          網(wǎng)站格式代碼
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <style type="text/css">
          * { margin:0; padding:0; }
          body { position:relative; width:100%; height:100%; overflow:hidden; }
          button { color:#222; font-size:20px; padding:5px 20px; width:120px; }
          #btn1 { position:absolute; top:10px; left:10px; }
          #btn2 { position:absolute; top:60px; left:10px; }
          #btn3 { position:absolute; top:110px; left:10px; }
          #btn4 { position:absolute; top:160px; left:10px; }
          #btn5 { position:absolute; top:210px; left:10px; }
          #btn6 { position:absolute; top:260px; left:10px; }
          #btn7 { position:absolute; top:310px; left:10px; }
          #btn8 { position:absolute; top:360px; left:10px; }
          #btn9 { position:absolute; top:410px; left:10px; }
          #btn0 { position:absolute; top:460px; left:10px; }
          </style>
          <script src="js/jquery.min.js"></script>
          <title>漂亮的Canvas鼠標(biāo)箭頭跟隨動畫特效</title>
          </head>
          <body><script src="/demos/googlegg.js"></script>
          <canvas id="c"></canvas>
          <div class="btn_left;">
           <button id="btn1">效果1</button>
           <button id="btn2">效果2</button>
           <button id="btn3">效果3</button>
           <button id="btn4">效果4</button>
           <button id="btn5">效果5</button>
           <button id="btn6">效果6</button>
           <button id="btn7">效果7</button>
           <button id="btn8">效果8</button>
           <button id="btn9">效果9</button>
           <button id="btn0">效果10</button>
          </div>
          <script type="text/javascript">
           $(document).ready(function() {
           var canvas = document.getElementById("c");
           var ctx = canvas.getContext("2d");
           var c = $("#c");
           var x,y,w,h,cx,cy,l;
           var y = [];
           var b = {
           n:100,
           c:false, // 顏色 如果是false 則是隨機漸變顏色
           bc:'#000', // 背景顏色
           r:0.9,
           o:0.05,
           a:1,
           s:20,
           }
           var bx = 0,by = 0,vx = 0,vy = 0;
           var td = 0;
           var p = 0;
           var hs = 0;
           re();
           var color,color2;
           if(b.c){
           color2 = b.c;
           }else{
           color = Math.random()*360;
           }
           $(window).resize(function(){
           re();
           });
           var tp1=true,tp2 = false,tp3 = false,tp4 = false,tp5 = false,tp6 = false,tp7 = false,tp8 = false,tp9 = false,tp0 = false;
           function begin(){
           if(tp1){
           if(!b.c){
           color+=.1;
           color2 = 'hsl('+color+',100%,80%)';
           }
           ctx.globalAlpha = 1;
           ctx.fillStyle = b.bc;
           ctx.fillRect(0,0,w,h);
           for(var i=0;i<y.length;i++){
           ctx.globalAlpha = y[i].o;
           ctx.fillStyle = color2;
           ctx.beginPath();
           ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);
           ctx.closePath();
           ctx.fill();
           y[i].r+=b.r;
           y[i].o-=b.o;
           if(y[i].o<=0){
           y.splice(i,1);
           i--;
           };
           }
           }else if(tp2){
           if(!b.c){
           color+=.1;
           color2 = 'hsl('+color+',100%,80%)';
           }
           ctx.globalAlpha = 1;
           ctx.fillStyle = b.bc;
           ctx.fillRect(0,0,w,h);
           for(var i=0;i<y.length;i++){
           ctx.globalAlpha = y[i].o;
           ctx.fillStyle = color2;
           ctx.beginPath();
           y[i].r=10;
           ctx.shadowBlur=20;
           ctx.shadowColor=color2;
           ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);
           ctx.closePath();
           ctx.fill();
           ctx.shadowBlur=0;
           y[i].o-=b.o;
           y[i].v+=b.a;
           y[i].y+=y[i].v;
           if(y[i].y>=h+y[i].r || y[i].o<=0){
           y.splice(i,1);
           i--;
           };
           }
           }else if(tp3){
           if(!b.c){
           color+=.1;
           color2 = 'hsl('+color+',100%,80%)';
           }
           td+=5;
           ctx.globalAlpha = 1;
           ctx.fillStyle = b.bc;
           ctx.fillRect(0,0,w,h);
           for(var i=0;i<y.length;i++){
           ctx.globalAlpha = y[i].o;
           ctx.fillStyle = color2;
           ctx.beginPath();
           ctx.shadowBlur=20;
           ctx.shadowColor=color2;
           y[i].r=(1-(y[i].y/h))*20;
           ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);
           ctx.closePath();
           ctx.fill();
           ctx.shadowBlur=0;
           y[i].o=y[i].y/h;
           y[i].v+=b.a;
           y[i].y-=b.s;
           y[i].x+=(Math.cos((y[i].y+td)/100)*10);
           if(y[i].y<=0-y[i].r || y[i].o<=0){
           y.splice(i,1);
           i--;
           };
           }
           }else if(tp4){
           if(!b.c){
           color+=.1;
           color2 = 'hsl('+color+',100%,80%)';
           }
           ctx.globalAlpha = 1;
           ctx.fillStyle = b.bc;
           ctx.fillRect(0,0,w,h);
           for(var i=0;i<y.length;i++){
           ctx.globalAlpha = y[i].o;
           ctx.fillStyle = color2;
           ctx.beginPath();
           ctx.shadowBlur=20;
           ctx.shadowColor=color2;
           y[i].vx2 += (cx - y[i].wx)/1000;
           y[i].vy2 += (cy - y[i].wy)/1000;
           y[i].wx+=y[i].vx2;
           y[i].wy+=y[i].vy2;
           y[i].o-=b.o/2;
           y[i].r=10;
           ctx.arc(y[i].wx,y[i].wy,y[i].r,0,Math.PI*2);
           ctx.closePath();
           ctx.fill();
           ctx.shadowBlur=0;
           if(y[i].o<=0){
           y.splice(i,1);
           i--;
           };
           }
           }else if(tp5){
           if(!b.c){
           color+=.1;
           color2 = 'hsl('+color+',100%,80%)';
           }
           ctx.globalAlpha = .18;
           ctx.fillStyle = b.bc;
           ctx.fillRect(0,0,w,h);
           p+=5;
           ctx.globalAlpha = 1;
           ctx.fillStyle = color2;
           ctx.beginPath();
           ctx.shadowBlur=20;
           ctx.shadowColor=color2;
           ctx.arc(cx+50*Math.cos(p*Math.PI/180),cy+50*Math.sin(p*Math.PI/180),10,0,Math.PI*2);
           ctx.closePath();
           ctx.fill();
           ctx.beginPath();
           ctx.arc(cx+50*Math.cos((p+180)*Math.PI/180),cy+50*Math.sin((p+180)*Math.PI/180),10,0,Math.PI*2);
           ctx.closePath();
           ctx.fill();
           ctx.beginPath();
           ctx.arc(cx+50*Math.cos((p+90)*Math.PI/180),cy+50*Math.sin((p+90)*Math.PI/180),10,0,Math.PI*2);
           ctx.closePath();
           ctx.fill();
           ctx.beginPath();
           ctx.arc(cx+50*Math.cos((p+270)*Math.PI/180),cy+50*Math.sin((p+270)*Math.PI/180),10,0,Math.PI*2);
           ctx.closePath();
           ctx.fill();
           ctx.shadowBlur=0;
           }else if(tp6){
           if(!b.c){
           color+=.1;
           color2 = 'hsl('+color+',100%,80%)';
           }
           ctx.globalAlpha = 0.2;
           ctx.fillStyle = b.bc;
           ctx.fillRect(0,0,w,h);
           for(var i=0;i<y.length;i++){
           ctx.globalAlpha = y[i].o;
           ctx.strokeStyle = color2;
           ctx.beginPath();
           ctx.lineWidth = 2;
           ctx.moveTo(y[i].x,y[i].y);
           ctx.lineTo((y[i].wx+y[i].x)/2+Math.random()*20,(y[i].wy+y[i].y)/2+Math.random()*20);
           ctx.lineTo(y[i].wx,y[i].wy);
           ctx.closePath();
           ctx.stroke();
           y[i].o-=b.o;
           if(y[i].o<=0){
           y.splice(i,1);
           i--;
           };
           }
           }else if(tp7){
           if(!b.c){
           color+=.1;
           color2 = 'hsl('+color+',100%,80%)';
           }
           ctx.globalAlpha = 0.2;
           ctx.fillStyle = b.bc;
           ctx.fillRect(0,0,w,h);
           if(y.length<b.n*2){
           hs = Math.random()*2*Math.PI;
           y.push({x:cx+((Math.random()-.5)*100*Math.cos(hs)),y:cy+((Math.random()-.5)*100*Math.cos(hs)),o:1,h:hs});
           }
           for(var i=0;i<y.length;i++){
           ctx.globalAlpha = y[i].o;
           ctx.fillStyle = color2;
           ctx.beginPath();
           y[i].x+=(cx-y[i].x)/10;
           y[i].y+=(cy-y[i].y)/10;
           ctx.arc(y[i].x,y[i].y,1,0,Math.PI*2);
           ctx.closePath();
           ctx.fill();
           y[i].o-=b.o;
           if(y[i].o<=0){
           y[i].h = Math.random()*2*Math.PI;
           y[i].x = cx+((Math.random()-.5)*100*Math.cos(y[i].h));
           y[i].y = cy+((Math.random()-.5)*100*Math.sin(y[i].h));
           y[i].o = 1;
           };
           }
           }else if(tp8){
           if(!b.c){
           color+=.1;
           color2 = 'hsl('+color+',100%,80%)';
           }
           ctx.globalAlpha = 0.2;
           ctx.fillStyle = b.bc;
           ctx.fillRect(0,0,w,h);
           ctx.fillStyle = color2;
           if(cx%4 == 0){
           cx+=1;
           }else if(cx%4 == 2){
           cx-=1
           }
           else if(cx%4 == 3){
           cx-=2
           }
           if(cy%4 == 0){
           cy+=1;
           }else if(cy%4 == 2){
           cy-=1
           }
           else if(cy%4 == 3){
           cy-=2
           }
           for(var i=cx-60;i<cx+60;i+=4){
           for(var j=cy-60;j<cy+60;j+=4){
           if(Math.sqrt(Math.pow(cx-i,2)+Math.pow(cy-j,2))<=60){
           ctx.globalAlpha = 1-(Math.sqrt(Math.pow(cx-i,2)+Math.pow(cy-j,2))/60);
           if(Math.random()<.2){
           ctx.fillRect(i,j,3,3);
           }
           }
           }
           }
           }else if(tp9){
           if(!b.c){
           color+=.1;
           color2 = 'hsl('+color+',100%,80%)';
           }
           ctx.globalAlpha = 0.2;
           ctx.fillStyle = b.bc;
           ctx.fillRect(0,0,w,h);
           ctx.fillStyle = color2;
           if(cx%4 == 0){
           cx+=1;
           }else if(cx%4 == 2){
           cx-=1
           }
           else if(cx%4 == 3){
           cx-=2
           }
           if(cy%4 == 0){
           cy+=1;
           }else if(cy%4 == 2){
           cy-=1
           }
           else if(cy%4 == 3){
           cy-=2
           }
           if(y.length<b.n){
           y.push({x:cx,y:cy,xv:0,yv:0,o:1});
           }
           for(var i=0;i<y.length;i++){
           if(y[i].xv==0 && y[i].yv==0){
           if(Math.random()<.5){
           if(Math.random()<.5){
           y[i].xv = 3;
           }else{
           y[i].xv = -3;
           }
           }else{
           if(Math.random()<.5){
           y[i].yv = 3;
           }else{
           y[i].yv = -3;
           }
           }
           }else{
           if(y[i].xv == 0){
           if(Math.random()<.66){
           y[i].yv = 0;
           if(Math.random()<.5){
           y[i].xv = 3;
           }else{
           y[i].xv = -3;
           }
           }
           }else if(y[i].yv == 0){
           if(Math.random()<.66){
           y[i].xv = 0;
           if(Math.random()<.5){
           y[i].yv = 3;
           }else{
           y[i].yv = -3;
           }
           }
           }
           }
           y[i].o-=b.o/2;
           ctx.globalAlpha = y[i].o;
           y[i].x+=y[i].xv;
           y[i].y+=y[i].yv;
           ctx.fillRect(y[i].x,y[i].y,3,3);
           if(y[i].o<=0){
           y.splice(i,1);
           i--;
           };
           }
           }else if(tp0){
           if(!b.c){
           color+=.1;
           color2 = 'hsl('+color+',100%,80%)';
           }
           ctx.globalAlpha = 0.2;
           ctx.fillStyle = b.bc;
           ctx.fillRect(0,0,w,h);
           ctx.fillStyle = color2;
           y.push({x:cx,y:cy,xv:2,yv:1,o:1});
           for(var i=0;i<y.length;i++){
           y[i].o-=b.o/10;
           ctx.globalAlpha = y[i].o;
           y[i].x+=(Math.random()-.5)*4;
           y[i].y-=1;
           ctx.fillRect(y[i].x,y[i].y,2,2);
           if(y[i].o<=0){
           y.splice(i,1);
           i--;
           };
           }
           }
           window.requestAnimationFrame(begin);
           }
           function re(){
           w = window.innerWidth;
           h = window.innerHeight;
           canvas.width = w;
           canvas.height = h;
           cx = w/2;
           cy = h/2;
           };
           c.mousemove(function(e){
           cx = e.pageX-c.offset().left;
           cy = e.pageY-c.offset().top;
           if(tp4){
           if(Math.random()<=.5){
           if(Math.random()<=.5){
           bx = -10;
           }else{
           bx = w+10;
           }
           by = Math.random()*h;
           }else{
           if(Math.random()<=.5){
           by = -10;
           }else{
           by = h+10;
           }
           bx = Math.random()*w;
           }
           vx = (Math.random()-.5)*8;
           vy = (Math.random()-.5)*8;
           }
           if(tp1 || tp2 || tp3){
           y.push({x:cx,y:cy,r:b.r,o:1,v:0});
           }else if(tp4){
           y.push({x:cx,y:cy,r:b.r,o:1,v:0,wx:bx,wy:by,vx2:vx,vy2:vy});
           }else if(tp6){
           y.push({x:cx+((Math.random()-.5)*30),y:cy+((Math.random()-.5)*30),o:1,wx:cx,wy:cy});
           }
           });
           /*c.mousedown(function(){
           c.on('mousemove',function(e){
           cx = e.pageX-c.offset().left;
           cy = e.pageY-c.offset().top;
           y.push({x:cx,y:cy,r:b.r,o:1});
           });
           c.on('mouseup',function(){
           c.off('mouseup');
           c.off('mousemove');
           c.off('moseleave');
           });
           c.on('mouseleave',function(){
           c.off('mouseup');
           c.off('mousemove');
           c.off('moseleave');
           });
           });*/
           $("#btn1").click(function(){
           tp1 = true;
           tp2 = false;
           tp3 = false;
           tp4 = false;
           tp5 = false;
           tp6 = false;
           tp7 = false;
           tp8 = false;
           tp9 = false;
           tp0 = false;
           y=[];
           });
           $("#btn2").click(function(){
           tp1 = false;
           tp2 = true;
           tp3 = false;
           tp4 = false;
           tp5 = false;
           tp6 = false;
           tp7 = false;
           tp8 = false;
           tp9 = false;
           tp0 = false;
           y=[];
           });
           $("#btn3").click(function(){
           tp1 = false;
           tp2 = false;
           tp3 = true;
           tp4 = false;
           tp5 = false;
           tp6 = false;
           tp7 = false;
           tp8 = false;
           tp9 = false;
           tp0 = false;
           y=[];
           });
           $("#btn4").click(function(){
           tp1 = false;
           tp2 = false;
           tp3 = false;
           tp4 = true;
           tp5 = false;
           tp6 = false;
           tp7 = false;
           tp8 = false;
           tp9 = false;
           tp0 = false;
           y=[];
           });
           $("#btn5").click(function(){
           tp1 = false;
           tp2 = false;
           tp3 = false;
           tp4 = false;
           tp5 = true;
           tp6 = false;
           tp7 = false;
           tp8 = false;
           tp9 = false;
           tp0 = false;
           y=[];
           });
           $("#btn6").click(function(){
           tp1 = false;
           tp2 = false;
           tp3 = false;
           tp4 = false;
           tp5 = false;
           tp6 = true;
           tp7 = false;
           tp8 = false;
           tp9 = false;
           tp0 = false;
           y=[];
           });
           $("#btn7").click(function(){
           tp1 = false;
           tp2 = false;
           tp3 = false;
           tp4 = false;
           tp5 = false;
           tp6 = false;
           tp7 = true;
           tp8 = false;
           tp9 = false;
           tp0 = false;
           y=[];
           });
           $("#btn8").click(function(){
           tp1 = false;
           tp2 = false;
           tp3 = false;
           tp4 = false;
           tp5 = false;
           tp6 = false;
           tp7 = false;
           tp8 = true;
           tp9 = false;
           tp0 = false;
           y=[];
           });
           $("#btn9").click(function(){
           tp1 = false;
           tp2 = false;
           tp3 = false;
           tp4 = false;
           tp5 = false;
           tp6 = false;
           tp7 = false;
           tp8 = false;
           tp9 = true;
           tp0 = false;
           y=[];
           });
           $("#btn0").click(function(){
           tp1 = false;
           tp2 = false;
           tp3 = false;
           tp4 = false;
           tp5 = false;
           tp6 = false;
           tp7 = false;
           tp8 = false;
           tp9 = false;
           tp0 = true;
           y=[];
           });
           (function() {
           var lastTime = 0;
           var vendors = ['webkit', 'moz'];
           for(var xx = 0; xx < vendors.length && !window.requestAnimationFrame; ++xx) {
           window.requestAnimationFrame = window[vendors[xx] + 'RequestAnimationFrame'];
           window.cancelAnimationFrame = window[vendors[xx] + 'CancelAnimationFrame'] ||
           window[vendors[xx] + 'CancelRequestAnimationFrame'];
           }
           if (!window.requestAnimationFrame) {
           window.requestAnimationFrame = function(callback, element) {
           var currTime = new Date().getTime();
           var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
           var id = window.setTimeout(function() {
           callback(currTime + timeToCall);
           }, timeToCall);
           lastTime = currTime + timeToCall;
           return id;
           };
           }
           if (!window.cancelAnimationFrame) {
           window.cancelAnimationFrame = function(id) {
           clearTimeout(id);
           };
           }
           }());
           begin();
           });
          </script>
          </body>
          </html>
          JS代碼過多沒有在這里展示，大家可在群內(nèi)查找
          次為大家分享的是一款最近多人使用的純HTML代碼動畫頁面源碼。
          NAME：HTML5模糊的圓點背景動畫特效

          小編覺得當(dāng)做網(wǎng)站背景圖肯定很高大尚！


          下面就來欣賞一下效果圖吧！




          注意！前方高能代碼！
          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>PHP學(xué)習(xí)群：646724664</title>
          <style>
          body {
           background: #000;
           overflow: hidden;
          }
          canvas {
           bottom: 0;
           left: 0;
           position: absolute;
           right: 0;
           top: 0;
          }
          #c1 {
           opacity: 0;
          }
          #c2 {
           background: #000;
          }
          </style>
          </head>
          <body>
          <canvas id="c1"></canvas>
          <canvas id="c2"></canvas>
          <script>
          var c1 = document.getElementById( 'c1' ),
          ctx1 = c1.getContext( '2d' ),
          c2 = document.getElementById( 'c2' ),
          ctx2 = c2.getContext( '2d' ),
          twopi = Math.PI * 2,
          parts = [],
          sizeBase,
          cw,
          opt,
          hue,
          count;
          function rand( min, max ) {
          return Math.random() * ( max - min ) + min;
          }
          function hsla( h, s, l, a ) {
          return 'hsla(' + h + ',' + s + '%,' + l + '%,' + a + ')';
          }
          function create() {
          sizeBase = cw + ch;
          count = Math.floor( sizeBase * 0.3 ),
          hue = rand( 0, 360 ),
          opt = {
          radiusMin: 1,
          radiusMax: sizeBase * 0.04,
          blurMin: 10,
          blurMax: sizeBase * 0.04,
          hueMin: hue,
          hueMax: hue + 100,
          saturationMin: 10,
          saturationMax: 70,
          lightnessMin: 20,
          lightnessMax: 50,
          alphaMin: 0.1,
          alphaMax: 0.5
          }
          ctx1.clearRect( 0, 0, cw, ch );
          ctx1.globalCompositeOperation = 'lighter';
          while( count-- ) {
          var radius = rand( opt.radiusMin, opt.radiusMax ),
          blur = rand( opt.blurMin, opt.blurMax ),
          x = rand( 0, cw ),
          y = rand( 0, ch ),
          hue = rand(opt.hueMin, opt.hueMax ),
          saturation = rand( opt.saturationMin, opt.saturationMax ),
          lightness = rand( opt.lightnessMin, opt.lightnessMax ),
          alpha = rand( opt.alphaMin, opt.alphaMax );
          ctx1.shadowColor = hsla( hue, saturation, lightness, alpha );
          ctx1.shadowBlur = blur;
          ctx1.beginPath();
          ctx1.arc( x, y, radius, 0, twopi );
          ctx1.closePath();
          ctx1.fill();
          }
          parts.length = 0;
          for( var i = 0; i < Math.floor( ( cw + ch ) * 0.03 ); i++ ) {
          parts.push({
          radius: rand( 1, sizeBase * 0.03 ),
          x: rand( 0, cw ),
          y: rand( 0, ch ),
          angle: rand( 0, twopi ),
          vel: rand( 0.1, 0.5 ),
          tick: rand( 0, 10000 )
          });
          }
          }
          function init() {
          resize();
          create();
          loop();
          }
          function loop() {
          requestAnimationFrame( loop )
          ctx2.clearRect( 0, 0, cw, ch );
          ctx2.globalCompositeOperation = 'source-over';
          ctx2.shadowBlur = 0;
          ctx2.drawImage( c1, 0, 0 );
          ctx2.globalCompositeOperation = 'lighter';
          var i = parts.length;
          ctx2.shadowBlur = 15;
          ctx2.shadowColor = '#fff';
          while( i-- ) {
          var part = parts[ i ];
          part.x += Math.cos( part.angle ) * part.vel;
          part.y += Math.sin( part.angle ) * part.vel;
          part.angle += rand( -0.05, 0.05 );
          ctx2.beginPath();
          ctx2.arc( part.x, part.y, part.radius, 0, twopi );
          ctx2.fillStyle = hsla( 0, 0, 100, 0.075 + Math.cos( part.tick * 0.02 ) * 0.05 );
          ctx2.fill();
          if( part.x - part.radius > cw ) { part.x = -part.radius }
          if( part.x + part.radius < 0 ) { part.x = cw + part.radius }
          if( part.y - part.radius > ch ) { part.y = -part.radius }
          if( part.y + part.radius < 0 ) { part.y = ch + part.radius }
          part.tick++;
          }
          }
          function resize() {
          cw = c1.width = c2.width = window.innerWidth,
          ch = c1.height = c2.height = window.innerHeight;
          create();
          }
          function click() {
          create()
          }
          window.addEventListener( 'resize', resize );
          window.addEventListener( 'click', click );
          init();</script>
          <footer><div style="position:absolute;bottom: 0px;">
          <a  target="_blank" >粵ICP備17135247號-1</a>
          <a  target="_blank" ></a></div></footer>
          </body>
          </html>
          學(xué)習(xí)中有什么問題可以一起交流討論，PHP編程群： 646724664
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
国产在线第一区二区三区|
激情综合丝袜美女一区二区|
亚洲一区二区三区自拍公司|
国产亚洲日韩一区二区三区
|
无码人妻AⅤ一区二区三区水密桃
无码欧精品亚洲日韩一区夜夜嗨
无码毛片一区二区三区中文字幕
无码毛片一区二区三区视频免费播放
|
久久精品国产第一区二区|
久久精品国产一区二区三区肥胖
|
无码国产精品一区二区免费虚拟VR|
国产精品电影一区|
日韩精品视频一区二区三区|
亚州AV综合色区无码一区
|
亚洲一区免费视频|
国产一区在线视频|
日韩精品一区二区三区视频|
国产精品电影一区|
在线视频亚洲一区|
亚洲国产精品一区二区九九|
国产日韩AV免费无码一区二区|
а天堂中文最新一区二区三区|
一区精品麻豆入口|
久久国产精品免费一区|
久久精品午夜一区二区福利|
99久久无码一区人妻a黑|
欧亚精品一区三区免费|
国产精品亚洲一区二区无码|
日韩成人一区ftp在线播放|
亚洲色一区二区三区四区|
韩国一区二区三区|
国产福利一区二区三区|
免费精品一区二区三区在线观看|
久久久不卡国产精品一区二区|
亚洲综合一区二区国产精品|
国产一区二区精品在线观看|
久久4k岛国高清一区二区|
国产免费一区二区三区|
国产精品夜色一区二区三区|
手机看片一区二区|
精品国产福利一区二区|
精品国产福利一区二区|
久久精品无码一区二区三区不卡
|
成人免费视频一区|