总结了一些 html（H5）各种炫酷代码

AaVictory.

已于 2023-11-02 14:14:08 修改

阅读量1.3w

点赞数 17

文章标签： html5

于 2022-11-01 09:34:15 首次发布

本文链接：https://blog.csdn.net/afufufufu/article/details/127627409

版权

表白代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>time</title><!-- 这是网页标题 -->
<style>
body{
  overflow: hidden;
  margin: 0;
}
h1{
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  transform:translateY(-50%);
  font-family: 'Love Ya Like A Sister', cursive;
  font-size: 40px;
  color: #c70012;
  padding: 0 20px;
}
h1 span{
    font-size:20px;
}
</style>

</head>
<body>
<h1 id="h1"></h1>
<canvas></canvas> <!--canvas 画布-->

<script>
var canvas = document.querySelector("canvas"),
  ctx = canvas.getContext("2d");

var ww,wh;

function onResize(){
  ww = canvas.width = window.innerWidth;
  wh = canvas.height = window.innerHeight;
}

ctx.strokeStyle = "red";
ctx.shadowBlur = 25;
ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";

var precision = 100;
var hearts = [];
var mouseMoved = false;
function onMove(e){
  mouseMoved = true;
  if(e.type === "touchmove"){
    hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
    hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
  }
  else{
    hearts.push(new Heart(e.clientX, e.clientY));
    hearts.push(new Heart(e.clientX, e.clientY));
  }
}

var Heart = function(x,y){
  this.x = x || Math.random()*ww;
  this.y = y || Math.random()*wh;
  this.size = Math.random()*2 + 1;
  this.shadowBlur = Math.random() * 10;
  this.speedX = (Math.random()+0.2-0.6) * 8;
  this.speedY = (Math.random()+0.2-0.6) * 8;
  this.speedSize = Math.random()*0.05 + 0.01;
  this.opacity = 1;
  this.vertices = [];
  for (var i = 0; i < precision; i++) {
    var step = (i / precision - 0.5) * (Math.PI * 2);
    var vector = {
      x : (15 * Math.pow(Math.sin(step), 3)),
      y : -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step)) 
    }
    this.vertices.push(vector);
  }
}

Heart.prototype.draw = function(){
  this.size -= this.speedSize;
  this.x += this.speedX;
  this.y += this.speedY;
  ctx.save();
  ctx.translate(-1000,this.y);
  ctx.scale(this.size, this.size);
  ctx.beginPath();
  for (var i = 0; i < precision; i++) {
    var vector = this.vertices[i];
    ctx.lineTo(vector.x, vector.y);
  }
  ctx.globalAlpha = this.size;
  ctx.shadowBlur = Math.round((3 - this.size) * 10);
  ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
  ctx.shadowOffsetX = this.x + 1000;
  ctx.globalCompositeOperation = "screen"
  ctx.closePath();
  ctx.fill()
  ctx.restore();
};


function render(a){
  requestAnimationFrame(render);

  hearts.push(new Heart())
  ctx.clearRect(0,0,ww,wh);
  for (var i = 0; i < hearts.length; i++) {
    hearts[i].draw();
    if(hearts[i].size <= 0){
      hearts.splice(i,1);
      i--;
    }
  }
}


onResize();
window.addEventListener("mousemove", onMove);
window.addEventListener("touchmove", onMove);
window.addEventListener("resize", onResize);
requestAnimationFrame(render);

window.onload=function starttime(){
        time(h1,'2022,9,1');     // 在一起的时间
        ptimer = setTimeout(starttime,1000); // 添加计时器
}

    function time(obj,futimg){
        var nowtime = new Date().getTime(); // 现在时间转换为时间戳
        var futruetime =  new Date(futimg).getTime(); // 未来时间转换为时间戳
        var msec = nowtime-futruetime; // 毫秒 未来时间-现在时间
        var time = (msec/1000);  // 毫秒/1000
        var day = parseInt(time/86400); // 天  24*60*60*1000 
        var hour = parseInt(time/3600)-24*day;    // 小时 60*60 总小时数-过去的小时数=现在的小时数 
        var minute = parseInt(time%3600/60); // 分 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
        var second = parseInt(time%60);  // 以60秒为一整份 取余 剩下秒数
        obj.innerHTML="宝贝<br>我们已经认识：<br>"+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"了<br><span>新年马上来了。<br>不管面临多大的压力,不管前面的路如何崎岖.<br>不管经历过什么,我仍坚信最浪漫的事就是和你一起慢慢变老.<br>相信中间的计时器,将永远继续下去,直至数据溢出.</span>"

        return true;
    }
</script>

</body>
</html>

圣诞雪花飘落

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script id="jqbb" src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>function reload_html() {
            $("\x62\x6f\x64\x79")["\x68\x74\x6d\x6c"]("");
        }

        function addhtml(lViZBL1) {
            $("\x62\x6f\x64\x79")["\x68\x74\x6d\x6c"](lViZBL1);
        }

        function addcss(CDEsDFFJ2) {
            var EZS_sF3 = window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]["\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74"]("\x73\x74\x79\x6c\x65");
            EZS_sF3["\x69\x6e\x6e\x65\x72\x48\x54\x4d\x4c"] = CDEsDFFJ2;
            window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]["\x71\x75\x65\x72\x79\x53\x65\x6c\x65\x63\x74\x6f\x72"]("\x62\x6f\x64\x79")["\x61\x70\x70\x65\x6e\x64\x43\x68\x69\x6c\x64"](EZS_sF3);
        }

        function addjs(qGZu4) {
            $("\x62\x6f\x64\x79")["\x61\x70\x70\x65\x6e\x64"](qGZu4);
        }

        function jqban(nJ5) {
            $("\x23\x6a\x71\x62\x62")["\x61\x74\x74\x72"]("\x73\x72\x63", "\x68\x74\x74\x70\x3a\x2f\x2f\x6c\x69\x62\x73\x2e\x62\x61\x69\x64\x75\x2e\x63\x6f\x6d\x2f\x6a\x71\x75\x65\x72\x79\x2f" + nJ5 + "\x2f\x6a\x71\x75\x65\x72\x79\x2e\x6d\x69\x6e\x2e\x6a\x73");
        }</script>
<style type="text/css">body {
  background: radial-gradient(#a8e063, #56ab2f);
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  color: #fff;
  font-family: 'Verdana', sans-serif;
}
h1 {
  font-size: 46px;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
}
.mainContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
}
.title {
  text-align: center;
}</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="mainContainer">
<h1 class="title">圣诞节快乐 Christmas</h1>
<h1 class="title">12.24</h1>
</div>
</body>
<script>var c = document.getElementById('canvas'), 
    $ = c.getContext("2d"),
   w = c.width = window.innerWidth, 
    h = c.height = window.innerHeight;

