HTML5七夕情人节表白网页制作【html5+canvas全屏的520爱心表白网页代码】HTML+CSS+JavaScript_html5模板爱心-程序员宅基地

技术标签： HTML5七夕情人节网页源码 html5 html javascript

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。

文章目录

一、网页介绍
一、网页效果
二、代码展示
- 1.HTML代码
三、精彩专栏

一、网页介绍

1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用

2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

一、网页效果

在这里插入图片描述

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>爱心</title>
	<style>
		*{
      margin:0; padding:0;}
		body{
       background-color: #1E1E1E; 		}
	</style>
</head>
<body>

	<canvas id="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 = new Image();
		heartImage.src = 'img/heart.svg';
		var num = 100;

		init();

		window.addEventListener('resize', function(){
      
			 wW = window.innerWidth;
			 wH = window.innerHeight;
		});
		// 初始化画布大小
		function init(){
      
			canvas.width = wW;
			canvas.height = wH;
			for(var i = 0; i < num; i++){
      
				hearts.push(new Heart(i%5));
			}
			requestAnimationFrame(render);
		}

		function getColor(){
      
			var val = Math.random() * 10;
			if(val > 0 && val <= 1){
      
				return '#00f';
			} else if(val > 1 && val <= 2){
      
				return '#f00';
			} else if(val > 2 && val <= 3){
      
				return '#0f0';
			} else if(val > 3 && val <= 4){
      
				return '#368';
			} else if(val > 4 && val <= 5){
      
				return '#666';
			} else if(val > 5 && val <= 6){
      
				return '#333';
			} else if(val > 6 && val <= 7){
      
				return '#f50';
			} else if(val > 7 && val <= 8){
      
				return '#e96d5b';
			} else if(val > 8 && val <= 9){
      
				return '#5be9e9';
			} else {
      
				return '#d41d50';
			}
		}

		function getText(){
      
			var val = Math.random() * 10;
			if(val > 1 && val <= 3){
      
				return '爱你一辈子';
			} else if(val > 3 && val <= 5){
      
				return '感谢你';
			} else if(val > 5 && val <= 8){
      
				return '喜欢你';
			} else{
      
				return 'I Love You';
			}
		}

		function Heart(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.02
			this.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;
			}
		}

		function render(){
      
			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>

三、精彩专栏

看到这里了就【点赞，关注，收藏】三连支持下吧，你的支持是我创作的动力。

本文链接：https://blog.csdn.net/bigwhiteshark/article/details/125911776

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

解决electron+vue项目起始加载慢的问题_electron vue项目打开慢-程序员宅基地

文章浏览阅读461次。_electron vue项目打开慢

linux下编译GDAL外加扩展格式支持（五）--完-程序员宅基地

文章浏览阅读229次。接1、2、3、4篇。10、安装mysql支持安装fedora15或者16系统时若选择安装mysql数据库，则必须自行安装mysql开发包。因为自带默认数据库不会安装这个包。否则会遇到mysql错误：ogr_mysql.h:34:23: fatal error: my_global.h: No such file or directory#问题原因：找不到mysql头文件..._linux gdal netcdf5

Linux tc qdisc 模拟网络丢包延时-程序员宅基地

文章浏览阅读1.2k次。Linux tc qdisc 模拟网络丢包延时_tc qdisc

linux64bit 安装 jdk 1.7-程序员宅基地

文章浏览阅读336次。linux64bit 安装 jdk 1.7下载地址： https://edelivery.oracle.com/otn-pub/java/jdk/7u21-b11/jdk-7u21-linux-x64.rpm0. 卸载rpm版的jdk： #rpm -qa|grep jdk 显示：jdk-1.6.0_10-fcs 卸载：#rpm -e --nodep..._liunx64位得jdk1.7

【Linux笔记】-----Nginx/LVS/HAProxy负载均衡的优缺点_中间件应用场景nginx lvs proxy-程序员宅基地

文章浏览阅读552次。开始听到负载均衡的时候，我第一反应想到的是链路负载均衡，在此之前主要是在学习网络方面知识，像在NA、NP阶段实验做链路负载均衡时常会遇到，后来还接触到SLB负载分担技术，这都是在链路基础上实现的。其实负载均衡可以分为硬件实现负载均衡和软件实现负载均衡。硬件实现负载均衡：常见F5和Array负载均衡器，配套专业维护服务，但是成本昂贵。软件实现负载均衡：常见开源免费的负载均衡软件有Ngin..._中间件应用场景nginx lvs proxy

多维时序 | MATLAB实现CNN-LSTM多变量时序预测_cnn可以进行多步预测-程序员宅基地

文章浏览阅读4.7k次。多维时序 | MATLAB实现CNN-LSTM多变量时序预测目录多维时序 | MATLAB实现CNN-LSTM多变量多步预测基本介绍模型特点程序设计学习总结参考资料基本介绍本次运行测试环境MATLAB2020b，MATLAB实现CNN-LSTM多变量多步预测。模型特点深度学习使用分布式的分层特征表示方法自动提取数据中的从最低层到最高层固有的抽象特征和隐藏不变结构. 为了充分利用单个模型的优点并提高预测性能, 现已提出了许多组合模型。CNN 是多层前馈神经网络, 已被证明在提取隐藏_cnn可以进行多步预测