超好看的前端特效
1. 粒子组成文字动画特效
文件组成：
base.css
@importurl('https://fonts.googleapis.com/css?family=Abril+Fatface|Raleway:300,400,900');.coidea-header{position: fixed;display: block;width: 96%;width:calc( 100% - 32px );height: 40px;margin: 0 auto;color: #3498db;text-align: center;top: 16px;right: 16px;left: 16px;z-index: 1000;}.coidea-header .coidea-links .coidea-icon-back{position: absolute;display: block;width: 24px;height: 24px;padding: 7px;color:rgba(255, 255, 255,0.75);font-size: 32px;line-height: 34px;font-weight: 900;font-family:'Raleway', sans-serif;text-decoration: none;outline: 0px none;outline: 0px;transition: all .3s ease;top: 0px;left: 0px;z-index: 2;}.coidea-header .coidea-links .coidea-icon-back::before{content:'';position: absolute;display: block;width: 34px;height: 34px;top: 7px;left: 20px;border-radius: 8px;background-color:rgba(255, 255, 255,.35);}.coidea-header .coidea-links .coidea-icon-back:hover{color:rgba(255, 255, 255,1);}.coidea-header .coidea-links .coidea-icon-github{position: absolute;display: block;width: 24px;height: 24px;padding: 7px;color:rgba(255, 255, 255,0.75);font-size: 32px;line-height: 34px;font-weight: 900;font-family:'Raleway', sans-serif;text-decoration: none;outline: 0px none;outline: 0px;transition: all .3s ease;top: 0px;right: 0px;z-index: 2;}.coidea-header .coidea-links .coidea-icon-github::before{content:'';position: absolute;display: block;width: 34px;height: 34px;top: 7px;right: 18px;border-radius: 8px;background-color:rgba(255, 255, 255,.35);}.coidea-header .coidea-links .coidea-icon-github:hover{color:rgba(255, 255, 255,1);}.coidea-header .coidea-links .coidea-header{font-family:'Raleway', sans-serif;display: inline-block;font-size: 14px;font-weight: 300;margin: 0;padding: 17px 0;z-index: 1;}@media screen and(max-width: 360px){.coidea-header .coidea-links .coidea-header{font-size: 12px;}}
demo.css
body{background-color: #000000;margin: 0;overflow: hidden;font-size: 0;}body section{background:url(../img/bcg.jpg) no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;width: 100vw;height: 100vh;font-weight: 700;}body section canvas{width: 100vw;height: 100vh;}
bcg.jpg
demo.js
var canvas = document.querySelector("#canvas"),
ctx = canvas.getContext("2d"),
link = document.createElement('link');
particles =[],
amount =0,
mouse ={x:-9999,y:-9999},
radius =1,
colors =["rgba(252,248,254,0.85)","rgba(220,203,255,0.75)","rgba(154,112,124,0.85)","rgba(192,213,255,0.85)","rgba(244,223,254,0.75)"],
headline = document.querySelector("#headline"),
ww = window.innerWidth,
wh = window.innerHeight;functionParticle(x, y){this.x = Math.random()* ww;this.y = Math.random()* wh;this.dest ={x: x,y: y };this.r = Math.random()*2* Math.PI;this.vx =(Math.random()-0.5)*25;this.vy =(Math.random()-0.5)*25;this.accX =0;this.accY =0;this.friction = Math.random()*0.025+0.94;this.color = colors[Math.floor(Math.random()*2.75)];}Particle.prototype.render=function(){this.accX =(this.dest.x -this.x)/1000;this.accY =(this.dest.y -this.y)/1000;this.vx +=this.accX;this.vy +=this.accY;this.vx *=this.friction;this.vy *=this.friction;this.x +=this.vx;this.y +=this.vy;
ctx.fillStyle =this.color;
ctx.beginPath();
ctx.arc(this.x,this.y,this.r, Math.PI*2,false);
ctx.fill();var a =this.x - mouse.x;var b =this.y - mouse.y;var distance = Math.sqrt(a * a + b * b);if(distance <(radius *75)){this.accX =(this.x - mouse.x)/100;this.accY =(this.y - mouse.y)/100;this.vx +=this.accX;this.vy +=this.accY;}}functiononMouseMove(e){
mouse.x = e.clientX;
mouse.y = e.clientY;}functiononTouchMove(e){if(e.touches.length >0){
mouse.x = e.touches[0].clientX;
mouse.y = e.touches[0].clientY;}}functiononTouchEnd(e){
mouse.x =-9999;
mouse.y =-9999;}functioninitScene(){
ww = canvas.width = window.innerWidth;
wh = canvas.height = window.innerHeight;
ctx.clearRect(0,0, canvas.width, canvas.height);
link.rel ='stylesheet';
link.type ='text/css';
link.href ='https://fonts.googleapis.com/css?family=Abril+Fatface';
document.getElementsByTagName('head')[0].appendChild(link);
ctx.font ='bold 16vw "Abril Fatface"';
ctx.textAlign ="center";
ctx.fillText(headline.innerHTML, ww /2, wh /1.6);var data = ctx.getImageData(0,0, ww, wh).data;
ctx.clearRect(0,0, canvas.width, canvas.height);
ctx.globalCompositeOperation ="screen";
particles =[];for(var i =0; i < ww; i += Math.round(ww /200)){for(var j =0; j < wh; j += Math.round(ww /200)){if(data[((i + j * ww)*4)+3]>200){
particles.push(newParticle(i, j));}}}
amount = particles.length;}functionrender(a){requestAnimationFrame(render);
ctx.clearRect(0,0, canvas.width, canvas.height);for(var i =0; i < amount; i++){
particles[i].render();}}
headline.addEventListener("keyup", initScene);
window.addEventListener("resize", initScene);
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("touchmove", onTouchMove);
window.addEventListener("touchend", onTouchEnd);initScene();requestAnimationFrame(render);
demo.scss
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
body {
background-color: #000000;
margin: 0;
overflow: hidden;
font-size: 0;
section {
background: url(https://images.unsplash.com/photo-1528722828814-77b9b83aafb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100vw;
height: 100vh;
canvas {
width: 100vw;
height: 100vh;
}
}
}
index.html
<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>粒子组成文字动画特效</title><linkrel="stylesheet"type="text/css"href="assets/css/base.css"/><linkrel="stylesheet"type="text/css"href="assets/css/demo.css"/></head><body><sectionid="ci-particles"><canvasid="canvas"></canvas><h1id="headline">神奇的布欧</h1></section><scriptsrc="assets/js/demo.js"></script></body></html>
2. 爱心表白特效
文件组成：
heart.svg
<svgxmlns="http://www.w3.org/2000/svg"width="473.8px"height="408.6px"viewBox="0 0 473.8 408.6"><pathfill="#d32932"d="M404.6,16.6C385.4,6.1,363.5,0,340,0c-41.5,0-78.5,18.9-103,48.5C212.3,18.9,175.3,0,133.8,0 c-23.3,0-45.3,6.1-64.5,16.6C27.9,39.5,0,83.4,0,133.9c0,14.4,2.4,28.3,6.6,41.2C29.6,278.4,237,408.6,237,408.6 s207.2-130.2,230.2-233.5c4.3-12.9,6.6-26.8,6.6-41.2C473.8,83.4,445.9,39.6,404.6,16.6z"/></svg>
index.html
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>七夕520爱心表白</title><style>*{margin:0;padding:0;}body{background-color: #1E1E1E;}</style></head><body><canvasid="drawHeart"></canvas><script>var hearts =[];var canvas = document.getElementById('drawHeart');var wW = window.innerWidth;var wH = window.innerHeight;// 创建画布var ctx = canvas.getContext('2d');// 创建图片对象var heartImage =newImage();
heartImage.src ='img/heart.svg';var num =100;init();
window.addEventListener('resize',function(){
wW = window.innerWidth;
wH = window.innerHeight;});// 初始化画布大小functioninit(){
canvas.width = wW;
canvas.height = wH;for(var i =0; i < num; i++){
hearts.push(newHeart(i%5));}requestAnimationFrame(render);}functiongetColor(){var val = Math.random()*10;if(val >0&& val <=1){return'#00f';}elseif(val >1&& val <=2){return'#f00';}elseif(val >2&& val <=3){return'#0f0';}elseif(val >3&& val <=4){return'#368';}elseif(val >4&& val <=5){return'#666';}elseif(val >5&& val <=6){return'#333';}elseif(val >6&& val <=7){return'#f50';}elseif(val >7&& val <=8){return'#e96d5b';}elseif(val >8&& val <=9){return'#5be9e9';}else{return'#d41d50';}}functiongetText(){var val = Math.random()*10;if(val >1&& val <=3){return'爱你一辈子';}elseif(val >3&& val <=5){return'感谢你';}elseif(val >5&& val <=8){return'喜欢你';}else{return'I Love You';}}functionHeart(type){this.type = type;// 初始化生成范围this.x = Math.random()* wW;this.y = Math.random()* wH;this.opacity = Math.random()*.5+.5;// 偏移量this.vel ={x:(Math.random()-.5)*5,y:(Math.random()-.5)*5}this.initialW = wW *.5;this.initialH = wH *.5;// 缩放比例this.targetScale = Math.random()*.15+.02;// 最小0.02this.scale = Math.random()*this.targetScale;// 文字位置this.fx = Math.random()* wW;this.fy = Math.random()* wH;this.fs = Math.random()*10;this.text =getText();this.fvel ={x:(Math.random()-.5)*5,y:(Math.random()-.5)*5,f:(Math.random()-.5)*2}}Heart.prototype.draw=function(){
ctx.save();
ctx.globalAlpha =this.opacity;
ctx.drawImage(heartImage,this.x,this.y,this.width,this.height);
ctx.scale(this.scale +1,this.scale +1);if(!this.type){// 设置文字属性
ctx.fillStyle =getColor();
ctx.font ='italic '+this.fs +'px sans-serif';// 填充字符串
ctx.fillText(this.text,this.fx,this.fy);}
ctx.restore();}Heart.prototype.update=function(){this.x +=this.vel.x;this.y +=this.vel.y;if(this.x -this.width > wW ||this.x +this.width <0){// 重新初始化位置this.scale =0;this.x = Math.random()* wW;this.y = Math.random()* wH;}if(this.y -this.height > wH ||this.y +this.height <0){// 重新初始化位置this.scale =0;this.x = Math.random()* wW;this.y = Math.random()* wH;}// 放大this.scale +=(this.targetScale -this.scale)*.1;this.height =this.scale *this.initialH;this.width =this.height *1.4;// -----文字-----this.fx +=this.fvel.x;this.fy +=this.fvel.y;this.fs +=this.fvel.f;if(this.fs >50){this.fs =2;}if(this.fx -this.fs > wW ||this.fx +this.fs <0){// 重新初始化位置this.fx = Math.random()* wW;this.fy = Math.random()* wH;}if(this.fy -this.fs > wH ||this.fy +this.fs <0){// 重新初始化位置this.fx = Math.random()* wW;this.fy = Math.random()* wH;}}functionrender(){
ctx.clearRect(0,0, wW, wH);for(var i =0; i < hearts.length; i++){
hearts[i].draw();
hearts[i].update();}requestAnimationFrame(render);}</script></body></html>
3. 爱心跟随鼠标
index.html
<!doctypehtml><html><head><metacharset="utf-8"><title>html5情人节爱心背景动画特效</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;}h2{position: fixed;top: 10%;left: 0;width: 100%;text-align: center;transform:translateY(-50%);font-family:'Love Ya Like A Sister', cursive;font-size: 20px;color: #c70012;padding: 0 20px;}@media(min-width:1200px){h1{font-size: 60px;}}</style></head><body><canvas></canvas><h1>情人节快乐！</h1><script>var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d");var ww,wh;functiononResize(){
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;functiononMove(e){
mouseMoved =true;if(e.type ==="touchmove"){
hearts.push(newHeart(e.touches[0].clientX, e.touches[0].clientY));
hearts.push(newHeart(e.touches[0].clientX, e.touches[0].clientY));}else{
hearts.push(newHeart(e.clientX, e.clientY));
hearts.push(newHeart(e.clientX, e.clientY));}}varHeart=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();};functionrender(a){requestAnimationFrame(render);
hearts.push(newHeart())
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);</script></body></html>
4. 满屏漂浮爱心
index.html
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>实现满屏的漂浮爱心</title><style>html,
body{margin: 0px;padding: 0px;background-color: #312;font-family: sans-serif;font-size: 48px;overflow: hidden;}#logo{position: absolute;right: 0px;bottom: 0px;}p{color: #aeb7c0;}canvas{background-color: #312;}</style></head><body><div><canvasid="testCanvas"width="550"height="500"></canvas></div><scriptsrc="https://code.createjs.com/1.0.0/easeljs.min.js"></script><script>var canvas;var stage;var container;var captureContainers;var captureIndex;functioninit(){// create a new stage and point it at our canvas:
canvas = document.getElementById("testCanvas");// 创建stage
stage =newcreatejs.Stage(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;var w = canvas.width;var h = canvas.height;
container =newcreatejs.Container();
stage.addChild(container);
captureContainers =[];
captureIndex =0;// create a large number of slightly complex vector shapes, and give them random positions and velocities:for(var i =0; i <100; i++){var heart =newcreatejs.Shape();
heart.graphics.beginFill(
createjs.Graphics.getHSL(
Math.random()*30-45,100,50+ Math.random()*30));
heart.graphics
.moveTo(0,-12).curveTo(1,-20,8,-20).curveTo(16,-20,16,-10).curveTo(16,0,0,12);
heart.graphics
.curveTo(-16,0,-16,-10).curveTo(-16,-20,-8,-20).curveTo(-1,-20,0,-12);
heart.y =-100;
container.addChild(heart);}var text =newcreatejs.Text("the longer I'm with you\nthe more I love you","bold 24px Arial","#312");
text.textAlign ="center";
text.x = w /2;
text.y = h /2- text.getMeasuredLineHeight();
stage.addChild(text);for(i =0; i <100; i++){var captureContainer =newcreatejs.Container();
captureContainer.cache(0,0, w, h);
captureContainers.push(captureContainer);}// start the tick and point it at the window so we can do some work before updating the stage:
createjs.Ticker.timingMode = createjs.Ticker.RAF;
createjs.Ticker.on("tick", tick);}functiontick(event){var w = canvas.width;var h = canvas.height;var l = container.numChildren;
captureIndex =(captureIndex +1)% captureContainers.length;
stage.removeChildAt(0);var captureContainer = captureContainers[captureIndex];
stage.addChildAt(captureContainer,0);
captureContainer.addChild(container);// iterate through all the children and move them according to their velocity:for(var i =0; i < l; i++){var heart = container.getChildAt(i);if(heart.y <-50){
heart._x = Math.random()* w;
heart.y = h *(1+ Math.random())+50;
heart.perX =(1+ Math.random()*2)* h;
heart.offX = Math.random()* h;
heart.ampX = heart.perX *0.1*(0.15+ Math.random());
heart.velY =-Math.random()*2-1;
heart.scaleX = heart.scaleY = Math.random()*2+1;
heart._rotation = Math.random()*40-20;
heart.alpha = Math.random()*0.75+0.05;
heart.compositeOperation =
Math.random()<0.33?"lighter":"source-over";}var int =((heart.offX + heart.y)/ heart.perX)* Math.PI*2;
heart.y +=(heart.velY * heart.scaleX)/2;
heart.x = heart._x + Math.cos(int)* heart.ampX;
heart.rotation = heart._rotation + Math.sin(int)*30;}
captureContainer.updateCache("source-over");// draw the updates to stage:// 将更新绘制到舞台
stage.update(event);}init();</script></body></html>
5. 黑客帝国矩阵雨
index.html
<!DOCTYPEhtml><htmllang="en"><head><title>实现黑客帝国矩阵雨效果</title><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><style>/*basic reset*/*{margin: 0;padding: 0;}/*adding a black bg to the body to make things clearer*/body{background: black;}canvas{display: block;}</style></head><body><canvasid="c"></canvas><scriptsrc="cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script>var c = document.getElementById("c");var ctx = c.getContext("2d");//making the canvas full screen | 让画布全屏
c.height = window.innerHeight;
c.width = window.innerWidth;//chinese characters - taken from the unicode charset | 汉字 - 取自unicode字符集var chinese ="田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑";//converting the string into an array of single characters | 将字符串转换为单个字符数组
chinese = chinese.split("");var font_size =10;var columns = c.width / font_size;//number of columns for the rain | 雨水柱数//an array of drops - one per column | 雨滴的阵列 - 每列一个var drops =[];//x below is the x coordinate | 下面的x是x坐标//1 = y co-ordinate of the drop(same for every drop initially) | 雨滴的y坐标(最初每一滴相同)for(var x =0; x < columns; x++) drops[x]=1;//drawing the characters | 绘制字符functiondraw(){//Black BG for the canvas | 画布黑色背景//translucent BG to show trail | 半透明背景显示轨迹
ctx.fillStyle ="rgba(0, 0, 0, 0.05)";
ctx.fillRect(0,0, c.width, c.height);
ctx.fillStyle ="#0F0";//green text
ctx.font = font_size +"px arial";//looping over drops | 在雨滴上循环for(var i =0; i < drops.length; i++){//a random chinese character to print | 要打印的随机汉字var text = chinese[Math.floor(Math.random()* chinese.length)];//x = i*font_size, y = value of drops[i]*font_size
ctx.fillText(text, i * font_size, drops[i]* font_size);//sending the drop back to the top randomly after it has crossed the screen | 在水滴越过屏幕后，将其随机发送回顶部//adding a randomness to the reset to make the drops scattered on the Y axis | 将随机性添加到重置，以使液滴分散在Y轴上if(drops[i]* font_size > c.height && Math.random()>0.975)
drops[i]=0;//incrementing Y coordinate | 递增Y坐标
drops[i]++;}}setInterval(draw,33);</script></body></html>
6. 2024新年快乐动画特效
文件目录：
style.css
*{/* 采用怪异模式下的盒模型：元素的总高度和宽度包含内边距和边框(padding与border) */box-sizing: border-box;margin: 0;padding: 0;}body{/* 没有滚动条 */overflow: hidden;}.section{display: flex;justify-content: center;align-items: center;position: relative;min-height: 100vh;background:linear-gradient(135deg, #111, #222, #111);}.section::before{content:"";position: absolute;width: 30vw;height: 30vw;/* 红色边框 */border: 5vw solid #ff1062;/* 圆形边框 */border-radius: 50%;/* 为边框添加2个下拉阴影 */box-shadow: 0 0 0 1vw #222, 0 0 0 1.3vw #fff;}.section .section__title{position: absolute;transform:skewY(-7deg);z-index: 10;color: #fff;text-align: center;font-size: 9vw;line-height: 2em;text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #ccc, 3px 3px 0 #ccc, 4px 4px 0 #ccc,
5px 5px 0 #ccc, 10px 10px 0 rgba(0, 0, 0, 0.2);animation: floating 5s ease-in-out infinite;}.section .section__title span{text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #ccc, 3px 3px 0 #ccc, 4px 4px 0 #ccc,
5px 5px 0 #ccc, 6px 6px 0 #ccc, 7px 7px 0 #ccc, 8px 8px 0 #ccc,
9px 9px 0 #ccc, 20px 20px 0 rgba(0, 0, 0, 0.2);font-weight: 700;font-size: 3em;}.section i{position: absolute;background: #fff;border-radius: 50%;box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff;animation: animate linear infinite;}@keyframes floating{0%,
100%{transform:skewY(-7deg)translate(0, -20px);}50%{transform:skewY(-7deg)translate(0, 20px);}}/* 利用透明度设置星星明暗变化的动画效果 */@keyframes animate{0%{opacity: 0;}10%{opacity: 1;}90%{opacity: 1;}100%{opacity: 0;}}
script.js
conststars=()=>{const count =200;const section = document.querySelector('.section');let i =0;while(i < count){// 在内存中创建一个新的空元素对象,如i或是divconst star = document.createElement('i');// 定义变量x和y ：通过Math.random()方法随机的使星星出现在不同位置，当然星星的定位要在文档显示区内const x = Math.floor(Math.random()* window.innerWidth);const y = Math.floor(Math.random()* window.innerHeight);const size = Math.random()*4;// 让星星始终会在网页最左最顶端出现，通过想x和y的定位，我们要让它出现在页面各个不同的位置
star.style.left = x +'px';
star.style.top = y +'px';// 利用Math.random()这个方法来随机取星星的大小：为每颗星星设置随机的宽高范围为[0,5)
star.style.width =1+ size +'px';
star.style.height =1+ size +'px';const duration = Math.random()*2;// 设置持续时间// js中除了减法计算之外，不允许随便写-。因为会混淆。所以，DOM标准规定，所有带-的css属性名，一律去横线变驼峰// css属性animation-duration,在js中改写为驼峰形式：animationDuration
star.style.animationDuration =2+ duration +'s';// 设置延迟
star.style.animationDelay =2+ duration +'s';// 将新元素添加到DOM树：把新创建的节点追加到父元素下所有直接子元素的结尾
section.appendChild(star);
i++;}}// 调用函数stars();
index.html
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>2024新年快乐动画特效</title><linkrel="stylesheet"href="css/style.css"/></head><body><sectionclass="section"><h2class="section__title">Happy New Year<br/><span>2024</span></h2></section><scriptsrc="js/script.js"></script></body></html>
7. 表白特效2
代码文件过多可以私我！这里不贴出来了，需要可以私信我！
8. 新年快乐特效
文件目录：
style.css
html,
body{width: 100%;height: 100%;margin: 0;padding: 0;background-color: #161929;position: relative;overflow: hidden;user-select: none;}audio{opacity: 0;}.message{position: fixed;left: 50%;transform:translateX(-50%);display: flex;align-items: center;width: 160px;background-color:rgba(0, 0, 0, 0.52);padding: 0px 17px;top: 25px;border-radius: 6px;overflow: hidden;z-index: 1000;opacity: 0;}/* 消息提示框内容样式 */.message p{line-height: 1;font-size:14px;color: #ffffff;}.spark{width: 3px;height: 3px;border-radius: 50%;position: absolute;background-color:rgba(231, 200, 160, 0.8);box-shadow: 0 0 40px 0 rgba(231, 200, 160, 0.8);animation: glow 5s infinite;}.medium-spark{width: 7px;height: 7px;}.big-spark{width: 10px;height: 10px;box-shadow: 0 0 40px 0 #e9c9a0, 0 0 20px 0 #FFFFFF, inset 0 0 4px #FFFFFF;}.meteor{width: 6px;height: 6px;background-color:rgba(255, 255, 255, 0.6);box-shadow: 0 0 40px 0 #e9c9a0, 0 0 20px 0 #FFFFFF, inset 0 0 8px rgba(255, 255, 255, 0.6);top: 0;left: 80%;opacity: 0.3;transform:rotate(-45deg)translate(0, -50px);animation: meteor 7s infinite;}.meteor:after{content:'';width: 20vw;height: 6px;border-radius: 50%;background-color:rgba(255, 255, 255, 0.1);box-shadow: 0 0 20px rgba(231, 200, 160, 0.4);position: absolute;top: 0;left: 0;}@keyframes glow{0%{opacity: 0.9;}50%{opacity: 0.2;}100%{opacity: 0.9;}}@keyframes meteor{0%{transform:rotate(-45deg)translateX(0);opacity: 0.3;}10%{opacity: 1;}20%{transform:rotate(-45deg)translateX(-100vw);opacity: 0;}100%{transform:rotate(-45deg)translateX(-100vw);opacity: 0;}}
main.js
// 初始化内容var wH = window.innerHeight;var wW = window.innerWidth;let backgroundRendering = document.getElementById("backgroundRendering");vargenerateStars=functiongenerateStars(f){for(var e =0; e < f; e++){var single = document.createElement("div");
single.className = e %20==0?"spark big-spark": e %9==0?"spark medium-spark":"star";
single.setAttribute("style","top:"+ Math.round(Math.random()* wH)+"px;left:"+ Math.round(Math.random()* wW)+"px;animation-duration:"+(Math.round(Math.random()*3000)+3000)+"ms;animation-delay:"+ Math.round(Math.random()*3000)+"ms;");
backgroundRendering.appendChild(single);}};generateStars(getRandom(140,240));// 全局变量 提供内容/对象存储let fireworksCanvas = document.getElementById("fireworks");let currentFireworks = document.createElement("canvas");let currentObject = currentFireworks.getContext("2d");let fireworksObject = fireworksCanvas.getContext("2d");
currentFireworks.width = fireworksCanvas.width = window.innerWidth;
currentFireworks.height = fireworksCanvas.height = window.innerHeight;let fireworksExplosion =[];let autoPlayFlag =false;// 自动加载烟花动画
window.onload=function(){drawFireworks();
lastTime =newDate();animationEffect();// 背景音乐let audio = document.getElementById('bgm');
document.querySelector("body").onclick=function(){if(!autoPlayFlag){
audio.play();
autoPlayFlag =true;}}for(let i =0; i <=10; i++){setTimeout(function(){
document.querySelector("body > div.message").style.opacity = i /10;}, i *60+2000)};for(let i =0; i <=10; i++){setTimeout(function(){
document.querySelector("body > div.message").style.opacity =1- i /10;if(i ==10){
document.querySelector("body > div.message > p").innerHTML ="点击屏幕可快速释放烟花"}}, i *60+8000)};for(let i =0; i <=10; i++){setTimeout(function(){
document.querySelector("body > div.message").style.opacity = i /10;}, i *60+8600)};for(let i =0; i <=10; i++){setTimeout(function(){
document.querySelector("body > div.message").style.opacity =1- i /10;}, i *60+16600)};};let lastTime;// 烟花动画效果functionanimationEffect(){
fireworksObject.save();
fireworksObject.fillStyle ="rgba(0,5,25,0.1)";
fireworksObject.fillRect(0,0, fireworksCanvas.width, fireworksCanvas.height);
fireworksObject.restore();let newTime =newDate();if(newTime - lastTime >getRandom(10,1600)+(window.innerHeight -767)/2){let random = Math.random()*100>15;let x =getRandom(0,(fireworksCanvas.width));let y =getRandom(0,400);if(random){let bigExplode =newexplode(getRandom(0, fireworksCanvas.width),getRandom(1,3),"#FFF",{x: x,y: y,});
fireworksExplosion.push(bigExplode);}else{let x =getRandom(fireworksCanvas.width /2-300, fireworksCanvas.width /2+300);let y =getRandom(0,350);let bigExplode =newexplode(getRandom(0, fireworksCanvas.width),getRandom(1,3),"#FFF",{x: x,y: y,},
document.querySelectorAll(".shape")[parseInt(getRandom(0, document.querySelectorAll(".shape").length))]);
fireworksExplosion.push(bigExplode);}
lastTime = newTime;}
sparks.foreach(function(){this.paint();});
fireworksExplosion.foreach(function(){let that =this;if(!this.dead){this._move();this._drawLight();}else{this.explodes.foreach(function(index){if(!this.dead){this.moveTo();}else{if(index === that.explodes.length -1){
fireworksExplosion[fireworksExplosion.indexOf(that)]=null;}}});}});setTimeout(animationEffect,16);}Array.prototype.foreach=function(callback){for(let i =0; i <this.length; i++){if(this[i]!==null){callback.apply(this[i],[i]);}}};
fireworksCanvas.onclick=function(evt){let x = evt.clientX;let y = evt.clientY;let explode1 =newexplode(getRandom(fireworksCanvas.width /3,(fireworksCanvas.width *2)/3),2,"#FFF",{x: x,y: y,});
fireworksExplosion.push(explode1);};letexplode=function(x, r, c, explodeArea, shape){this.explodes =[];this.x = x;this.y = fireworksCanvas.height + r;this.r = r;this.c = c;this.shape = shape ||false;this.explodeArea = explodeArea;this.dead =false;this.ba =parseInt(getRandom(80,200));};
explode.prototype ={_paint:function(){
fireworksObject.save();
fireworksObject.beginPath();
fireworksObject.arc(this.x,this.y,this.r,0,2* Math.PI);
fireworksObject.fillStyle =this.c;
fireworksObject.fill();
fireworksObject.restore();},_move:function(){let dx =this.explodeArea.x -this.x,
dy =this.explodeArea.y -this.y;this.x =this.x + dx *0.01;this.y =this.y + dy *0.01;if(Math.abs(dx)<=this.ba && Math.abs(dy)<=this.ba){if(this.shape){this._shapeExplode();}else{this._explode();}this.dead =true;}else{this._paint();}},_drawLight:function(){
fireworksObject.save();
fireworksObject.fillStyle ="rgba(255,228,150,0.3)";
fireworksObject.beginPath();
fireworksObject.arc(this.x,this.y,this.r +3* Math.random()+1,0,2* Math.PI);
fireworksObject.fill();
fireworksObject.restore();},_explode:function(){let embellishmentNum =getRandom(30,200);let style =getRandom(0,10)>=5?1:2;let color;if(style ===1){
color ={a:parseInt(getRandom(128,255)),b:parseInt(getRandom(128,255)),c:parseInt(getRandom(128,255)),};}let fullRange =parseInt(getRandom(300,400));for(let i =0; i < embellishmentNum; i++){if(style ===2){
color ={a:parseInt(getRandom(128,255)),b:parseInt(getRandom(128,255)),c:parseInt(getRandom(128,255)),};}let a =getRandom(-Math.PI, Math.PI);let x =getRandom(0, fullRange)* Math.cos(a)+this.x;let y =getRandom(0, fullRange)* Math.sin(a)+this.y;let radius =getRandom(0,2);let embellishment =newnewEmbellishment(this.x,this.y, radius, color, x, y);this.explodes.push(embellishment);}},_shapeExplode:function(){let that =this;putValue(currentFireworks, currentObject,this.shape,5,function(dots){let dx = fireworksCanvas.width /2- that.x;let dy = fireworksCanvas.height /2- that.y;let color;for(let i =0; i < dots.length; i++){
color ={a: dots[i].a,b: dots[i].b,c: dots[i].c,};let x = dots[i].x;let y = dots[i].y;let radius =1;let embellishment =newnewEmbellishment(that.x, that.y, radius, color, x - dx, y - dy);
that.explodes.push(embellishment);}});},};functionputValue(fireworks, context, ele, dr, callback){
context.clearRect(0,0, fireworksCanvas.width, fireworksCanvas.height);let img =newImage();let dots;if(ele.innerHTML.indexOf("img")>=0){
img.src = ele.getElementsByTagName("img")[0].src;implode(img,function(){
context.drawImage(
img,
fireworksCanvas.width /2- img.width /2,
fireworksCanvas.height /2- img.width /2);let dots =gettingData(fireworks, context, dr);callback(dots);});}else{let text = ele.innerHTML;
context.save();let fontSize =getRandom(3,11);
context.font = fontSize +"vw 宋体 bold";
context.textAlign ="center";
context.textBaseline ="middle";
context.fillStyle ="rgba("+parseInt(getRandom(128,255))+","+parseInt(getRandom(128,255))+","+parseInt(getRandom(128,255))+" , 1)";
context.fillText(text, fireworksCanvas.width /2, fireworksCanvas.height /2);
context.restore();
dots =gettingData(fireworks, context, dr);callback(dots);}}functionimplode(img, callback){if(img.complete){callback.call(img);}else{
img.onload=function(){callback.call(this);};}}functiongettingData(fireworks, context, dr){let imgData = context.getImageData(0,0, fireworksCanvas.width, fireworksCanvas.height);
context.clearRect(0,0, fireworksCanvas.width, fireworksCanvas.height);let dots =[];for(let x =0; x < imgData.width; x += dr){for(let y =0; y < imgData.height; y += dr){let i =(y * imgData.width + x)*4;if(imgData.data[i +3]>128){let dot ={x: x,y: y,a: imgData.data[i],b: imgData.data[i +1],c: imgData.data[i +2],};
dots.push(dot);}}}return dots;}functiongetRandom(a, b){return Math.random()*(b - a)+ a;}let maxRadius =1,
sparks =[];functiondrawFireworks(){for(let i =0; i <100; i++){let spark =newnewSpark();
sparks.push(spark);
spark.paint();}}// 新建星火位置letnewSpark=function(){this.x = Math.random()* fireworksCanvas.width;this.y = Math.random()*2* fireworksCanvas.height - fireworksCanvas.height;this.r = Math.random()* maxRadius;};
newSpark.prototype ={paint:function(){
fireworksObject.save();
fireworksObject.beginPath();
fireworksObject.arc(this.x,this.y,this.r,0,2* Math.PI);
fireworksObject.fillStyle ="rgba(255,255,255,"+this.r +")";
fireworksObject.fill();
fireworksObject.restore();},};// 烟花点缀生成letnewEmbellishment=function(centerX, centerY, radius, color, tx, ty){this.tx = tx;this.ty = ty;this.x = centerX;this.y = centerY;this.dead =false;this.radius = radius;this.color = color;};
newEmbellishment.prototype ={paint:function(){
fireworksObject.save();
fireworksObject.beginPath();
fireworksObject.arc(this.x,this.y,this.radius,0,2* Math.PI);
fireworksObject.fillStyle ="rgba("+this.color.a +","+this.color.b +","+this.color.c +",1)";
fireworksObject.fill();
fireworksObject.restore();},moveTo:function(){this.ty =this.ty +0.3;let dx =this.tx -this.x,
dy =this.ty -this.y;this.x = Math.abs(dx)<0.1?this.tx :this.x + dx *0.1;this.y = Math.abs(dy)<0.1?this.ty :this.y + dy *0.1;if(dx ===0&& Math.abs(dy)<=80){this.dead =true;}this.paint();},};
index.html
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>新年烟花</title><linkrel="icon"type="image/x-icon"href="https://pic.imgdb.cn/item/61f794ad2ab3f51d91b07a1e.png"><linkrel="stylesheet"href="static/css/style.css"><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css"/></head><bodyonselectstart="return false"><!-- 消息提示 --><divclass="message"><p>请单击屏幕开启背景音乐</p></div><!-- 流星与星火 --><divid="backgroundRendering"style="z-index: 0;"></div><!--烟花--><canvasid="fireworks"style="z-index: 9999;">
您的浏览器不支持canvas标签。
</canvas><!-- 背景音乐 --><audioid="bgm"src="static/mp3/bgm.mp3"loopautoplay>
您的浏览器不支持 audio 标签。
</audio><!-- 自定义内容弹窗 --><divstyle="display: none"><divclass="shape">🏮2024新年快乐🏮</div><divclass="shape">🏮恭喜发财🏮</div><divclass="shape">🏮万事如意🏮</div><divclass="shape">🏮吉庆有余🏮</div><divclass="shape">🏮心想事成🏮</div><divclass="shape">🏮喜气盈门🏮</div><divclass="shape">🏮阖家欢乐🏮</div><divclass="shape">🏮财源广进🏮</div></div><aclass="github-fork-ribbon"href="https://github.com/uiuing/NewYearFireworks"data-ribbon="Fork me on GitHub"title="Fork me on GitHub">Fork me on GitHub</a><scriptsrc="static/js/main.js"></script></body></html>
本文转载自: https://blog.csdn.net/weixin_44144773/article/details/135965612
版权归原作者 神奇的布欧 所有， 如有侵权，请联系我们删除。
版权归原作者 神奇的布欧 所有， 如有侵权，请联系我们删除。