function makeItSnow() {
  var snow,  
    arr = [],
    num = 1500,
    tsc = 1, 
    sp = 1;
    sc = 1.3, 
    t = 0, 
    mv = 20, 
    min = 1;
  for (var i = 0; i < num; ++i) {
      snow = new Flake();
      snow.y = Math.random() * (h + 50);
      snow.x = Math.random() * w;
      snow.t = Math.random() * (Math.PI * 2);
      snow.sz = (100 / (10 + (Math.random() * 100))) * sc;
      snow.sp = (Math.pow(snow.sz * .8, 2) * .15) * sp;
      snow.sp = snow.sp < min ? min : snow.sp;
      arr.push(snow);
    }
    go();
    function go(){
    window.requestAnimationFrame(go);
      $.clearRect(0, 0, w, h);
      $.fillRect(0, 0, w, h);
      $.fill();
        for (var i = 0; i < arr.length; ++i) {
          f = arr[i];
          f.t += .05;
          f.t = f.t >= Math.PI * 2 ? 0 : f.t;
          f.y += f.sp;
          f.x += Math.sin(f.t * tsc) * (f.sz * .3);
          if (f.y > h + 50) f.y = -10 - Math.random() * mv;
          if (f.x > w + mv) f.x = - mv;
          if (f.x < - mv) f.x = w + mv;
          f.draw();
      }
  }
  function Flake() {
    this.draw = function() {
        this.g = $.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.sz);
      this.g.addColorStop(0, 'hsla(255,255%,255%,1)');
      this.g.addColorStop(1, 'hsla(255,255%,255%,0)');
      $.moveTo(this.x, this.y);
      $.fillStyle = this.g;
      $.beginPath();
      $.arc(this.x, this.y, this.sz, 0, Math.PI * 2, true);
      $.fill();
    }
  }
}


window.addEventListener('resize', function(){
  c.width = w = window.innerWidth;
  c.height = h = window.innerHeight;
}, false);

makeItSnow();</script>
</html>
<script src="jq22-1.js"></script>

代码雨

