當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

html表白程序源码 html生日快乐网站制作 HTML生日快乐代码表白程序源码html 程序员表白代码html

發布時間：2023/12/15 HTML 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 html表白程序源码 html生日快乐网站制作 HTML生日快乐代码表白程序源码html 程序员表白代码html 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

? 精彩專欄推薦👇🏻👇🏻👇🏻
💂 作者主頁: 【進入主頁—🚀獲取更多源碼】
🎓 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);} }

五、🎁更多源碼

1.如果我的博客對你有幫助請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！

2.💗【👇🏻👇🏻👇🏻🉑關注我| 獲取更多源碼】帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板、大學生畢業HTML模板、等!

📣以上內容技術相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻

總結

以上是生活随笔為你收集整理的html表白程序源码 html生日快乐网站制作 HTML生日快乐代码表白程序源码html 程序员表白代码html的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。