HTML5七夕情人节表白网页制作【原生JS制作爱心表白代码】HTML CSS JavaScript

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

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

文章目录

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

一、网页介绍

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

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

一、网页效果

在这里插入图片描述

二、代码展示

1.HTML代码

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

  
<html lang="en">
<head>
<meta charset="UTF-8">
<title>心心-样例图</title>
 
<link href="favicon.ico" rel="shortcut icon" class="icon-love" type="images/x-ico">
 
<link rel="stylesheet" href="css/love.css">
 
</head>
<body>
 
<div class="container" onselectstart="return false;" unselectable="on" style="-moz-user-select:none;">
 
    <div class="body_left">
        <img src="images/biubiubiu.gif" alt="" ondragstart='return false;'>
    </div>
 
    <div class="body_center love">
        <div class="block">
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div3"></div>
            <div class="div4"></div>
        </div>
    </div>
 
</div>
 
<div class="footer">
    <div class="border">
        <div class="border-top"></div>
        <div class="border-bottom"></div>
    </div>
 
</div>
 
<script type="text/javascript" src="js/love.js"></script>
 
</body>
</html>
 
 
 复制

2.CSS代码

  
 
* {
    margin: 0;
    padding: 0;
    border: 0;
}
.icon-love {
    width: 400px;
}
html, body {
    width: 100%;
    height: 100%;
}
 
body {
    /*background-color: skyblue;*/
    overflow: hidden;   /*隐藏超出的部分*/
}
 
.container {
    width: 100%;
    height: 100%;
    position: relative;
}
 
/*---------------------- body_left -------------------------*/
.body_left {
    width: 300px;
    height: 300px;
    left: 0;
    bottom: 110px;
    position: absolute;
    z-index: 98;
 
}
 
/*---------------------- body_left -------------------------*/
 
/*---------------------- body_center -------------------------*/
.container .love {
    width: 520px; /* 13 * 40 */
    height: 440px; /* 11 * 40 */
    left: 50%;
    top: 50%;
    position: absolute;
    margin: -260px 0 0 -220px;
    /*background-color: gray;*/
}
 
.love .block {
    right: 0;
    position: absolute;
    visibility: hidden; /*未开始升空动画前隐藏*/
    background-color: yellow;
}
 
.love .block div {
    width: 40px;
    height: 40px;
    position: absolute;
    background: url("../images/heart.png") no-repeat;
    background-size: contain;
    /*background-color: #c40908;*/
    /*border: 1px solid silver;*/
    box-sizing: border-box;
}
 
 
/*---------------------- body_center -------------------------*/
 
/*---------------------- footer -------------------------*/
@keyframes border {
    0% {
        width: 0;
    }
    5% {
        width: 5%;
    }
    10% {
        width: 10%;
    }
    15% {
        width: 15%;
    }
    20% {
        width: 20%;
    }
    25% {
        width: 25%;
    }
    30% {
        width: 30%;
    }
    35% {
        width: 35%;
    }
    40% {
        width: 40%;
    }
    45% {
        width: 45%;
    }
    50% {
        width: 50%;
    }
    55% {
        width: 55%;
    }
    60% {
        width: 60%;
    }
    65% {
        width: 65%;
    }
    70% {
        width: 70%;
    }
    75% {
        width: 75%;
    }
    80% {
        width: 80%;
    }
    85% {
        width: 85%;
    }
    90% {
        width: 90%;
    }
    95% {
        width: 95%;
    }
    100% {
        width: 100%;
    }
 
}
.footer {
    bottom: 30px;
    position: relative;
    z-index: 99;
}
.footer .border .border-top {
    /*width: 0;*/
    /*display: inline-block;*/
    border-top: 3px solid black;
    transform-origin: left center;
    -webkit-animation: border 312 linear;
    -o-animation: border 12s linear;
    animation: border 12s linear;
    animation-fill-mode : both;
    /*border-bottom: none;*/
}
 
.footer .border .border-bottom {
    /*width: 0;*/
    /*display: inline-block;*/
    float: right;
    border-top: 3px solid red;
    transform-origin: right center;
    -webkit-animation: border 7s linear 12s;
    -o-animation: border 7s linear 12s;
    animation: border 7s linear 12s;
    animation-fill-mode : both;
    /*border-bottom: none;*/
}
 
.footer .copyright {
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: -30px;
    text-align: center;
    /*background-color: gray;*/
 
}
 
.copyright div {
    width: 30%;
    line-height: 30px;
    display: inline-block;
}
 
.copyright div span {
    color: dimgray;
}
 
/*---------------------- footer -------------------------*/
 
 复制

三、精彩专栏

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

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

HTML5七夕情人节表白网页制作【原生JS制作爱心表白代码】HTML CSS JavaScript

文章目录

一、网页介绍

一、网页效果

二、代码展示

1.HTML代码

2.CSS代码

三、精彩专栏

解决VUE3 Vite打包后动态图片资源不显示问题

Vue 3 项目中导入外部的＜link＞和＜script＞资源

Vue将中英文本base64编码及解码

