彩虹旋转隧道

下载代码

html

css

js

分享到微信朋友圈

X

html

css

JavaScript

var w = c.width =
    h = c.height = 400,
    ctx = c.getContext('2d'),
    
    total = 50,
    particlesParRow = 10,
    minValue = 30,
    updatesBeforeStart = 500,
    repaintColor = 'rgba(0, 0, 0, .04)',
    templateColor = 'hsl(hue, 80%, 50%)',
    
    particles = [],
    colors = [],
    radiants = [],
    colorPart = 360/total,
    radiantPart = Math.PI*2/total,
    alphaValue = true;

for(var i = 0; i < total; ++i){
  
  var array = [];
  particles.push(array);
  colors.push(templateColor.replace('hue', colorPart * i));
  radiants.push(radiantPart * i);
  
  for(var j = 0; j < particlesParRow; ++j){
    array.push(i * minValue);
  }
}

for(var i = 0; i < updatesBeforeStart; ++i) update();

function anim(){
  window.requestAnimationFrame(anim);
  
  ctx.fillStyle = repaintColor;
  ctx.beginPath();
  ctx.arc(w/2, h/2, w/2 + 1, 0, Math.PI * 2);
  ctx.fill();
  ctx.closePath();
  
  ctx.translate(w/2, h/2);
  ctx.rotate(.006);
  ctx.translate(-w/2, -h/2);
  
  for(var i = 0; i < total; ++i){
    ctx.fillStyle = colors[i];
    
    for(var j = 0; j < particlesParRow; ++j){
      var particle = particles[i][j];
      
      particles[i][j] -= particle/70;
      
      ctx.beginPath();
      ctx.arc(w/2, h/2, particle, radiants[i], radiants[i] + radiantPart);
      ctx.arc(w/2, h/2, particles[i][j], radiants[i] + radiantPart, radiants[i], true);
      ctx.closePath();
      ctx.fill();
      
      if(particles[i][j] <= minValue && Math.random() < .1){
        particles[i][j] = w/2;
      }
    }
  }
}

anim();

function update(){
  for(var i = 0; i < total; ++i){
    for(var j = 0; j < particlesParRow; ++j){
      var particle = particles[i][j];
      
      particles[i][j] -= particle/70;
      
      if(particles[i][j] <= minValue && Math.random() < .1){
        particles[i][j] = w/2;
      }
    }
  }
}

alpha.addEventListener('click', function(){
  if(alphaValue){
    alphaValue = false;
    repaintColor = 'black';
    alpha.textContent = 'solid';
  } else {
    alphaValue = true;
    repaintColor = 'rgba(0, 0, 0, .04)';
    alpha.textContent = 'alpha';
  }
})

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>彩虹旋转隧道-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号