源界面 源界面 1个月前

一个js效果 界面多个彩色小汽球碰撞成烟花效果

js

一个js效果 界面多个彩色小汽球碰撞成烟花效果
无意中访问到一个网站，正在改版。界面用动态的多彩小球效果
4njdzJAu
演示网址：访问

点击访问演示地址

https://hao.360.com/?src=lm&ls=n67a6e1409a
源码如下:

  1. < !DOCTYPE html > <html > <head > <meta http - equiv = "Content-Type"content = "text/html; charset=UTF-8" / ><meta name = "viewport"content = "width=device-width, initial-scale=1, shrink-to-fit=no" / ><title > 网站正在建设中. < /title> 
  2.   <style> @import url(https:/ / fonts.googleapis.com / css ? family = Montserrat);@import url(https: //fonts.googleapis.com/css?family=Open+Sans:400,700); body { overflow: hidden; } h1 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 4em; color: #333; -webkit-text-shadow: 0 2px 1px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.7); -moz-text-shadow: 0 2px 1px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.7); text-shadow: 0 2px 1px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.7); word-spacing: 16px; } p { font-family: 'Open Sans', sans-serif; font-size: 1.4em; font-weight: bold; color: #222; text-shadow: 0 0 40px #FFFFFF, 0 0 30px #FFFFFF, 0 0 20px #FFFFFF; } .container { position: absolute; top: 0; bottom: 0; width: 100%; background: url(''); background-size: cover; } .wrapper { width: 100%; min-height: 100%; height: auto; display: table; } .content { display: table-cell; vertical-align: middle; } .item { width: auto; height: auto; margin: 0 auto; text-align: center; padding: 8px; } canvas { position: absolute; z-index: 0; left: 0px; top: 0px; width: 100%; } .background { display: flex; z-index: 3; height: 100vh; flex-direction: column; align-content: center; justify-content: center; font-family: 'Text Me One', sans-serif; } @media only screen and (min-width: 800px) { h1 { font-size: 6em; } p { font-size: 1.6em; } } @media only screen and (max-width: 320px) { h1 { font-size: 2em; } p { font-size: 1.2em; } } </style> 
  3. < /head> 
  4.  <body>
  5.   <canvas id="background" width="1280" height="642"></canvas > <div > <div > <div > <div > <!--Place your content here to have it be centered vertically and horizontally--><h1 > 即将上线 < /h1> 
  6.       <p>网站正在建设中...</p > </div> 
  7.     </div > </div> 
  8.   </div > <script > const particles = [];
  9. for (let i = 0; i < 100; i++) {
  10.     particles.push({
  11.         x: Math.random() > 0.5 ? 0 : window.innerWidth,
  12.         y: window.innerHeight / 2,
  13.         vx: Math.random() * 2 - 1,
  14.         vy: Math.random() * 2 - 1,
  15.         history: [],
  16.         size: 4 + Math.random() * 6,
  17.         color: Math.random() > 0.5 ? '#ccc': Math.random() > 0.5 ? '#00174a': '#3c8dbc'
  18.     });
  19. }
  20. const mouse = {
  21.     x: window.innerWidth / 2,
  22.     y: window.innerHeight / 2
  23. }; const canvas = document.getElementById('background');
  24. if (canvas && canvas.getContext) {
  25.     var context = canvas.getContext('2d');
  26.     Initialize();
  27. }
  28. function Initialize() {
  29.     canvas.addEventListener('mousemove', MouseMove, false);
  30.     window.addEventListener('resize', ResizeCanvas, false);
  31.     TimeUpdate();
  32.     context.beginPath();
  33.     ResizeCanvas();
  34. }
  35. function TimeUpdate(e) {
  36.     context.clearRect(0, 0, window.innerWidth, window.innerHeight);
  37.     for (let i = 0; i < particles.length; i++) {
  38.         particles[i].x += particles[i].vx;
  39.         particles[i].y += particles[i].vy;
  40.         if (particles[i].x > window.innerWidth) {
  41.             particles[i].vx = -1 - Math.random();
  42.         } else if (particles[i].x < 0) {
  43.             particles[i].vx = 1 + Math.random();
  44.         } else {
  45.             particles[i].vx *= 1 + Math.random() * 0.005;
  46.         }
  47.         if (particles[i].y > window.innerHeight) {
  48.             particles[i].vy = -1 - Math.random();
  49.         } else if (particles[i].y < 0) {
  50.             particles[i].vy = 1 + Math.random();
  51.         } else {
  52.             particles[i].vy *= 1 + Math.random() * 0.005;
  53.         }
  54.         context.strokeStyle = particles[i].color;
  55.         context.beginPath();
  56.         for (var j = 0; j < particles[i].history.length; j++) {
  57.             context.lineTo(particles[i].history[j].x, particles[i].history[j].y);
  58.         }
  59.         context.stroke();
  60.         particles[i].history.push({
  61.             x: particles[i].x,
  62.             y: particles[i].y
  63.         });
  64.         if (particles[i].history.length > 45) {
  65.             particles[i].history.shift();
  66.         }
  67.         for (var j = 0; j < particles[i].history.length; j++) {
  68.             particles[i].history[j].x += 0.01 * (mouse.x - particles[i].history[j].x) / (45 / j);
  69.             particles[i].history[j].y += 0.01 * (mouse.y - particles[i].history[j].y) / (45 / j);
  70.         }
  71.         let distanceFactor = DistanceBetween(mouse, particles[i]);
  72.         distanceFactor = Math.pow(Math.max(Math.min(10 - distanceFactor / 10, 10), 2), 0.5);
  73.         context.fillStyle = particles[i].color;
  74.         context.beginPath();
  75.         context.arc(particles[i].x, particles[i].y, particles[i].size * distanceFactor, 0, Math.PI * 2, true);
  76.         context.closePath();
  77.         context.fill();
  78.     }
  79.     requestAnimationFrame(TimeUpdate);
  80. }
  81. function MouseMove(e) {
  82.     mouse.x = e.layerX;
  83.     mouse.y = e.layerY;
  84. }
  85. function Draw(x, y) {
  86.     context.strokeStyle = '#ff0000';
  87.     context.lineWidth = 4;
  88.     context.lineTo(x, y);
  89.     context.stroke();
  90. }
  91. function ResizeCanvas(e) {
  92.     canvas.width = window.innerWidth;
  93.     canvas.height = window.innerHeight;
  94. }
  95. function DistanceBetween(p1, p2) {
  96.     const dx = p2.x - p1.x;
  97.     const dy = p2.y - p1.y;
  98.     return Math.sqrt(dx * dx + dy * dy);
  99. } < /script> 
  100.   <div style="display:none;"></div > </body>
  101. </html >