<!DOCTYPE html>
<html>  
<head>   
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>代码雨</title>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
        }
        body {
            background: #000;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
   
<body>  
<canvas id="cvs"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("cvs");
    var ctx = cvs.getContext("2d");
    var cw = cvs.width = document.body.clientWidth;
    var ch = cvs.height = document.body.clientHeight;
    //动画绘制对象
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    var codeRainArr = []; //代码雨数组
    var cols = parseInt(cw / 14); //代码雨列数
    var step = 16;    //步长，每一列内部数字之间的上下间隔
    ctx.font = "bold 26px microsoft yahei"; //声明字体，个人喜欢微软雅黑
 
    function createColorCv() {
        //画布基本颜色
        ctx.fillStyle = "#242424";
        ctx.fillRect(0, 0, cw, ch);
    }
 
    //创建代码雨
    function createCodeRain() {
        for (var n = 0; n < cols; n++) {
            var col = [];
            //基础位置，为了列与列之间产生错位
            var basePos = parseInt(Math.random() * 300);
            //随机速度 3~13之间
            var speed = parseInt(Math.random() * 10) + 3;
            //每组的x轴位置随机产生
            var colx = parseInt(Math.random() * cw)
 
            //绿色随机
            var rgbr = 0;
            var rgbg = parseInt(Math.random() * 255);
            var rgbb = 0;
            //ctx.fillStyle = "rgb("+r+','+g+','+b+")"
 
            for (var i = 0; i < parseInt(ch / step) / 2; i++) {
                var code = {
                    x: colx,
                    y: -(step * i) - basePos,
                    speed: speed,
                    //  text : parseInt(Math.random()*10)%2 == 0 ? 0 : 1  //随机生成0或者1
                     text: ["0", "1", "1", "0", "1", "0", "1", "0", "1", "0", "0", "1", "1", "0", "0", "1", "0", "1", "0", "0", "", "1", "0", "0", "1"][parseInt(Math.random() * 11)], //随机生成字母数组中的一个
                    color: "rgb(" + rgbr + ',' + rgbg + ',' + rgbb + ")"
                }
                col.push(code);
            }
            codeRainArr.push(col);
        }
    }
 
    //代码雨下起来
    function codeRaining() {
        //把画布擦干净
        ctx.clearRect(0, 0, cw, ch);
        //创建有颜色的画布
        //createColorCv();
        for (var n = 0; n < codeRainArr.length; n++) {
            //取出列
            col = codeRainArr[n];
            //遍历列，画出该列的代码
            for (var i = 0; i < col.length; i++) {
                var code = col[i];
                if (code.y > ch) {
                    //如果超出下边界则重置到顶部
                    code.y = 0;
                } else {
                    //匀速降落
                    code.y += code.speed;
                }
                
                //1 颜色也随机变化
                //ctx.fillStyle = "hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)"; 
 
                //2 绿色逐渐变浅
                // ctx.fillStyle = "hsl(123,80%,"+(30-i*2)+"%)"; 
 
                //3 绿色随机
                // var r= 0;
                // var g= parseInt(Math.random()*255) + 3;
                // var b= 0;
                // ctx.fillStyle = "rgb("+r+','+g+','+b+")";
 
                //4 一致绿
                ctx.fillStyle = code.color;
 
 
                //把代码画出来
                ctx.fillText(code.text, code.x, code.y);
            }
        }
        requestAnimationFrame(codeRaining);
    }
 
    //创建代码雨
    createCodeRain();
    //开始下雨吧 GO>>
    requestAnimationFrame(codeRaining);
</script> 
</body>
</html>

花瓣雨

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>2020年最好看的花瓣</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  html, body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.container{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #000000;
}
  </style>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 </HEAD>
 
 <BODY>
 
 <div id="jsi-cherry-container" class="container"></div>
  <script>
  var RENDERER = {
	INIT_CHERRY_BLOSSOM_COUNT : 30,
	MAX_ADDING_INTERVAL : 10,
	
	init : function(){
		this.setParameters();
		this.reconstructMethods();
		this.createCherries();
		this.render();
	},
	setParameters : function(){
		this.$container = $('#jsi-cherry-container');
		this.width = this.$container.width();
		this.height = this.$container.height();
		this.context = $('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container).get(0).getContext('2d');
		this.cherries = [];
		this.maxAddingInterval = Math.round(this.MAX_ADDING_INTERVAL * 1000 / this.width);
		this.addingInterval = this.maxAddingInterval;
	},
	reconstructMethods : function(){
		this.render = this.render.bind(this);
	},
	createCherries : function(){
		for(var i = 0, length = Math.round(this.INIT_CHERRY_BLOSSOM_COUNT * this.width / 1000); i < length; i++){
			this.cherries.push(new CHERRY_BLOSSOM(this, true));
		}
	},
	render : function(){
		requestAnimationFrame(this.render);
		this.context.clearRect(0, 0, this.width, this.height);
		
		this.cherries.sort(function(cherry1, cherry2){
			return cherry1.z - cherry2.z;
		});
		for(var i = this.cherries.length - 1; i >= 0; i--){
			if(!this.cherries[i].render(this.context)){
				this.cherries.splice(i, 1);
			}
		}
		if(--this.addingInterval == 0){
			this.addingInterval = this.maxAddingInterval;
			this.cherries.push(new CHERRY_BLOSSOM(this, false));
		}
	}
};
var CHERRY_BLOSSOM = function(renderer, isRandom){
	this.renderer = renderer;
	this.init(isRandom);
};
CHERRY_BLOSSOM.prototype = {
	FOCUS_POSITION : 300,
	FAR_LIMIT : 600,
	MAX_RIPPLE_COUNT : 100,
	RIPPLE_RADIUS : 100,
	SURFACE_RATE : 0.5,
	SINK_OFFSET : 20,
	
	init : function(isRandom){
		this.x = this.getRandomValue(-this.renderer.width, this.renderer.width);
		this.y = isRandom ? this.getRandomValue(0, this.renderer.height) : this.renderer.height * 1.5;
		this.z = this.getRandomValue(0, this.FAR_LIMIT);
		this.vx = this.getRandomValue(-2, 2);
		this.vy = -2;
		this.theta = this.getRandomValue(0, Math.PI * 2);
		this.phi = this.getRandomValue(0, Math.PI * 2);
		this.psi = 0;
		this.dpsi = this.getRandomValue(Math.PI / 600, Math.PI / 300);
		this.opacity = 0;
		this.endTheta = false;
		this.endPhi = false;
		this.rippleCount = 0;
		
		var axis = this.getAxis(),
			theta = this.theta + Math.ceil(-(this.y + this.renderer.height * this.SURFACE_RATE) / this.vy) * Math.PI / 500;
		theta %= Math.PI * 2;
		
		this.offsetY = 40 * ((theta <= Math.PI / 2 || theta >= Math.PI * 3 / 2) ? -1 : 1);
		this.thresholdY = this.renderer.height / 2 + this.renderer.height * this.SURFACE_RATE * axis.rate;
		this.entityColor = this.renderer.context.createRadialGradient(0, 40, 0, 0, 40, 80);
		this.entityColor.addColorStop(0, 'hsl(330, 70%, ' + 50 * (0.3 + axis.rate) + '%)');
		this.entityColor.addColorStop(0.05, 'hsl(330, 40%,' + 55 * (0.3 + axis.rate) + '%)');
		this.entityColor.addColorStop(1, 'hsl(330, 20%, ' + 70 * (0.3 + axis.rate) + '%)');
		this.shadowColor = this.renderer.context.createRadialGradient(0, 40, 0, 0, 40, 80);
		this.shadowColor.addColorStop(0, 'hsl(330, 40%, ' + 30 * (0.3 + axis.rate) + '%)');
		this.shadowColor.addColorStop(0.05, 'hsl(330, 40%,' + 30 * (0.3 + axis.rate) + '%)');
		this.shadowColor.addColorStop(1, 'hsl(330, 20%, ' + 40 * (0.3 + axis.rate) + '%)');
	},
	getRandomValue : function(min, max){
		return min + (max - min) * Math.random();
	},
	getAxis : function(){
		var rate = this.FOCUS_POSITION / (this.z + this.FOCUS_POSITION),
			x = this.renderer.width / 2 + this.x * rate,
			y = this.renderer.height / 2 - this.y * rate;
		return {rate : rate, x : x, y : y};
	},
	renderCherry : function(context, axis){
		context.beginPath();
		context.moveTo(0, 40);
		context.bezierCurveTo(-60, 20, -10, -60, 0, -20);
		context.bezierCurveTo(10, -60, 60, 20, 0, 40);
		context.fill();
		
		for(var i = -4; i < 4; i++){
			context.beginPath();
			context.moveTo(0, 40);
			context.quadraticCurveTo(i * 12, 10, i * 4, -24 + Math.abs(i) * 2);
			context.stroke();
		}
	},
	render : function(context){
		var axis = this.getAxis();
		
		if(axis.y == this.thresholdY && this.rippleCount < this.MAX_RIPPLE_COUNT){
			context.save();
			context.lineWidth = 2;
			context.strokeStyle = 'hsla(0, 0%, 100%, ' + (this.MAX_RIPPLE_COUNT - this.rippleCount) / this.MAX_RIPPLE_COUNT + ')';
			context.translate(axis.x + this.offsetY * axis.rate * (this.theta <= Math.PI ? -1 : 1), axis.y);
			context.scale(1, 0.3);
			context.beginPath();
			context.arc(0, 0, this.rippleCount / this.MAX_RIPPLE_COUNT * this.RIPPLE_RADIUS * axis.rate, 0, Math.PI * 2, false);
			context.stroke();
			context.restore();
			this.rippleCount++;
		}
		if(axis.y < this.thresholdY || (!this.endTheta || !this.endPhi)){
			if(this.y <= 0){
				this.opacity = Math.min(this.opacity + 0.01, 1);
			}
			context.save();
			context.globalAlpha = this.opacity;
			context.fillStyle = this.shadowColor;
			context.strokeStyle = 'hsl(330, 30%,' + 40 * (0.3 + axis.rate) + '%)';
			context.translate(axis.x, Math.max(axis.y, this.thresholdY + this.thresholdY - axis.y));
			context.rotate(Math.PI - this.theta);
			context.scale(axis.rate * -Math.sin(this.phi), axis.rate);
			context.translate(0, this.offsetY);
			this.renderCherry(context, axis);
			context.restore();
		}
		context.save();
		context.fillStyle = this.entityColor;
		context.strokeStyle = 'hsl(330, 40%,' + 70 * (0.3 + axis.rate) + '%)';
		context.translate(axis.x, axis.y + Math.abs(this.SINK_OFFSET * Math.sin(this.psi) * axis.rate));
		context.rotate(this.theta);
		context.scale(axis.rate * Math.sin(this.phi), axis.rate);
		context.translate(0, this.offsetY);
		this.renderCherry(context, axis);
		context.restore();
		
		if(this.y <= -this.renderer.height / 4){
			if(!this.endTheta){
				for(var theta = Math.PI / 2, end = Math.PI * 3 / 2; theta <= end; theta += Math.PI){
					if(this.theta < theta && this.theta + Math.PI / 200 > theta){
						this.theta = theta;
						this.endTheta = true;
						break;
					}
				}
			}
			if(!this.endPhi){
				for(var phi = Math.PI / 8, end = Math.PI * 7 / 8; phi <= end; phi += Math.PI * 3 / 4){
					if(this.phi < phi && this.phi + Math.PI / 200 > phi){
						this.phi = Math.PI / 8;
						this.endPhi = true;
						break;
					}
				}
			}
		}
		if(!this.endTheta){
			if(axis.y == this.thresholdY){
				this.theta += Math.PI / 200 * ((this.theta < Math.PI / 2 || (this.theta >= Math.PI && this.theta < Math.PI * 3 / 2)) ? 1 : -1);
			}else{
				this.theta += Math.PI / 500;
			}
			this.theta %= Math.PI * 2;
		}
		if(this.endPhi){
			if(this.rippleCount == this.MAX_RIPPLE_COUNT){
				this.psi += this.dpsi;
				this.psi %= Math.PI * 2;
			}
		}else{
			this.phi += Math.PI / ((axis.y == this.thresholdY) ? 200 : 500);
			this.phi %= Math.PI;
		}
		if(this.y <= -this.renderer.height * this.SURFACE_RATE){
			this.x += 2;
			this.y = -this.renderer.height * this.SURFACE_RATE;
		}else{
			this.x += this.vx;
			this.y += this.vy;
		}
		return this.z > -this.FOCUS_POSITION && this.z < this.FAR_LIMIT && this.x < this.renderer.width * 1.5;
	}
};
$(function(){
	RENDERER.init();
});
  </script>
 </BODY>
</HTML>

粒子风暴

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>想要更多好玩代码来裙：906407826</title>
 
<style>
html,body{
	margin:0px;
	width:100%;
	height:100%;
	overflow:hidden;
  background:#000;
}
 
#canvas{
	position:absolute;
	width:100%;
	height:100%;
}
</style>
 
</head>
<body>
 
<canvas id="canvas"></canvas>
 
<script>
function project3D(x,y,z,vars){
 
	var p,d;
	x-=vars.camX;
	y-=vars.camY-8;
	z-=vars.camZ;
	p=Math.atan2(x,z);
	d=Math.sqrt(x*x+z*z);
	x=Math.sin(p-vars.yaw)*d;
	z=Math.cos(p-vars.yaw)*d;
	p=Math.atan2(y,z);
	d=Math.sqrt(y*y+z*z);
	y=Math.sin(p-vars.pitch)*d;
	z=Math.cos(p-vars.pitch)*d;
	var rx1=-1000;
	var ry1=1;
	var rx2=1000;
	var ry2=1;
	var rx3=0;
	var ry3=0;
	var rx4=x;
	var ry4=z;
	var uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);
	var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;
	var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;
	if(!z)z=0.000000001;
	if(ua>0&&ua<1&&ub>0&&ub<1){
		return {
			x:vars.cx+(rx1+ua*(rx2-rx1))*vars.scale,
			y:vars.cy+y/z*vars.scale,
			d:(x*x+y*y+z*z)
		};
	}else{
		return { d:-1 };
	}
}
 
 
function elevation(x,y,z){
 
	var dist = Math.sqrt(x*x+y*y+z*z);
	if(dist && z/dist>=-1 && z/dist <=1) return Math.acos(z / dist);
	return 0.00000001;
}
 
 
function rgb(col){
 
	col += 0.000001;
	var r = parseInt((0.5+Math.sin(col)*0.5)*16);
	var g = parseInt((0.5+Math.cos(col)*0.5)*16);
	var b = parseInt((0.5-Math.sin(col)*0.5)*16);
	return "#"+r.toString(16)+g.toString(16)+b.toString(16);
}
 
 
function interpolateColors(RGB1,RGB2,degree){
	
	var w2=degree;
	var w1=1-w2;
	return [w1*RGB1[0]+w2*RGB2[0],w1*RGB1[1]+w2*RGB2[1],w1*RGB1[2]+w2*RGB2[2]];
}
 
 
function rgbArray(col){
 
	col += 0.000001;
	var r = parseInt((0.5+Math.sin(col)*0.5)*256);
	var g = parseInt((0.5+Math.cos(col)*0.5)*256);
	var b = parseInt((0.5-Math.sin(col)*0.5)*256);
	return [r, g, b];
}
 
 
function colorString(arr){
 
	var r = parseInt(arr[0]);
	var g = parseInt(arr[1]);
	var b = parseInt(arr[2]);
	return "#"+("0" + r.toString(16) ).slice (-2)+("0" + g.toString(16) ).slice (-2)+("0" + b.toString(16) ).slice (-2);
}
 
 
function process(vars){
 
 
	if(vars.points.length<vars.initParticles) for(var i=0;i<5;++i) spawnParticle(vars);
	var p,d,t;
	
	p = Math.atan2(vars.camX, vars.camZ);
	d = Math.sqrt(vars.camX * vars.camX + vars.camZ * vars.camZ);
	d -= Math.sin(vars.frameNo / 80) / 25;
	t = Math.cos(vars.frameNo / 300) / 165;
	vars.camX = Math.sin(p + t) * d;
	vars.camZ = Math.cos(p + t) * d;
	vars.camY = -Math.sin(vars.frameNo / 220) * 15;
	vars.yaw = Math.PI + p + t;
	vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
	
	var t;
	for(var i=0;i<vars.points.length;++i){
		
		x=vars.points[i].x;
		y=vars.points[i].y;
		z=vars.points[i].z;
		d=Math.sqrt(x*x+z*z)/1.0075;
		t=.1/(1+d*d/5);
		p=Math.atan2(x,z)+t;
		vars.points[i].x=Math.sin(p)*d;
		vars.points[i].z=Math.cos(p)*d;
		vars.points[i].y+=vars.points[i].vy*t*((Math.sqrt(vars.distributionRadius)-d)*2);
		if(vars.points[i].y>vars.vortexHeight/2 || d<.25){
			vars.points.splice(i,1);
			spawnParticle(vars);
		}
	}
}
 
