成品直播源码推荐，平台实现的炫酷背景页面

<!DOCTYPE HTML><br><html><br><head><br><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br><title>运营系统登录页</title><br> <br><link href="static/css/login.css" rel="stylesheet" type="text/css"><br><script type="text/javascript" src="static/lib/jquery/1.9.1/jquery.min.js"></script> <br><script src="static/js/verificationNumbers.js" tppabs="static/js/verificationNumbers.js"></script><br><style><br>.J_codeimg{z-index:-1;position:absolute;}<br></style><br><script><br>$(document).ready(function() {<br>  //验证码<br>  createCode();<br>});<br></script><br></head><br><body><br><div class="login-box" id="demo"><br>  </div><br>  <div class="canvaszz"> </div><br>  <canvas id="canvas"></canvas> <br></div><br><script><br>//宇宙特效<br>"use strict";<br>var canvas = document.getElementById('canvas'),<br>  ctx = canvas.getContext('2d'),<br>  w = canvas.width = window.innerWidth,<br>  h = canvas.height = window.innerHeight,<br> <br>  hue = 217,<br>  stars = [],<br>  count = 0,<br>  maxStars = 2500;//星星数量<br> <br>var canvas2 = document.createElement('canvas'),<br>  ctx2 = canvas2.getContext('2d');<br>canvas2.width = 100;<br>canvas2.height = 100;<br>var half = canvas2.width / 2,<br>  gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);<br>gradient2.addColorStop(0.025, '#CCC');<br>gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');<br>gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');<br>gradient2.addColorStop(1, 'transparent');<br> <br>ctx2.fillStyle = gradient2;<br>ctx2.beginPath();<br>ctx2.arc(half, half, half, 0, Math.PI * 2);<br>ctx2.fill();![请添加图片描述](https://img-blog.csdnimg.cn/f7c720e91ff947a9a01febb855cfcc52.png)<br> <br>// End cache<br> <br>function random(min, max) {<br>  if (arguments.length < 2) {<br>    max = min;<br>    min = 0;<br>  }<br> <br>  if (min > max) {<br>    var hold = max;<br>    max = min;<br>    min = hold;<br>  }<br> <br>  return Math.floor(Math.random() * (max - min + 1)) + min;<br>}<br> <br>function maxOrbit(x, y) {<br>  var max = Math.max(x, y),<br>    diameter = Math.round(Math.sqrt(max * max + max * max));<br>  return diameter / 2;<br>  //星星移动范围，值越大范围越小，<br>}<br> <br>var Star = function() {<br> <br>  this.orbitRadius = random(maxOrbit(w, h));<br>  this.radius = random(60, this.orbitRadius) / 18; <br>  //星星大小<br>  this.orbitX = w / 2;<br>  this.orbitY = h / 2;<br>  this.timePassed = random(0, maxStars);<br>  this.speed = random(this.orbitRadius) / 500000; <br>  //星星移动速度<br>  this.alpha = random(2, 10) / 10;<br> <br>  count++;<br>  stars[count] = this;<br>}<br> <br>Star.prototype.draw = function() {<br>  var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,<br>    y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,<br>    twinkle = random(10);<br> <br>  if (twinkle === 1 && this.alpha > 0) {<br>    this.alpha -= 0.05;<br>  } else if (twinkle === 2 && this.alpha < 1) {<br>    this.alpha += 0.05;<br>  }<br> <br>  ctx.globalAlpha = this.alpha;<br>  ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);<br>  this.timePassed += this.speed;<br>}<br> <br>for (var i = 0; i < maxStars; i++) {<br>  new Star();<br>}<br> <br>function animation() {<br>  ctx.globalCompositeOperation = 'source-over';<br>  ctx.globalAlpha = 0.5; //尾巴<br>  ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';<br>  ctx.fillRect(0, 0, w, h)<br> <br>  ctx.globalCompositeOperation = 'lighter';<br>  for (var i = 1, l = stars.length; i < l; i++) {<br>    stars[i].draw();<br>  };<br> <br>  window.requestAnimationFrame(animation);<br>}<br> <br>animation();<br></script><br> <br></body><br></html>