对一些常见的HTML5特效进行整理和运行（有趣特效，烟花特效，爱心特效，炫酷特效）

有趣特效

<!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>

（2）爱心特效

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
html, body {height: 100%;padding: 0;margin: 0;background: #000;}canvas {position: absolute;width: 100%;height: 100%;}</style>
</HEAD>
<BODY>
<canvas id="pinkboard"></canvas>
<script>
/** Settings*/var settings = {particles: {length:   500, // maximum amount of particlesduration:   2, // particle duration in secvelocity: 100, // particle velocity in pixels/seceffect: -0.75, // play with this for a nice effectsize:      30, // particle size in pixels},};/** RequestAnimationFrame polyfill by Erik Möller*/(function(){var b=0;var c=["ms","moz","webkit","o"];for(var a=0;a<c.length&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[c[a]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[c[a]+"CancelAnimationFrame"]||window[c[a]+"CancelRequestAnimationFrame"]}if(!window.requestAnimationFrame){window.requestAnimationFrame=function(h,e){var d=new Date().getTime();var f=Math.max(0,16-(d-b));var g=window.setTimeout(function(){h(d+f)},f);b=d+f;return g}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d)}}}());/** Point class*/var Point = (function() {function Point(x, y) {this.x = (typeof x !== 'undefined') ? x : 0;this.y = (typeof y !== 'undefined') ? y : 0;}Point.prototype.clone = function() {return new Point(this.x, this.y);};Point.prototype.length = function(length) {if (typeof length == 'undefined')return Math.sqrt(this.x * this.x + this.y * this.y);this.normalize();this.x *= length;this.y *= length;return this;};Point.prototype.normalize = function() {var length = this.length();this.x /= length;this.y /= length;return this;};return Point;})();/** Particle class*/var Particle = (function() {function Particle() {this.position = new Point();this.velocity = new Point();this.acceleration = new Point();this.age = 0;}Particle.prototype.initialize = function(x, y, dx, dy) {this.position.x = x;this.position.y = y;this.velocity.x = dx;this.velocity.y = dy;this.acceleration.x = dx * settings.particles.effect;this.acceleration.y = dy * settings.particles.effect;this.age = 0;};Particle.prototype.update = function(deltaTime) {this.position.x += this.velocity.x * deltaTime;this.position.y += this.velocity.y * deltaTime;this.velocity.x += this.acceleration.x * deltaTime;this.velocity.y += this.acceleration.y * deltaTime;this.age += deltaTime;};Particle.prototype.draw = function(context, image) {function ease(t) {return (--t) * t * t + 1;}var size = image.width * ease(this.age / settings.particles.duration);context.globalAlpha = 1 - this.age / settings.particles.duration;context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);};return Particle;})();/** ParticlePool class*/var ParticlePool = (function() {var particles,firstActive = 0,firstFree   = 0,duration    = settings.particles.duration;function ParticlePool(length) {// create and populate particle poolparticles = new Array(length);for (var i = 0; i < particles.length; i++)particles[i] = new Particle();}ParticlePool.prototype.add = function(x, y, dx, dy) {particles[firstFree].initialize(x, y, dx, dy);// handle circular queuefirstFree++;if (firstFree   == particles.length) firstFree   = 0;if (firstActive == firstFree       ) firstActive++;if (firstActive == particles.length) firstActive = 0;};ParticlePool.prototype.update = function(deltaTime) {var i;// update active particlesif (firstActive < firstFree) {for (i = firstActive; i < firstFree; i++)particles[i].update(deltaTime);}if (firstFree < firstActive) {for (i = firstActive; i < particles.length; i++)particles[i].update(deltaTime);for (i = 0; i < firstFree; i++)particles[i].update(deltaTime);}// remove inactive particleswhile (particles[firstActive].age >= duration && firstActive != firstFree) {firstActive++;if (firstActive == particles.length) firstActive = 0;}};ParticlePool.prototype.draw = function(context, image) {// draw active particlesif (firstActive < firstFree) {for (i = firstActive; i < firstFree; i++)particles[i].draw(context, image);}if (firstFree < firstActive) {for (i = firstActive; i < particles.length; i++)particles[i].draw(context, image);for (i = 0; i < firstFree; i++)particles[i].draw(context, image);}};return ParticlePool;})();/** Putting it all together*/(function(canvas) {var context = canvas.getContext('2d'),particles = new ParticlePool(settings.particles.length),particleRate = settings.particles.length / settings.particles.duration, // particles/sectime;// get point on heart with -PI <= t <= PIfunction pointOnHeart(t) {return new Point(160 * Math.pow(Math.sin(t), 3),130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25);}// creating the particle image using a dummy canvasvar image = (function() {var canvas  = document.createElement('canvas'),context = canvas.getContext('2d');canvas.width  = settings.particles.size;canvas.height = settings.particles.size;// helper function to create the pathfunction to(t) {var point = pointOnHeart(t);point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;return point;}// create the pathcontext.beginPath();var t = -Math.PI;var point = to(t);context.moveTo(point.x, point.y);while (t < Math.PI) {t += 0.01; // baby steps!point = to(t);context.lineTo(point.x, point.y);}context.closePath();// create the fillcontext.fillStyle = '#ea80b0';context.fill();// create the imagevar image = new Image();image.src = canvas.toDataURL();return image;})();// render that thing!function render() {// next animation framerequestAnimationFrame(render);// update timevar newTime   = new Date().getTime() / 1000,deltaTime = newTime - (time || newTime);time = newTime;// clear canvascontext.clearRect(0, 0, canvas.width, canvas.height);// create new particlesvar amount = particleRate * deltaTime;for (var i = 0; i < amount; i++) {var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());var dir = pos.clone().length(settings.particles.velocity);particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);}// update and draw particlesparticles.update(deltaTime);particles.draw(context, image);}// handle (re-)sizing of the canvasfunction onResize() {canvas.width  = canvas.clientWidth;canvas.height = canvas.clientHeight;}window.onresize = onResize;// delay rendering bootstrapsetTimeout(function() {onResize();render();}, 10);})(document.getElementById('pinkboard'));</script>
</BODY>

</HTML>

（3）烟花特效

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>烟花特效</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);}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;}}}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>