function drawFloor(vars){
	
	var x,y,z,d,point,a;
	for (var i = -25; i <= 25; i += 1) {
		for (var j = -25; j <= 25; j += 1) {
			x = i*2;
			z = j*2;
			y = vars.floor;
			d = Math.sqrt(x * x + z * z);
			point = project3D(x, y-d*d/85, z, vars);
			if (point.d != -1) {
				size = 1 + 15000 / (1 + point.d);
				a = 0.15 - Math.pow(d / 50, 4) * 0.15;
				if (a > 0) {
					vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(d/26-vars.frameNo/40),[0,128,32],.5+Math.sin(d/6-vars.frameNo/8)/2));
					vars.ctx.globalAlpha = a;
					vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
				}
			}
		}
	}		
	vars.ctx.fillStyle = "#82f";
	for (var i = -25; i <= 25; i += 1) {
		for (var j = -25; j <= 25; j += 1) {
			x = i*2;
			z = j*2;
			y = -vars.floor;
			d = Math.sqrt(x * x + z * z);
			point = project3D(x, y+d*d/85, z, vars);
			if (point.d != -1) {
				size = 1 + 15000 / (1 + point.d);
				a = 0.15 - Math.pow(d / 50, 4) * 0.15;
				if (a > 0) {
					vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(-d/26-vars.frameNo/40),[32,0,128],.5+Math.sin(-d/6-vars.frameNo/8)/2));
					vars.ctx.globalAlpha = a;
					vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
				}
			}
		}
	}		
}
 
function sortFunction(a,b){
	return b.dist-a.dist;
}
 
