直播app开发搭建，两种很简单的网页特效实现

一、星空

 <br><!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 id="demo"><br>  </div><br>  <div> </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>

二、点击出现文字特效

<!DOCTYPE html><br><html><br> <br><head><br>    <meta charset="UTF-8"><br>    <title>Document</title><br></head><br> <br><body><br>    <script><br>        (function () {<br>            var a_idx = 0;<br>            window.onclick = function (event) {<br>                var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤",<br>                    "❤敬业❤", "❤诚信❤", "❤友善❤");<br> <br>                var heart = document.createElement("b"); //创建b元素<br>                heart.onselectstart = new Function('event.returnValue=false'); //防止拖动<br> <br>                document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上<br>                a_idx = (a_idx + 1) % a.length;<br>                heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式<br> <br>                var f = 16, // 字体大小<br>                    x = event.clientX - f / 2, // 横坐标<br>                    y = event.clientY - f, // 纵坐标<br>                    c = randomColor(), // 随机颜色<br>                    a = 1, // 透明度<br>                    s = 1.2; // 放大缩小<br> <br>                var timer = setInterval(function () { //添加定时器<br>                    if (a <= 0) {<br>                        document.body.removeChild(heart);<br>                        clearInterval(timer);<br>                    } else {<br>                        heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +<br>                            c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +<br>                            s + ");";<br> <br>                        y--;<br>                        a -= 0.016;<br>                        s += 0.002;<br>                    }<br>                }, 15)<br> <br>            }<br>            // 随机颜色<br>            function randomColor() {<br> <br>                return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math<br>                .random() * 255)) + ")";<br> <br>            }<br>        }());<br>    </script><br></body><br> <br></html>