（4）流星雨特效


<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0;}body{background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);height: 100vh;        /* == height: 100%  */overflow: hidden;font-family: 'Times New Roman', Times, serif;justify-content: center;align-items: center;}.container{position: relative;margin:0px;width: 100%;height: 100%;-webkit-transform: rotate(45deg);transform: rotateZ(45deg);-webkit-animation: sky 200000ms linear infinite;animation: sky 200000ms linear infinite;}.meteor{position: absolute;center:50%;height: 2px;background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));border-radius: 999px;-webkit-filter: drop-shadow(0 0 6px #699bff);filter: drop-shadow(0 0 6px #699bff);-webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;}.meteor::before, .meteor::after{content: '';position: absolute;top: calc(50% - 1px);right: 0;height: 2px;background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0) );-webkit-transform: translateX(50%) rotateZ(45deg);transform: translateX(50%) rotateZ(45deg);border-radius: 100%;-webkit-animation: shining 3000ms ease-in-out infinite;animation: shining 3000ms ease-in-out infinite;}.meteor::after{-webkit-transform: translateX(50%) rotateZ(-45deg);transform: translateX(50%) rotateZ(-45deg);}/* 1 */.meteor:nth-child(1){top: calc(50% - 185px);left: calc(50% - 150px);-webkit-animation-delay: 8888ms;animation-delay: 8888ms;}.meteor:nth-child(1)::before, .meteor:nth-child(1)::after, .meteor:nth-child(1)::after{-webkit-animation-delay: 8888ms;animation-delay: 8888ms;}/* 2 */.meteor:nth-child(2){top: calc(50% - 50px);left: calc(50% - 180px);-webkit-animation-delay: 9288ms;animation-delay: 9288ms;}.meteor:nth-child(2)::before, .meteor:nth-child(2)::after, .meteor:nth-child(2)::after{-webkit-animation-delay: 9288ms;animation-delay: 9288ms;}.meteor:nth-child(3){top: calc(50% - 145px);left: calc(50% - 135px);-webkit-animation-delay: 8600ms;animation-delay: 8600ms;}.meteor:nth-child(3)::before, .meteor:nth-child(3)::after, .meteor:nth-child(3)::after{-webkit-animation-delay: 8600ms;animation-delay: 8600ms;}.meteor:nth-child(4){top: calc(50% - 78px);left: calc(50% - 155px);-webkit-animation-delay: 3288ms;animation-delay: 3288ms;}.meteor:nth-child(4)::before, .meteor:nth-child(4)::after, .meteor:nth-child(4)::after{-webkit-animation-delay: 3288ms;animation-delay: 3288ms;}.meteor:nth-child(5){top: calc(50% - 183px);left: calc(50% - 8px);-webkit-animation-delay: 5588ms;animation-delay: 5588ms;}.meteor:nth-child(5)::before, .meteor:nth-child(5)::after, .meteor:nth-child(5)::after{-webkit-animation-delay: 5588ms;animation-delay: 5588ms;}.meteor:nth-child(6){top: calc(50% - 30px);left: calc(50% - 195px);-webkit-animation-delay: 9388ms;animation-delay: 9388ms;}.meteor:nth-child(6)::before, .meteor:nth-child(6)::after, .meteor:nth-child(6)::after{-webkit-animation-delay: 9388ms;animation-delay: 9388ms;}.meteor:nth-child(7){top: calc(50% - 95px);left: calc(50% - 70px);-webkit-animation-delay: 2588ms;animation-delay: 2588ms;}.meteor:nth-child(7)::before, .meteor:nth-child(7)::after, .meteor:nth-child(7)::after{-webkit-animation-delay: 2588ms;animation-delay: 2588ms;}.meteor:nth-child(8){top: calc(50% - 60px);left: calc(50% - 70px);-webkit-animation-delay: 5288ms;animation-delay: 5288ms;}.meteor:nth-child(8)::before, .meteor:nth-child(8)::after, .meteor:nth-child(8)::after{-webkit-animation-delay: 5288ms;animation-delay: 5288ms;}.meteor:nth-child(9){top: calc(50% - 75px);left: calc(50% - 250px);-webkit-animation-delay: 888ms;animation-delay: 888ms;}.meteor:nth-child(9)::before, .meteor:nth-child(9)::after, .meteor:nth-child(9)::after{-webkit-animation-delay: 888ms;animation-delay: 888ms;}.meteor:nth-child(9){top: calc(50% - 76px);left: calc(50% - 240px);-webkit-animation-delay: 2388ms;animation-delay: 2388ms;}.meteor:nth-child(9)::before, .meteor:nth-child(9)::after, .meteor:nth-child(9)::after{-webkit-animation-delay: 2388ms;animation-delay: 2388ms;}.meteor:nth-child(10){top: calc(50% - 85px);left: calc(50% - 6px);-webkit-animation-delay: 3588ms;animation-delay: 3588ms;}.meteor:nth-child(10)::before, .meteor:nth-child(10)::after, .meteor:nth-child(10)::after{-webkit-animation-delay: 3588ms;animation-delay: 3588ms;}.meteor:nth-child(11){top: calc(50% - 135px);left: calc(50% - 260px);-webkit-animation-delay: 2888ms;animation-delay: 2888ms;}.meteor:nth-child(11)::before, .meteor:nth-child(11)::after, .meteor:nth-child(11)::after{-webkit-animation-delay: 2888ms;animation-delay: 2888ms;}.meteor:nth-child(12){top: calc(50% - 15px);left: calc(50% - 8px);-webkit-animation-delay: 388ms;animation-delay: 388ms;}.meteor:nth-child(12)::before, .meteor:nth-child(12)::after, .meteor:nth-child(12)::after{-webkit-animation-delay: 388ms;animation-delay: 388ms;}.meteor:nth-child(13){top: calc(50% - 155px);left: calc(50% - 50px);-webkit-animation-delay: 7288ms;animation-delay: 7288ms;}.meteor:nth-child(13)::before, .meteor:nth-child(13)::after, .meteor:nth-child(13)::after{-webkit-animation-delay: 7288ms;animation-delay: 7288ms;}.meteor:nth-child(14){top: calc(50% - 28px);left: calc(50% - 80px);-webkit-animation-delay: 8888ms;animation-delay: 8888ms;}.meteor:nth-child(14)::before, .meteor:nth-child(14)::after, .meteor:nth-child(14)::after{-webkit-animation-delay: 8888ms;animation-delay: 8888ms;}.meteor:nth-child(15){top: calc(50% - 35px);left: calc(50% - 200px);-webkit-animation-delay: 7588ms;animation-delay: 7588ms;}.meteor:nth-child(15)::before, .meteor:nth-child(15)::after, .meteor:nth-child(15)::after{-webkit-animation-delay: 7588ms;animation-delay: 7588ms;}.meteor:nth-child(16){top: calc(50% - 40px);left: calc(50% - 250px);-webkit-animation-delay: 1888ms;animation-delay: 1888ms;}.meteor:nth-child(16)::before, .meteor:nth-child(16)::after, .meteor:nth-child(16)::after{-webkit-animation-delay: 1888ms;animation-delay: 1888ms;}@-webkit-keyframes tail{0%{width: 0;}30%{width: 100px;}100%{width: 0;}}@keyframes tail{0%{width: 0;}30%{width: 100px;}100%{width: 0;}}@-webkit-keyframes shining{0%{width: 0;}50%{width: 30px;}1000%{width: 0;}}@keyframes shining{0%{width: 0;}50%{width: 30px;}1000%{width: 0;}}@-webkit-keyframes shooting{0%{-webkit-transform: translateX(0);transform: translateX(0);}100%{-webkit-transform: translateX(300px);transform: translateX(300px);}}@keyframes shooting{0%{-webkit-transform: translateX(0);transform: translateX(0);}100%{-webkit-transform: translateX(300px);transform: translateX(300px);}}@-webkit-keyframes sky{0%{-webkit-transform: rotate(45deg);transform: rotate(45deg);}100%{-webkit-transform: rotate(405deg);transform: rotate(405deg);}}@keyframes sky{0%{-webkit-transform: rotate(45deg);transform: rotate(45deg);}100%{-webkit-transform: rotate(405deg);transform: rotate(405deg);}}</style>

</head>

<body>

<div class="container">
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
</div>

</body>

</html>

（5）炫酷特效

<!doctype html>

<html>

<head>
<meta charset="utf-8">
<title>H5,200行代码实现粒子漩涡特效</title>
<style>
html,body{margin:0px;width:100%;height:100%;overflow:hidden;background: #000000;}#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>

</body>

</html>

对一些常见的HTML5特效进行整理和运行（有趣特效，烟花特效，爱心特效，炫酷特效）相关推荐

38.鼠标移动炫酷特效
效果 (源码网盘地址在最后) 视频演示「前端编程实战 38」HTML+CSS3 实现鼠标移动炫酷特效视频演示地址一:https://www.bilibili.com/video/BV1Xz411v ...
华为手机线刷工具_原来华为手机自带视频剪辑工具！简单操作几步，就能添加炫酷特效...
短视频是两年很火的社交手段之一,不管是在微博还是微信朋友圈了,很多朋友都喜欢使用视频来表达自己的动态. 有些朋友为了让自己的视频更加好看,就给视频添加字幕.音乐.动画等元素,但这些操作都要使用第三方工 ...
❤ 十一个拿来就能用的网页炫酷特效
❤ 十个拿来就能用的网页炫酷特效效果如下: (1) 鼠标点击爱心 <!DOCTYPE html> <html lang="en"> <head> ...
JS 炫酷特效敢超 Flash
千一网络收集的几十个超酷 JavaScript 特效,这些特效在网上有些也有发布,不过这个应该是最全的. JS 炫酷特效敢超 Flash-3D 特效演示 JS 炫酷特效敢超 Flash-阵列特效演示 ...
HTML5超炫酷特效【天空中白云飘动CSS3特效】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
不一样的手机3D壁纸，展现手机炫酷特效
每个人感受快乐是不一样的,如听一首喜欢的音乐,看一本有趣的书,追一部时下热门的剧,或者给手机换个喜欢的壁纸. 手机占据我们生活很多的时间,所以我们喜欢用各种方式装扮它,比如说壁纸,最常见的就是静态壁纸 ...
H5炫酷特效系列4——炫酷粒子变化特效
这个示例虽然没有相对比较实用的特性,但是表现出来的效果确实非常震撼眼球.先上效果图,让各位同胞感受一下: 特效的表现感很强,有兴趣的读者可以仔细学习一下下面的代码,尝试着理解其中的逻辑. <!D ...
ThreeJS 炫酷特效旋转多面体Web页 Demo 01《ThreeJS 炫酷特效制作》
本案例为一个 threejs 的特效网页,大小球体进行包裹,外球体为透明材质,但是进行了线框渲染,使其能够通过外球踢查看其内球体. 注:案例参考源于互联网,在此做代码解释,侵删本案例除 ThreeJ ...
php网页点击特效,网站鼠标点击炫酷特效分享
今天给大家分享的是一个非常有意思的网页鼠标点击特效,具体效果如下: 总得来说这个特效还是非常棒的,颜色搭配清新,效果也比较炫酷,喜欢的小伙伴可以在下方进行下载. 演示地址:http://img.hel ...

对一些常见的HTML5特效进行整理和运行（有趣特效，烟花特效，爱心特效，炫酷特效）

对一些常见的HTML5特效进行整理和运行（有趣特效，烟花特效，爱心特效，炫酷特效）相关推荐

最新文章

热门文章