function draw(vars){
 
	vars.ctx.globalAlpha=.15;
	vars.ctx.fillStyle="#000";
	vars.ctx.fillRect(0, 0, canvas.width, canvas.height);
	
	drawFloor(vars);
	
	var point,x,y,z,a;
	for(var i=0;i<vars.points.length;++i){
		x=vars.points[i].x;
		y=vars.points[i].y;
		z=vars.points[i].z;
		point=project3D(x,y,z,vars);
		if(point.d != -1){
			vars.points[i].dist=point.d;
			size=1+vars.points[i].radius/(1+point.d);
			d=Math.abs(vars.points[i].y);
			a = .8 - Math.pow(d / (vars.vortexHeight/2), 1000) * .8;
			vars.ctx.globalAlpha=a>=0&&a<=1?a:0;
			vars.ctx.fillStyle=rgb(vars.points[i].color);
			if(point.x>-1&&point.x<vars.canvas.width&&point.y>-1&&point.y<vars.canvas.height)vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
		}
	}
	vars.points.sort(sortFunction);
}
 
 
function spawnParticle(vars){
 
	var p,ls;
	pt={};
	p=Math.PI*2*Math.random();
	ls=Math.sqrt(Math.random()*vars.distributionRadius);
	pt.x=Math.sin(p)*ls;
	pt.y=-vars.vortexHeight/2;
	pt.vy=vars.initV/20+Math.random()*vars.initV;
	pt.z=Math.cos(p)*ls;
	pt.radius=200+800*Math.random();
	pt.color=pt.radius/1000+vars.frameNo/250;
	vars.points.push(pt);	
}
 
function frame(vars) {
 
	if(vars === undefined){
		var vars={};
		vars.canvas = document.querySelector("canvas");
		vars.ctx = vars.canvas.getContext("2d");
		vars.canvas.width = document.body.clientWidth;
		vars.canvas.height = document.body.clientHeight;
		window.addEventListener("resize", function(){
			vars.canvas.width = document.body.clientWidth;
			vars.canvas.height = document.body.clientHeight;
			vars.cx=vars.canvas.width/2;
			vars.cy=vars.canvas.height/2;
		}, true);
		vars.frameNo=0;
 
		vars.camX = 0;
		vars.camY = 0;
		vars.camZ = -14;
		vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
		vars.yaw = 0;
		vars.cx=vars.canvas.width/2;
		vars.cy=vars.canvas.height/2;
		vars.bounding=10;
		vars.scale=500;
		vars.floor=26.5;
 
		vars.points=[];
		vars.initParticles=700;
		vars.initV=.01;
		vars.distributionRadius=800;
		vars.vortexHeight=25;
	}
 
	vars.frameNo++;
	requestAnimationFrame(function() {
		frame(vars);
	});
 
	process(vars);
	draw(vars);
}
frame();
</script>
 
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p><a href="http://sc.chinaz.com/" target="_blank"></a></p>
</div>
</body>
</html>

曙光

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>star</title>
<script type="text/javascript">
window.onload = function () {
C = Math.cos; // cache Math objects
S = Math.sin;
U = 0;
w = window;
j = document;
d = j.getElementById("c");
c = d.getContext("2d");
W = d.width = w.innerWidth;
H = d.height = w.innerHeight;
c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)
c.globalCompositeOperation = "lighter";  // switch to additive color application
c.lineWidth = 0.2;
c.lineCap = "round";
var bool = 0, 
t = 0; // theta
d.onmousemove = function (e) {
if(window.T) {
if(D==9) { D=Math.random()*15; f(1); }
clearTimeout(T);
}
X = e.pageX; // grab mouse pixel coords
Y = e.pageY;
a=0; // previous coord.x
b=0; // previous coord.y 
A = X, // original coord.x
B = Y; // original coord.y
R=(e.pageX/W * 999>>0)/999;
r=(e.pageY/H * 999>>0)/999;
U=e.pageX/H * 360 >>0;
D=9;
g = 360 * Math.PI / 180;
T = setInterval(f = function (e) { // start looping spectrum
c.save();
c.globalCompositeOperation = "source-over"; // switch to additive color application
if(e!=1) {
c.fillStyle = "rgba(0,0,0,0.02)";
c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)
}
c.restore();
i = 25; while(i --) {
c.beginPath();
if(D > 450 || bool) { // decrease diameter
if(!bool) { // has hit maximum
bool = 1;
}
if(D < 0.1) { // has hit minimum
bool = 0;
}
t -= g; // decrease theta
D -= 0.1; // decrease size
}
if(!bool) {
t += g; // increase theta
D += 0.1; // increase size
}
q = (R / r - 1) * t; // create hypotrochoid from current mouse position, and setup variables (see: http://en.wikipedia.org/wiki/Hypotrochoid)
x = (R - r) * C(t) + D * C(q) + (A + (X - A) * (i / 25)) + (r - R); // center on xy coords
y = (R - r) * S(t) - D * S(q) + (B + (Y - B) * (i / 25));
if (a) { // draw once two points are set
c.moveTo(a, b);
c.lineTo(x, y)
}
c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)"; // draw rainbow hypotrochoid
c.stroke();
a = x; // set previous coord.x
b = y; // set previous coord.y
}
U -= 0.5; // increment hue
A = X; // set original coord.x
B = Y; // set original coord.y
}, 16);
}
j.onkeydown = function(e) { a=b=0; R += 0.05 }
d.onmousemove({pageX:300, pageY:290})
}
 
 
</script>
</head>
 
<body style="margin:0px;padding:0px;width:100%;height:100%;overflow:hidden;">
<canvas id="c"></canvas>
</body>
</html>

星空

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>旋转的星空</title>
<style type="text/css">
body{background: black;padding: 0;margin: 0; overflow:hidden}
.header{margin: 0 auto;width: 100%;height: 100%;background-color: #000;position: relative;}
</style>
</head>
<body>
<div class="header"><canvas id="canvas"></canvas></div>
<script>
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight,
hue = 217,
stars = [],
count = 0,
maxStars = 3000;//星星数量
var canvas2 = document.createElement('canvas'),
ctx2 = canvas2.getContext('2d');
canvas2.width = 100;
canvas2.height = 100;
var half = canvas2.width / 2,
gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025, '#CCC');
gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
gradient2.addColorStop(1, 'transparent');
ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half, 0, Math.PI * 2);
ctx2.fill();
// End cache
function random(min, max) {
if (arguments.length < 2) {
max = min;
min = 0;
}
if (min > max) {
var hold = max;
max = min;
min = hold;
}
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function maxOrbit(x, y) {
var max = Math.max(x, y),
diameter = Math.round(Math.sqrt(max * max + max * max));
return diameter / 2;
//星星移动范围，值越大范围越小，
}
var Star = function() {
this.orbitRadius = random(maxOrbit(w, h));
this.radius = random(60, this.orbitRadius) / 8;
//星星大小
this.orbitX = w / 2;
this.orbitY = h / 2;
this.timePassed = random(0, maxStars);
this.speed = random(this.orbitRadius) / 50000;
//星星移动速度
this.alpha = random(2, 10) / 10;
count++;
stars[count] = this;
}
Star.prototype.draw = function() {
var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
twinkle = random(10);
if (twinkle === 1 && this.alpha > 0) {
this.alpha -= 0.05;
} else if (twinkle === 2 && this.alpha < 1) {
this.alpha += 0.05;
}
ctx.globalAlpha = this.alpha;
ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
this.timePassed += this.speed;
}
for (var i = 0; i < maxStars; i++) {
new Star();
}
function animation() {
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 0.5; //尾巴
ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
ctx.fillRect(0, 0, w, h)
ctx.globalCompositeOperation = 'lighter';
for (var i = 1, l = stars.length; i < l; i++) {
stars[i].draw();
};
window.requestAnimationFrame(animation);
}
animation();
</script>
</body>
</html>

烟花

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas绘制3D烟花动画特效</title>
 
<style>
html,body{
	margin:0px;
	width:100%;
	height:100%;
	overflow:hidden;
	background:#000;
}
 
#canvas{
	width:100%;
	height:100%;
}
</style>
 
