分享亿个HTML炫酷特效代码

一、黑客帝国代码雨

二、发光的文字（可编辑）

三、粒子风暴

四、炫酷鼠标移动特效

五、旋转的星空

六、旋转的立方体

一、黑客帝国代码雨

新建一个文本文档，打开

上代码：

 <!DOCTYPE html>
<html>
<head>
    <title>黑客帝国代码雨</title>
</head>
<body> <canvas id="canvas"></canvas>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
 
 
        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;
 
        var texts = '156dsfcac'.split('');
 
        var fontSize = 16;
        var columns = canvas.width / fontSize;
        // 用于计算输出文字时坐标，所以长度即为列数
        var drops = [];
        //初始值
        for (var x = 0; x < columns; x++) {
            drops[x] = 1;
        }
 
        function draw() {
            //让背景逐渐由透明到不透明
            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            //文字颜色
            ctx.fillStyle = '#0F0';
            ctx.font = fontSize + 'px arial';
            //逐行输出文字
            for (var i = 0; i < drops.length; i++) {
                var text = texts[Math.floor(Math.random() * texts.length)];
                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
 
                if (drops[i] * fontSize > canvas.height || Math.random() > 0.95) {
                    drops[i] = 0;
                }
 
                drops[i]++;
            }
        }
        setInterval(draw, 33);
    </script>
</body>
</html>复制

后缀改成.html

我以前的作品也有这个教程，链接：教你成为机房最靓的仔-CSDN博客

运行效果：

二、发光的文字（可编辑）

新建文本文档，打开

