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

最新推荐文章于 2024-05-21 17:25:36 发布
最新推荐文章于 2024-05-21 17:25:36 发布
阅读量173 收藏
点赞数
分类专栏： web前端 文章标签： 网页设计与制作 html网页模版 web前端 网页作业 html静态网页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73081085/article/details/127139984
版权

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

📂文章目录

二、📚网站介绍

📒网站文件方面：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模板 、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

web学生网页设计
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
爱心版-表白源代码html动态图
04-01
爱心版-表白源代码html动态图 效果演示http://www.lmtaolu.cn/biaobai/aixin/
HTML5七夕情人节表白结婚邀请函网页制作(HTML+CSS+JavaScript)
HTML网页设计 专注大学生网页设计
09-25 6755
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）📜html文件包含：其中index.html是首页、其他html为二级页面；（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3）📄 js文件包含：页面炫酷效果实现。
5款网页表白代码（附带源码）
最新发布
孤客科技
05-21 1330
大部分人都有喜欢的人，学会这些表白代码，下次表白你肯定会成功。希望自己也有个女朋友，哈哈开玩笑了 部分代码 2.玫瑰花 部分源码 3.爱心树 部分源码 4.可爱的表白网页（二次元） 部分源码 5.biu爱心表白 部分源码 领取源码 5款网页表白代码领取地址：https://www.123pan.com/s/ji8kjv-vOPU3.html 提取码:关注微信公众号祖龙科技工作室回复表白代码即可获取
html表白代码
酷酷的馫博客
11-26 2万+
html表白代码
马上七夕到了，用各种编程语言实现10种浪漫表白方式
Web3 & Basketball
08-19 1万+
在七夕节这个充满爱意的日子里，用编程语言编写一些表白代码是个非常有趣的想法。以下是使用 各种编程语言Python、Java、JavaScript、H5等编写的 10 种简单表白代码示例，以下只是抛砖引玉，还需要你用心修改，对方一定能理解你的真心。
HTML浪漫动态表白代码+音乐(附源码)（一）
Mr_WoLong
02-09 2万+
HTML浪漫动态表白代码+音乐(附源码)
HTML 程序员表白源码
04-22
程序员表白源码
程序员表白代码\爱的时间 html+js
01-16
程序员表白代码\爱的时间 html+js 程序员表白代码\爱的时间 html+js 程序员表白代码\爱的时间 html+js 程序员表白代码\爱的时间 html+js程序员表白代码\爱的时间 html+js 程序员表白代码\爱的时间 html+js程序员表白...
程序员浪漫-浪漫爱心代码（附赠源码html）
12-20
程序员—专属浪漫爱心代码 胆大心细脸皮厚是表白的不二法门。第一次表白表示被拒绝了后，通常后来慢慢相处再表白就成功了。 要耐心，要脸皮厚，要细心。不要怕你的主动会带来她的反感，你不主动，她也不主动，也就...
程序员表白专用HTML5网页代码
04-20
程序猿表白专用的HTML5动画特效网页。左侧的文字是类似打字效果的动画形式，右侧是恋爱计时。 因IE9以前的浏览器不支持HTML5,所以你在查看本效果的时候，最好使用火狐Firefox浏览器或Chrome浏览器。
情人节程序员用HTML网页表白【生日快乐动画】HTML+CSS+JavaScript HTML5七夕情人节表白网页源码
08-10
- **表白网页**: 适合情人节、生日等特殊日子向心爱的人表达情感。 ### 知识点六：扩展功能与特性 #### 6.1 动态元素加入 - **视频、音乐、Flash**: 添加多媒体元素以增强用户体验。 - **JavaScript**: 实现动态...
十几款拿来就能用的炫酷表白代码
wangyuxiang946的博客
08-27 4万+
「作者主页」：士别三日wyx 「作者简介」：CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」：小白零基础《Python入门到精通》 表白代码1、坐我女朋友好吗，不同意就关机.vbs2、坐我女朋友好吗，不同意关不掉.vbs3、动态粒子效果.html4、爱心动态.html5、爱心跳动.html6、弹窗表白.py7、一行代码实现心形.py8、一箭穿心.py9、爱心.py10、爱心代码.py11、爱心发射.py12、玫瑰花.py粉丝福利 1、坐我女朋友好吗，不同意就关机
最强Python表白代码来了
xiangxue888的博客
06-01 6万+
最强Python表白代码来了
html爱心表白代码（最全）
热门推荐
皮小孩的博客
12-20 47万+
皮小孩的个人主页（8.1更新）需要本文前12个表白代码可以进链接扫码下载—>>>网页爱心表白代码大全扫码支付成功后会得到百度网盘链接和提取码，里面有本文的前12个表白代码，每个代码都有详细的使用说明，教你怎么修改文字、照片、背景音乐等。购买过程中有问题请及时联系qq1975728171.（比如：购买链接失效、购买后没有百度网盘链接、无法使用支付宝支付等等问题）对象生日快乐祝福代码—>>>html生日快乐代码和ta在一起100天纪念代码—>>>相爱xxx天纪念html代码。
html爱心表白代码（最全html表白代码大全可复制）
dhyuan_88的博客
12-15 1万+
html表白特效源代码《浪漫的html表白源代码，html表白网页制作源码》html表白代码大全可复制，浪漫的html表白特效网页制作源代码。html爱心表白代码（最全html表白代码大全可复制）html爱心表白代码（最全html表白代码大全可复制）恋爱表白神器-表白源代码html动态图。程序员a版-表白源代码html动态图。程序员b版-表白源代码html动态图。loves版-表白源码html动态图。520版-表白源代码html动态图。爱心版-表白源代码html动态图。唯美版-表白源码html动态图。
HTML爱心表白代码，亲测有效，独一无二！福利来啦！
chenzhi0122的博客
06-16 8305
这次我们来分享跳动的爱心的代码，网上有很多，但是个人觉得我这个比较温馨一点，背景也好看。如果觉得文章不错，还请一键三联，不定时发布各种全免费的独一无二的代码！发福利啦~小编最近搜集了好几个表白代码，感兴趣可以点进主页看看哟~
HTML表白代码
m0_63309946的博客
07-23 308
【代码】HTML表白代码。
撩妹/撩仔代码
Null - 滨
02-14 3269
撩妹/撩仔代码 @Null - 滨 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" type="image/x-icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA2klEQVQ4T62TUQ6CMAyG2/GCByA
html情侣表白代码，自动打字、动态爱心、图片旋转木马特效
玖疯子
12-05 7541
给男朋友准备的520礼物，他觉得太尴尬了，于是我特地把这个项目开源，让大家一起感受一下男票的尴尬，哈哈哈哈哈哈我好恶趣味。话不多说上代码html部分： ： 二、图片旋转木马特效html部分： 三、雪花特效html部分： 这个部分可以需要在images文件夹里插入雪花图片，图片如下自取（纯白图片）： 除此之外还推荐大家在网页里插入audio标签音频作为bgm，这样的表白代码就更有氛围感了。ps:部分代码非原创，侵删。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web学生网页设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值