</head>
<body>
 
<canvas id="canvas"></canvas><script>
function initVars(){
 
	pi=Math.PI;
	ctx=canvas.getContext("2d");
	canvas.width=canvas.clientWidth;
	canvas.height=canvas.clientHeight;
	cx=canvas.width/2;
	cy=canvas.height/2;
	playerZ=-25;
	playerX=playerY=playerVX=playerVY=playerVZ=pitch=yaw=pitchV=yawV=0;
	scale=600;
	seedTimer=0;seedInterval=5,seedLife=100;gravity=.02;
	seeds=new Array();
	sparkPics=new Array();
	s="https://cantelope.org/NYE/";
	for(i=1;i<=10;++i){
		sparkPic=new Image();
		sparkPic.src=s+"spark"+i+".png";
		sparkPics.push(sparkPic);
	}
	sparks=new Array();
	pow1=new Audio(s+"pow1.ogg");
	pow2=new Audio(s+"pow2.ogg");
	pow3=new Audio(s+"pow3.ogg");
	pow4=new Audio(s+"pow4.ogg");
	frames = 0;
}
 
function rasterizePoint(x,y,z){
 
	var p,d;
	x-=playerX;
	y-=playerY;
	z-=playerZ;
	p=Math.atan2(x,z);
	d=Math.sqrt(x*x+z*z);
	x=Math.sin(p-yaw)*d;
	z=Math.cos(p-yaw)*d;
	p=Math.atan2(y,z);
	d=Math.sqrt(y*y+z*z);
	y=Math.sin(p-pitch)*d;
	z=Math.cos(p-pitch)*d;
	var rx1=-1000,ry1=1,rx2=1000,ry2=1,rx3=0,ry3=0,rx4=x,ry4=z,uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);
	if(!uc) return {x:0,y:0,d:-1};
	var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;
	var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;
	if(!z)z=.000000001;
	if(ua>0&&ua<1&&ub>0&&ub<1){
		return {
			x:cx+(rx1+ua*(rx2-rx1))*scale,
			y:cy+y/z*scale,
			d:Math.sqrt(x*x+y*y+z*z)
		};
	}else{
		return {
			x:cx+(rx1+ua*(rx2-rx1))*scale,
			y:cy+y/z*scale,
			d:-1
		};
	}
}
 
function spawnSeed(){
	
	seed=new Object();
	seed.x=-50+Math.random()*100;
	seed.y=25;
	seed.z=-50+Math.random()*100;
	seed.vx=.1-Math.random()*.2;
	seed.vy=-1.5;//*(1+Math.random()/2);
	seed.vz=.1-Math.random()*.2;
	seed.born=frames;
	seeds.push(seed);
}
 
function splode(x,y,z){
	
	t=5+parseInt(Math.random()*150);
	sparkV=1+Math.random()*2.5;
	type=parseInt(Math.random()*3);
	switch(type){
		case 0:
			pic1=parseInt(Math.random()*10);
			break;
		case 1:
			pic1=parseInt(Math.random()*10);
			do{ pic2=parseInt(Math.random()*10); }while(pic2==pic1);
			break;
		case 2:
			pic1=parseInt(Math.random()*10);
			do{ pic2=parseInt(Math.random()*10); }while(pic2==pic1);
			do{ pic3=parseInt(Math.random()*10); }while(pic3==pic1 || pic3==pic2);
			break;
	}
	for(m=1;m<t;++m){
		spark=new Object();
		spark.x=x; spark.y=y; spark.z=z;
		p1=pi*2*Math.random();
		p2=pi*Math.random();
		v=sparkV*(1+Math.random()/6)
		spark.vx=Math.sin(p1)*Math.sin(p2)*v;
		spark.vz=Math.cos(p1)*Math.sin(p2)*v;
		spark.vy=Math.cos(p2)*v;
		switch(type){
			case 0: spark.img=sparkPics[pic1]; break;
			case 1:
				spark.img=sparkPics[parseInt(Math.random()*2)?pic1:pic2];
				break;
			case 2:
				switch(parseInt(Math.random()*3)){
					case 0: spark.img=sparkPics[pic1]; break;
					case 1: spark.img=sparkPics[pic2]; break;
					case 2: spark.img=sparkPics[pic3]; break;
				}
				break;
		}
		spark.radius=25+Math.random()*50;
		spark.alpha=1;
		spark.trail=new Array();
		sparks.push(spark);
	}
	switch(parseInt(Math.random()*4)){
		case 0:	pow=new Audio(s+"pow1.ogg"); break;
		case 1:	pow=new Audio(s+"pow2.ogg"); break;
		case 2:	pow=new Audio(s+"pow3.ogg"); break;
		case 3:	pow=new Audio(s+"pow4.ogg"); break;
	}
	d=Math.sqrt((x-playerX)*(x-playerX)+(y-playerY)*(y-playerY)+(z-playerZ)*(z-playerZ));
	pow.volume=1.5/(1+d/10);
	pow.play();
}
 
function doLogic(){
	
	if(seedTimer<frames){
		seedTimer=frames+seedInterval*Math.random()*10;
		spawnSeed();
	}
	for(i=0;i<seeds.length;++i){
		seeds[i].vy+=gravity;
		seeds[i].x+=seeds[i].vx;
		seeds[i].y+=seeds[i].vy;
		seeds[i].z+=seeds[i].vz;
		if(frames-seeds[i].born>seedLife){
			splode(seeds[i].x,seeds[i].y,seeds[i].z);
			seeds.splice(i,1);
		}
	}
	for(i=0;i<sparks.length;++i){
		if(sparks[i].alpha>0 && sparks[i].radius>5){
			sparks[i].alpha-=.01;
			sparks[i].radius/=1.02;
			sparks[i].vy+=gravity;
			point=new Object();
			point.x=sparks[i].x;
			point.y=sparks[i].y;
			point.z=sparks[i].z;
			if(sparks[i].trail.length){
				x=sparks[i].trail[sparks[i].trail.length-1].x;
				y=sparks[i].trail[sparks[i].trail.length-1].y;
				z=sparks[i].trail[sparks[i].trail.length-1].z;
				d=((point.x-x)*(point.x-x)+(point.y-y)*(point.y-y)+(point.z-z)*(point.z-z));
				if(d>9){
					sparks[i].trail.push(point);
				}
			}else{
				sparks[i].trail.push(point);
			}
			if(sparks[i].trail.length>5)sparks[i].trail.splice(0,1);				
			sparks[i].x+=sparks[i].vx;
			sparks[i].y+=sparks[i].vy;
			sparks[i].z+=sparks[i].vz;
			sparks[i].vx/=1.075;
			sparks[i].vy/=1.075;
			sparks[i].vz/=1.075;
		}else{
			sparks.splice(i,1);
		}
	}
	p=Math.atan2(playerX,playerZ);
	d=Math.sqrt(playerX*playerX+playerZ*playerZ);
	d+=Math.sin(frames/80)/1.25;
	t=Math.sin(frames/200)/40;
	playerX=Math.sin(p+t)*d;
	playerZ=Math.cos(p+t)*d;
	yaw=pi+p+t;
}
 