上代码：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            /* 初始化 */
            margin: 0;
            padding: 0;
        }
        body{
            /* 100% 窗口高度 */
            min-height: 100vh;
            width: 100%;
            /* 弹性布局 水平+垂直居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #06252e;
        }
        .box{
            width: 100%;
            /* 投影效果 */
            -webkit-box-reflect:below 1px linear-gradient(transparent, rgba(0,0,0,0.2));
        }
        h1{
            color: #fff;
            font-size: 96px;
            /* 字间距 */
            letter-spacing: 15px;
            /* 转大写 */
            text-transform: uppercase;
            text-align: center;
            line-height: 76px;
            outline: none;
            /* 自定义属性 --c,可通过 var 函数对其调用 */
            --c:lightseagreen;
            /* 调用自定义属性--c，设置文字阴影（发光效果） */
            text-shadow: 0 0 10px var(--c),
            0 0 20px var(--c),
            0 0 40px var(--c),
            0 0 80px var(--c),
            0 0 160px var(--c);
            /* 执行动画：动画名 时长 线性的 无限次播放 */
            animation: animate 5s linear infinite;
        }
        /* 定义动画 */
        @keyframes animate{
            to{
                /* 色相旋转过滤镜（设置度数可改变颜色） */
                filter: hue-rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <h1 contenteditable="true">hello</h1>
    </div>
</body>
</html>复制

后缀改成.html

运行效果：

三、粒子风暴

新建文本文档，打开

输入代码：

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>粒子效果</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><a href="http://sc.chinaz.com/" target="_blank"></a></p>
</div>
</body>
</html>复制

后缀改成.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>复制

后缀改成.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>复制

后缀改成.html

运行效果：

六、旋转的立方体

新建文本文档，打开

直接上代码：

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>旋转立方体</title>
    <style>
      #cube {
        width: 200px;
        height: 200px;
        position: relative;
        transform-style: preserve-3d;
        animation: rotate 6s infinite linear;
		margin: 100px auto;
      }
      
      #cube div {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: rgba(0, 255, 255, 0.5);
        border: 2px solid #333;
      }
      
      #cube .front {
        transform: translateZ(100px);
      }
      
      #cube .back {
        transform: rotateY(180deg) translateZ(100px);
      }
      
      #cube .right {
        transform: rotateY(90deg) translateZ(100px);
      }
      
      #cube .left {
        transform: rotateY(-90deg) translateZ(100px);
      }
      
      #cube .top {
        transform: rotateX(90deg) translateZ(100px);
      }
      
      #cube .bottom {
        transform: rotateX(-90deg) translateZ(100px);
      }
      
      @keyframes rotate {
        0% {
          transform: rotateX(0) rotateY(0) rotateZ(0);
        }
        100% {
          transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div id="cube">
      <div class="front"></div>
      <div class="back"></div>
      <div class="right"></div>
      <div class="left"></div>
      <div class="top"></div>
      <div class="bottom"></div>
    </div>
    <script>
      const cube = document.querySelector('#cube');
      let isPaused = false;
      
      cube.addEventListener('mouseover', () => {
        isPaused = true;
        cube.style.animationPlayState = 'paused';
      });
      
      cube.addEventListener('mouseout', () => {
        isPaused = false;
        cube.style.animationPlayState = 'running';
      });
      
      setInterval(() => {
        if (!isPaused) {
          cube.style.animationPlayState = 'running';
        }
      }, 1000);
    </script>
  </body>
</html>复制

后缀改成.html

运行效果：

先做到这了，以后再有我会接着做，886！

附：HTML小指南（转载Carefree1990大神的作品）

原链接：https://blog.csdn.net/weixin_42400955/article/details/81106697

资源下载放在文章顶部了

分享亿个HTML炫酷特效代码

一、黑客帝国代码雨

二、发光的文字（可编辑）

三、粒子风暴

四、炫酷鼠标移动特效

五、旋转的星空

六、旋转的立方体

附：HTML小指南（转载Carefree1990大神的作品）

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

npm使用淘宝镜像下载依赖包

搭建Nexus前端npm私服，上传发布npm包和下载依赖

npm install包提示安装成功，但项目目录中没有出现node_modules的解决方案

解决VUE3 Vite打包后动态图片资源不显示问题

vue基于sockjs-client stompjs实现websocket客户端

Vue 3 项目中导入外部的＜link＞和＜script＞资源

前端哥

C#解析JSON的常用库--Newtonsoft.Json

jsonfield 项目常见问题解决方案

【SpringMVC】_SpringMVC项目返回HTML与JSON

BugJson因为json格式问题OOM怎么办

python 解读JSON文件，一文搞懂！

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

开源项目“Pretty JSON”安装与配置完全指南

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<!DOCTYPE html>
	<html>
	<head>
	<title>黑客帝国代码雨</title>
	</head>
	<body> <canvas id="canvas"></canvas>
	<style type="text/css">
	body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	}
	</style>
	<script type="text/javascript">
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');


	canvas.height = window.innerHeight;
	canvas.width = window.innerWidth;

	var texts = '156dsfcac'.split('');

	var fontSize = 16;
	var columns = canvas.width / fontSize;
	// 用于计算输出文字时坐标，所以长度即为列数
	var drops = [];
	//初始值
	for (var x = 0; x < columns; x++) {
	drops[x] = 1;
	}

	function draw() {
	//让背景逐渐由透明到不透明
	ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	//文字颜色
	ctx.fillStyle = '#0F0';
	ctx.font = fontSize + 'px arial';
	//逐行输出文字
	for (var i = 0; i < drops.length; i++) {
	var text = texts[Math.floor(Math.random() * texts.length)];
	ctx.fillText(text, i * fontSize, drops[i] * fontSize);

	if (drops[i] * fontSize > canvas.height \|\| Math.random() > 0.95) {
	drops[i] = 0;
	}

	drops[i]++;
	}
	}
	setInterval(draw, 33);
	</script>
	</body>
	</html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	*{
	/* 初始化 */
	margin: 0;
	padding: 0;
	}
	body{
	/* 100% 窗口高度 */
	min-height: 100vh;
	width: 100%;
	/* 弹性布局水平+垂直居中 */
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #06252e;
	}
	.box{
	width: 100%;
	/* 投影效果 */
	-webkit-box-reflect:below 1px linear-gradient(transparent, rgba(0,0,0,0.2));
	}
	h1{
	color: #fff;
	font-size: 96px;
	/* 字间距 */
	letter-spacing: 15px;
	/* 转大写 */
	text-transform: uppercase;
	text-align: center;
	line-height: 76px;
	outline: none;
	/* 自定义属性 --c,可通过 var 函数对其调用 */
	--c:lightseagreen;
	/* 调用自定义属性--c，设置文字阴影（发光效果） */
	text-shadow: 0 0 10px var(--c),
	0 0 20px var(--c),
	0 0 40px var(--c),
	0 0 80px var(--c),
	0 0 160px var(--c);
	/* 执行动画：动画名时长线性的无限次播放 */
	animation: animate 5s linear infinite;
	}
	/* 定义动画 */
	@keyframes animate{
	to{
	/* 色相旋转过滤镜（设置度数可改变颜色） */
	filter: hue-rotate(360deg);
	}
	}
	</style>
	</head>
	<body>
	<div class="box">
	<h1 contenteditable="true">hello</h1>
	</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>

分享亿个HTML炫酷特效代码

一、黑客帝国代码雨

二、发光的文字（可编辑）

三、粒子风暴

四、炫酷鼠标移动特效

五、旋转的星空

六、旋转的立方体

附：HTML小指南（转载Carefree1990大神的作品）

微信扫一扫：分享