❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！

📂文章目录

二、📚网站介绍
三、🔗网站效果
- ▶️1.视频演示
- 🧩 2.图片演示
四、💒 网站代码
- 🧱HTML结构代码
- 🏠CSS样式代码
五、🎁更多源码

二、📚网站介绍

📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等
（3）📄 js文件包含：页面炫酷效果实现

三、🔗网站效果

▶️1.视频演示

104 贺卡制作蛋糕动画电子生日贺卡模板

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Dear Friend</title><link rel="stylesheet" href="css/style.css" media="screen" type="text/css" /><script src="js/shine-text.js"></script>
</head><body>
<div class="velas"><div class="fuego"></div><div class="fuego"></div><div class="fuego"></div><div class="fuego"></div><div class="fuego"></div>
</div><div class="velas-1"><div class="fuego"></div><div class="fuego"></div><div class="fuego"></div><div class="fuego"></div><div class="fuego"></div>
</div><div class="velas1"><div class="fuego"></div><div class="fuego"></div><div class="fuego"></div><div class="fuego"></div><div class="fuego"></div>
</div><div class="velas-2"><div class="fuego"></div><div class="fuego"></div><div class="fuego"></div><div class="fuego"></div><div class="fuego"></div>
</div><div class="velas2"><div class="fuego"></div><div class="fuego"></div><div class="fuego"></div><div class="fuego"></div><div class="fuego"></div>
</div><div class="velas-3"><div class="fuego"></div><div class="fuego"></div><div class="fuego"></div><div class="fuego"></div><div class="fuego"></div>
</div><div class="velas3"><div class="fuego"></div><div class="fuego"></div><div class="fuego"></div><div class="fuego"></div><div class="fuego"></div>
</div><canvas id="canvas" width=��200�� height=��200��></canvas><script>
window.requestAnimFrame = ( function() {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||function( callback ) {window.setTimeout( callback, 1000 / 60 );};
})();
var canvas = document.getElementById( 'canvas' ),ctx = canvas.getContext( '2d' ),cw = window.innerWidth,ch = window.innerHeight,fireworks = [],particles = [],hue = 120,limiterTotal = 5,limiterTick = 0,timerTotal = 80,timerTick = 0,mousedown = false,mx,my;canvas.width = cw;
canvas.height = ch;  function random( min, max ) {return Math.random() * ( max - min ) + min;
}function calculateDistance( p1x, p1y, p2x, p2y ) {var xDistance = p1x - p2x,yDistance = p1y - p2y;return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
}function Firework( sx, sy, tx, ty ) {this.x = sx;this.y = sy;this.sx = sx;this.sy = sy;this.tx = tx;this.ty = ty;this.distanceToTarget = calculateDistance( sx, sy, tx, ty );this.distanceTraveled = 0;this.coordinates = [];this.coordinateCount = 3;while( this.coordinateCount-- ) {this.coordinates.push( [ this.x, this.y ] );}this.angle = Math.atan2( ty - sy, tx - sx );this.speed = 2;this.acceleration = 1.05;this.brightness = random( 50, 70 );this.targetRadius = 1;
}Firework.prototype.update = function( index ) {this.coordinates.pop();this.coordinates.unshift( [ this.x, this.y ] );if( this.targetRadius < 8 ) {this.targetRadius += 0.3;} else {this.targetRadius = 1;}this.speed *= this.acceleration;var vx = Math.cos( this.angle ) * this.speed,vy = Math.sin( this.angle ) * this.speed;this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );if( this.distanceTraveled >= this.distanceToTarget ) {createParticles( this.tx, this.ty );fireworks.splice( index, 1 );} else {this.x += vx;this.y += vy;}
}Firework.prototype.draw = function() {ctx.beginPath();ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );ctx.lineTo( this.x, this.y );ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';ctx.stroke();ctx.beginPath();ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );ctx.stroke();
}function Particle( x, y ) {this.x = x;this.y = y;this.coordinates = [];this.coordinateCount = 5;while( this.coordinateCount-- ) {this.coordinates.push( [ this.x, this.y ] );}this.angle = random( 0, Math.PI * 2 );this.speed = random( 1, 10 );this.friction = 0.95;this.gravity = 1;this.hue = random( hue - 20, hue + 20 );this.brightness = random( 50, 80 );this.alpha = 1;this.decay = random( 0.015, 0.03 );
}Particle.prototype.update = function( index ) {this.coordinates.pop();this.coordinates.unshift( [ this.x, this.y ] );this.speed *= this.friction;this.x += Math.cos( this.angle ) * this.speed;this.y += Math.sin( this.angle ) * this.speed + this.gravity;this.alpha -= this.decay;if( this.alpha <= this.decay ) {particles.splice( index, 1 );}
}Particle.prototype.draw = function() {ctx. beginPath();ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );ctx.lineTo( this.x, this.y );ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';ctx.stroke();
}function createParticles( x, y ) {var particleCount = 30;while( particleCount-- ) {particles.push( new Particle( x, y ) );}
}function loop() {requestAnimFrame( loop );hue += 0.5;ctx.globalCompositeOperation = 'destination-out';ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';ctx.fillRect( 0, 0, cw, ch );ctx.globalCompositeOperation = 'lighter';var i = fireworks.length;while( i-- ) {fireworks[ i ].draw();fireworks[ i ].update( i );}var i = particles.length;while( i-- ) {particles[ i ].draw();particles[ i ].update( i );}if( timerTick >= timerTotal ) {if( !mousedown ) {fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );timerTick = 0;}} else {timerTick++;}if( limiterTick >= limiterTotal ) {if( mousedown ) {fireworks.push( new Firework( cw / 2, ch, mx, my ) );limiterTick = 0;}} else {limiterTick++;}
}canvas.addEventListener( 'mousemove', function( e ) {mx = e.pageX - canvas.offsetLeft;my = e.pageY - canvas.offsetTop;
});canvas.addEventListener( 'mousedown', function( e ) {e.preventDefault();mousedown = true;
});canvas.addEventListener( 'mouseup', function( e ) {e.preventDefault();mousedown = false;
});window.onload = loop;
</script><audio autoplay="autoplay" loop="loop" preload="auto" src="http://www.17sucai.com/preview/3630/2013-06-27/ruguomeiyouni.mp3" type="audio/wav"></audio></body>
</html>