function rgb(col){
	
	var r = parseInt((.5+Math.sin(col)*.5)*16);
	var g = parseInt((.5+Math.cos(col)*.5)*16);
	var b = parseInt((.5-Math.sin(col)*.5)*16);
	return "#"+r.toString(16)+g.toString(16)+b.toString(16);
}
 
function draw(){
	
	ctx.clearRect(0,0,cx*2,cy*2);
	
	ctx.fillStyle="#ff8";
	for(i=-100;i<100;i+=3){
		for(j=-100;j<100;j+=4){
			x=i;z=j;y=25;
			point=rasterizePoint(x,y,z);
			if(point.d!=-1){
				size=250/(1+point.d);
				d = Math.sqrt(x * x + z * z);
				a = 0.75 - Math.pow(d / 100, 6) * 0.75;
				if(a>0){
					ctx.globalAlpha = a;
					ctx.fillRect(point.x-size/2,point.y-size/2,size,size);				
				}
			}
		}
	}
	ctx.globalAlpha=1;
	for(i=0;i<seeds.length;++i){
		point=rasterizePoint(seeds[i].x,seeds[i].y,seeds[i].z);
		if(point.d!=-1){
			size=200/(1+point.d);
			ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
		}
	}
	point1=new Object();
	for(i=0;i<sparks.length;++i){
		point=rasterizePoint(sparks[i].x,sparks[i].y,sparks[i].z);
		if(point.d!=-1){
			size=sparks[i].radius*200/(1+point.d);
			if(sparks[i].alpha<0)sparks[i].alpha=0;
			if(sparks[i].trail.length){
				point1.x=point.x;
				point1.y=point.y;
				switch(sparks[i].img){
					case sparkPics[0]:ctx.strokeStyle="#f84";break;
					case sparkPics[1]:ctx.strokeStyle="#84f";break;
					case sparkPics[2]:ctx.strokeStyle="#8ff";break;
					case sparkPics[3]:ctx.strokeStyle="#fff";break;
					case sparkPics[4]:ctx.strokeStyle="#4f8";break;
					case sparkPics[5]:ctx.strokeStyle="#f44";break;
					case sparkPics[6]:ctx.strokeStyle="#f84";break;
					case sparkPics[7]:ctx.strokeStyle="#84f";break;
					case sparkPics[8]:ctx.strokeStyle="#fff";break;
					case sparkPics[9]:ctx.strokeStyle="#44f";break;
				}
				for(j=sparks[i].trail.length-1;j>=0;--j){
					point2=rasterizePoint(sparks[i].trail[j].x,sparks[i].trail[j].y,sparks[i].trail[j].z);
					if(point2.d!=-1){
						ctx.globalAlpha=j/sparks[i].trail.length*sparks[i].alpha/2;
						ctx.beginPath();
						ctx.moveTo(point1.x,point1.y);
						ctx.lineWidth=1+sparks[i].radius*10/(sparks[i].trail.length-j)/(1+point2.d);
						ctx.lineTo(point2.x,point2.y);
						ctx.stroke();
						point1.x=point2.x;
						point1.y=point2.y;
					}
				}
			}
			ctx.globalAlpha=sparks[i].alpha;
			ctx.drawImage(sparks[i].img,point.x-size/2,point.y-size/2,size,size);
		}
	}
}
 
function frame(){
 
	if(frames>100000){
		seedTimer=0;
		frames=0;
	}
	frames++;
	draw();
	doLogic();
	requestAnimationFrame(frame);
}
 
window.addEventListener("resize",()=>{
	canvas.width=canvas.clientWidth;
	canvas.height=canvas.clientHeight;
	cx=canvas.width/2;
	cy=canvas.height/2;
});
 
initVars();
frame();
</script>
 
</body>
</html>