Vue获取url上的参数

vue省市区三级联动选择器

eslint prettier vue3格式化

Vue Router 进阶

Vscode的vue项目中下滑红线报错问题

JavaScript与JQuery的区别（超详细）

jQuery：将字符串转换为数组

前端哥

C#解析JSON的常用库--Newtonsoft.Json

jsonfield 项目常见问题解决方案

【SpringMVC】_SpringMVC项目返回HTML与JSON

BugJson因为json格式问题OOM怎么办

python 解读JSON文件，一文搞懂！

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

开源项目“Pretty JSON”安装与配置完全指南

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000


	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>心心-样例图</title>

	<link href="favicon.ico" rel="shortcut icon" class="icon-love" type="images/x-ico">

	<link rel="stylesheet" href="css/love.css">

	</head>
	<body>

	<div class="container" onselectstart="return false;" unselectable="on" style="-moz-user-select:none;">

	<div class="body_left">
	<img src="images/biubiubiu.gif" alt="" ondragstart='return false;'>
	</div>

	<div class="body_center love">
	<div class="block">
	<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>
	<div class="div4"></div>
	</div>
	</div>

	</div>

	<div class="footer">
	<div class="border">
	<div class="border-top"></div>
	<div class="border-bottom"></div>
	</div>

	</div>

	<script type="text/javascript" src="js/love.js"></script>

	</body>
	</html>



	* {
	margin: 0;
	padding: 0;
	border: 0;
	}
	.icon-love {
	width: 400px;
	}
	html, body {
	width: 100%;
	height: 100%;
	}

	body {
	/background-color: skyblue;/
	overflow: hidden; /隐藏超出的部分/
	}

	.container {
	width: 100%;
	height: 100%;
	position: relative;
	}

	/---------------------- body_left -------------------------/
	.body_left {
	width: 300px;
	height: 300px;
	left: 0;
	bottom: 110px;
	position: absolute;
	z-index: 98;

	}

	/---------------------- body_left -------------------------/

	/---------------------- body_center -------------------------/
	.container .love {
	width: 520px; /* 13 * 40 */
	height: 440px; /* 11 * 40 */
	left: 50%;
	top: 50%;
	position: absolute;
	margin: -260px 0 0 -220px;
	/background-color: gray;/
	}

	.love .block {
	right: 0;
	position: absolute;
	visibility: hidden; /未开始升空动画前隐藏/
	background-color: yellow;
	}

	.love .block div {
	width: 40px;
	height: 40px;
	position: absolute;
	background: url("../images/heart.png") no-repeat;
	background-size: contain;
	/background-color: #c40908;/
	/border: 1px solid silver;/
	box-sizing: border-box;
	}


	/---------------------- body_center -------------------------/

	/---------------------- footer -------------------------/
	@keyframes border {
	0% {
	width: 0;
	}
	5% {
	width: 5%;
	}
	10% {
	width: 10%;
	}
	15% {
	width: 15%;
	}
	20% {
	width: 20%;
	}
	25% {
	width: 25%;
	}
	30% {
	width: 30%;
	}
	35% {
	width: 35%;
	}
	40% {
	width: 40%;
	}
	45% {
	width: 45%;
	}
	50% {
	width: 50%;
	}
	55% {
	width: 55%;
	}
	60% {
	width: 60%;
	}
	65% {
	width: 65%;
	}
	70% {
	width: 70%;
	}
	75% {
	width: 75%;
	}
	80% {
	width: 80%;
	}
	85% {
	width: 85%;
	}
	90% {
	width: 90%;
	}
	95% {
	width: 95%;
	}
	100% {
	width: 100%;
	}

	}
	.footer {
	bottom: 30px;
	position: relative;
	z-index: 99;
	}
	.footer .border .border-top {
	/width: 0;/
	/display: inline-block;/
	border-top: 3px solid black;
	transform-origin: left center;
	-webkit-animation: border 312 linear;
	-o-animation: border 12s linear;
	animation: border 12s linear;
	animation-fill-mode : both;
	/border-bottom: none;/
	}

	.footer .border .border-bottom {
	/width: 0;/
	/display: inline-block;/
	float: right;
	border-top: 3px solid red;
	transform-origin: right center;
	-webkit-animation: border 7s linear 12s;
	-o-animation: border 7s linear 12s;
	animation: border 7s linear 12s;
	animation-fill-mode : both;
	/border-bottom: none;/
	}

	.footer .copyright {
	width: 100%;
	height: 30px;
	position: absolute;
	bottom: -30px;
	text-align: center;
	/background-color: gray;/

	}

	.copyright div {
	width: 30%;
	line-height: 30px;
	display: inline-block;
	}

	.copyright div span {
	color: dimgray;
	}

	/---------------------- footer -------------------------/

HTML5七夕情人节表白网页制作【原生JS制作爱心表白代码】HTML CSS JavaScript

文章目录

一、网页介绍

一、网页效果

二、代码展示

1.HTML代码

2.CSS代码

三、精彩专栏

微信扫一扫：分享