🏠CSS样式代码

.velas-1:after,
.velas-1:before {background: rgba(255, 0, 0, 0.4);content: "";position: absolute;width: 100%;height: 2.22222222px;
}.velas-1:after {top: 25%;left: 0;
}.velas-1:before {top: 45%;left: 0;
}.velas1:after,
.velas1:before {background: rgba(255, 0, 0, 0.4);content: "";position: absolute;width: 100%;height: 2.22222222px;
}.velas1:after {top: 25%;left: 0;
}.velas1:before {top: 45%;left: 0;
}.velas-2:after,
.velas-2:before {background: rgba(255, 0, 0, 0.4);content: "";position: absolute;width: 100%;height: 2.22222222px;
}.velas-2:after {top: 25%;left: 0;
}.velas-2:before {top: 45%;left: 0;
}.velas2:after,
.velas2:before {background: rgba(255, 0, 0, 0.4);content: "";position: absolute;width: 100%;height: 2.22222222px;
}.velas2:after {top: 25%;left: 0;
}.velas2:before {top: 45%;left: 0;
}.velas-3:after,
.velas-3:before {background: rgba(255, 0, 0, 0.4);content: "";position: absolute;width: 100%;height: 2.22222222px;
}.velas-3:after {top: 25%;left: 0;
}.velas-3:before {top: 45%;left: 0;
}.velas3:after,
.velas3:before {background: rgba(255, 0, 0, 0.4);content: "";position: absolute;width: 100%;height: 2.22222222px;
}.velas3:after {top: 25%;left: 0;
}.velas3:before {top: 45%;left: 0;
}.velas-4:after,
.velas-4:before {background: rgba(255, 0, 0, 0.4);content: "";position: absolute;width: 100%;height: 2.22222222px;
}.velas-4:after {top: 25%;left: 0;
}.velas-4:before {top: 45%;left: 0;
}.velas4:after,
.velas4:before {background: rgba(255, 0, 0, 0.4);content: "";position: absolute;width: 100%;height: 2.22222222px;
}.velas4:after {top: 25%;left: 0;
}.velas4:before {top: 45%;left: 0;
}.velas-5:after,
.velas-5:before {background: rgba(255, 0, 0, 0.4);content: "";position: absolute;width: 100%;height: 2.22222222px;
}.velas-5:after {top: 25%;left: 0;
}.velas-5:before {top: 45%;left: 0;
}.velas5:after,
.velas5:before {background: rgba(255, 0, 0, 0.4);content: "";position: absolute;width: 100%;height: 2.22222222px;
}.velas5:after {top: 25%;left: 0;
}.velas5:before {top: 45%;left: 0;
}.fuego {border-radius: 100%;position: absolute;top: -20px;left: 50%;margin-left: -2.2px;width: 6.66666667px;height: 18px;
}.fuego:nth-child(1) {-webkit-animation: fuego 2s 6.5s infinite;animation: fuego 2s 6.5s infinite;
}.fuego:nth-child(2) {-webkit-animation: fuego 1.5s 6.5s infinite;animation: fuego 1.5s 6.5s infinite;
}.fuego:nth-child(3) {-webkit-animation: fuego 1s 6.5s infinite;animation: fuego 1s 6.5s infinite;
}.fuego:nth-child(4) {-webkit-animation: fuego 0.5s 6.5s infinite;animation: fuego 0.5s 6.5s infinite;
}.fuego:nth-child(5) {-webkit-animation: fuego 0.2s 6.5s infinite;animation: fuego 0.2s 6.5s infinite;
}@-webkit-keyframes fuego {0%, 100% {background: rgba(254, 248, 97, 0.5);-webkit-box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);-webkit-transform: translateY(0) scale(1);transform: translateY(0) scale(1);}50% {background: rgba(255, 50, 0, 0.1);-webkit-box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);-webkit-transform: translateY(-20px) scale(0);transform: translateY(-20px) scale(0);}
}@keyframes fuego {0%, 100% {background: rgba(254, 248, 97, 0.5);-webkit-box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);-webkit-transform: translateY(0) scale(1);transform: translateY(0) scale(1);}50% {background: rgba(255, 50, 0, 0.1);-webkit-box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);-webkit-transform: translateY(-20px) scale(0);transform: translateY(-20px) scale(0);}
}@-webkit-keyframes in {to {-webkit-transform: translateY(0);transform: translateY(0);}
}@keyframes in {to {-webkit-transform: translateY(0);transform: translateY(0);}
}