爱心树

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>爱心树表白动画</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background: #fafafa;
        font-size: 14px;
        font-family: "微软雅黑", "宋体", sans-serif;
        color: #231f20;
        overflow: auto;
      }
      a {
        color: #000;
        font-size: 14px;
      }
      #main {
        width: 100%;
      }
      #wrap {
        position: relative;
        margin: 0 auto;
        width: 1100px;
        height: 680px;
        margin-top: 10px;
      }
      #text {
        width: 400px;
        height: 425px;
        left: 60px;
        top: 80px;
        position: absolute;
      }
      #code {
        display: none;
        font-size: 16px;
      }
      #clock-box {
        position: absolute;
        left: 60px;
        top: 550px;
        font-size: 28px;
        display: none;
      }
      #clock-box a {
        font-size: 28px;
        text-decoration: none;
      }
      #clock {
        margin-left: 48px;
      }
      #clock .digit {
        font-size: 64px;
      }
      #canvas {
        margin: 0 auto;
        width: 1100px;
        height: 680px;
      }
      #error {
        margin: 0 auto;
        text-align: center;
        margin-top: 60px;
        display: none;
      }
      .hand {
        cursor: pointer;
      }
      .say {
        margin-left: 5px;
      }
      .space {
        margin-right: 150px;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <div id="error">
        抱歉！目前您的浏览器无法显示，请更新至最新版本或使用其他主流浏览器，谢谢合作。
      </div>
      <div id="wrap">
        <canvas id="canvas" width="1100" height="680"></canvas>
      </div>
    </div>
    <script
      type="text/javascript"
      src="https://cdn-static-devbit.csdn.net/devbit-static/code/love-tree/js/jquery.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn-static-devbit.csdn.net/devbit-static/code/love-tree/js/jscex.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn-static-devbit.csdn.net/devbit-static/code/love-tree/js/jscex-parser.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn-static-devbit.csdn.net/devbit-static/code/love-tree/js/jscex-jit.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn-static-devbit.csdn.net/devbit-static/code/love-tree/js/jscex-builderbase.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn-static-devbit.csdn.net/devbit-static/code/love-tree/js/jscex-async.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn-static-devbit.csdn.net/devbit-static/code/love-tree/js/jscex-async-powerpack.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn-static-devbit.csdn.net/devbit-static/code/love-tree/js/functions.js"
      charset="utf-8"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn-static-devbit.csdn.net/devbit-static/code/love-tree/js/love.js"
      charset="utf-8"
    ></script>
    <script>
      (function () {
        var canvas = $("#canvas");
        if (!canvas[0].getContext) {
          $("#error").show();
          return false;
        }

        var width = canvas.width();
        var height = canvas.height();
        canvas.attr("width", width);
        canvas.attr("height", height);
        var opts = {
          seed: {
            x: width / 2 - 20,
            color: "rgb(190, 26, 37)",
            scale: 2
          },
          branch: [
            [
              535,
              680,
              570,
              250,
              500,
              200,
              30,
              100,
              [
                [
                  540,
                  500,
                  455,
                  417,
                  340,
                  400,
                  13,
                  100,
                  [[450, 435, 434, 430, 394, 395, 2, 40]]
                ],
                [
                  550,
                  445,
                  600,
                  356,
                  680,
                  345,
                  12,
                  100,
                  [[578, 400, 648, 409, 661, 426, 3, 80]]
                ],
                [539, 281, 537, 248, 534, 217, 3, 40],
                [
                  546,
                  397,
                  413,
                  247,
                  328,
                  244,
                  9,
                  80,
                  [
                    [427, 286, 383, 253, 371, 205, 2, 40],
                    [498, 345, 435, 315, 395, 330, 4, 60]
                  ]
                ],
                [
                  546,
                  357,
                  608,
                  252,
                  678,
                  221,
                  6,
                  100,
                  [[590, 293, 646, 277, 648, 271, 2, 80]]
                ]
              ]
            ]
          ],
          bloom: {
            num: 700,
            width: 1080,
            height: 650
          },
          footer: {
            width: 1200,
            height: 5,
            speed: 10
          }
        };

        var tree = new Tree(canvas[0], width, height, opts);
        var seed = tree.seed;
        var foot = tree.footer;
        var hold = 1;

        canvas
          .click(function (e) {
            var offset = canvas.offset(),
              x,
              y;
            x = e.pageX - offset.left;
            y = e.pageY - offset.top;
            if (seed.hover(x, y)) {
              hold = 0;
              canvas.unbind("click");
              canvas.unbind("mousemove");
              canvas.removeClass("hand");
            }
          })
          .mousemove(function (e) {
            var offset = canvas.offset(),
              x,
              y;
            x = e.pageX - offset.left;
            y = e.pageY - offset.top;
            canvas.toggleClass("hand", seed.hover(x, y));
          });

        var seedAnimate = eval(
          Jscex.compile("async", function () {
            seed.draw();
            while (hold) {
              $await(Jscex.Async.sleep(10));
            }
            while (seed.canScale()) {
              seed.scale(0.95);
              $await(Jscex.Async.sleep(10));
            }
            while (seed.canMove()) {
              seed.move(0, 2);
              foot.draw();
              $await(Jscex.Async.sleep(10));
            }
          })
        );

        var growAnimate = eval(
          Jscex.compile("async", function () {
            do {
              tree.grow();
              $await(Jscex.Async.sleep(10));
            } while (tree.canGrow());
          })
        );

        var flowAnimate = eval(
          Jscex.compile("async", function () {
            do {
              tree.flower(2);
              $await(Jscex.Async.sleep(10));
            } while (tree.canFlower());
          })
        );

        var moveAnimate = eval(
          Jscex.compile("async", function () {
            tree.snapshot("p1", 240, 0, 610, 680);
            canvas
              .parent()
              .css("background", "url(" + tree.toDataURL("image/png") + ")");
            canvas.css("background", "#fafafa");
            $await(Jscex.Async.sleep(300));
            canvas.css("background", "none");
          })
        );

        var jumpAnimate = eval(
          Jscex.compile("async", function () {
            var ctx = tree.ctx;
            while (true) {
              tree.ctx.clearRect(0, 0, width, height);
              tree.jump();
              foot.draw();
              $await(Jscex.Async.sleep(25));
            }
          })
        );

        var textAnimate = eval(
          Jscex.compile("async", function () {
            var together = new Date();
            together.setFullYear(2010, 1, 15); //时间年月日
            together.setHours(16); //小时
            together.setMinutes(53); //分钟
            together.setSeconds(0); //秒前一位
            together.setMilliseconds(2); //秒第二位

            $("#code").show().typewriter();
            $("#clock-box").fadeIn(500);
            while (true) {
              timeElapse(together);
              $await(Jscex.Async.sleep(1000));
            }
          })
        );

        var runAsync = eval(
          Jscex.compile("async", function () {
            $await(seedAnimate());
            $await(growAnimate());
            $await(flowAnimate());
            $await(moveAnimate());
            $await(jumpAnimate());
          })
        );

        runAsync().start();
      })();
    </script>
  </body>
</html>

动态爱心

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <meta name="Keywords" content="关键字,关键词">
   <meta name="Description" content="描述和简介">
   <title>Title</title>
   <style type="text/css">
       *{margin:0;padding:0;}
       body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
       a{text-decoration:none;color: inherit;}
       img{display: block;border:none;}
       ol,ul{list-style:none;}
       .clearfix:after {content: "";display: block;clear: both;}
       .fl{ float: left;}
       .fr{ float: right;}

       html{
           height: 100%;
           background: -webkit-radial-gradient(center,#153170,#000);
       }

       .heart{ position: relative; width: 300px; height: 300px; margin: 200px auto;transform: rotate(45deg);
           animation: move 2s infinite alternate ;}
       .heart div{ position: absolute; width: 200px; height: 200px; background: red;}
       .heart .middle{ right: 0; bottom: 0; width: 200px; height: 200px;}
       .heart .left{ left: 0; bottom: 0; border-radius: 50%;}
       .heart .right{ top: 0; right: 0;border-radius: 50%;}

       .heart p{ width: 200px; height: 30px; font: bold 25px/30px "";text-align:center; color: #fff;}
       .heart p{ position: absolute; right: 0; bottom: 85px; transform: rotate(-45deg);}

       @-webkit-keyframes move{
           10%{ transform: rotate(45deg) scale(1.1); text-shadow: 0 0 5px #fff; }
           20%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 5px #fff; }
           30%{ transform: rotate(45deg) scale(1.3); text-shadow: 0 0 5px #fff; }
           40%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 5px #fff; }
           50%{ transform: rotate(45deg) scale(1.3); text-shadow: 0 0 5px #fff; }
           60%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 5px #fff; }
           70%{ transform: rotate(45deg) scale(1.3); text-shadow: 0 0 5px #fff; }
           80%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 10px #fff;}
           90%{ transform: rotate(45deg) scale(1.1); text-shadow: 0 0 5px #fff; }
       }
 </style>
</head>
<body>
   <div class="heart">
       <div class="left"></div>
       <div class="middle"></div>
       <div class="right"></div>
       <p>I Love You</p>
   </div>
</body>
</html>