这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。
文章目录
一、网页介绍一、网页效果二、代码展示1.HTML代码2.CSS代码 三、精彩专栏一、网页介绍
1 网页简介：基于HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。
一、网页效果
二、代码展示
1.HTML代码
代码如下（示例）：以下仅展示部分代码供参考~
<html><head><meta charset="utf-8"><link rel="stylesheet" href="wedding.css"><title>模仿CSS动画的求婚小动画</title></head><body><div class="w-t"><div class="w-t-m">亲爱的，嫁给我好吗？</div><img src="png/boom.png" alt="" class="boom1"><img src="png/boom.png" alt="" class="boom2"><img src="png/boom.png" alt="" class="boom3"></div><div class="w-p"><div class="w-m"><img src="png/man.png" alt=""></div><div class="w-w"><img src="png/woman.png" alt=""></div><div class="w-f"><img src="png/flower.png" alt=""></div></div><div class="w-fls"><img src="png/flowers1.png" alt=""><img src="png/flowers2.png" alt=""><img src="png/flowers1.png" alt=""><img src="png/flowers2.png" alt=""><img src="png/flowers1.png" alt=""><img src="png/flowers2.png" alt=""></div><div class="w-fls w-2"><img src="png/flowers1.png" alt=""><img src="png/flowers2.png" alt=""><img src="png/flowers1.png" alt=""><img src="png/flowers2.png" alt=""><img src="png/flowers1.png" alt=""><img src="png/flowers2.png" alt=""></div></body></html>
2.CSS代码
/*top 烟花字体 */.w-t{margin: 100px auto;width: 500px;}.w-t img{opacity: 0;animation: bloom 2s ease 1.2s infinite;}.w-t img.boom2{float: right;animation: bloom 2s ease 1.5s infinite;}.w-t img.boom3{position: absolute;margin-top: 40px;animation: bloom 2s ease 1.4s infinite;}@keyframes bloom{0% {transform: scale(0,0);}100% {opacity: 1;transform: scale(1,1);}}.w-t-m{position: absolute;left: 50%;z-index: 10;line-height: 80px;color: #ff720a;letter-spacing: 5px;opacity: 0;animation: titleBloom 1s linear 1s both;font-size: 26px;margin-left: -125px;}@keyframes titleBloom{0% {transform: translate(-50px);}100% {opacity: 1;transform: translate(0);}}/*人物类 */.w-p{margin: -50px auto;width: 1000px;overflow: hidden;}.w-m{float: left;width: 50%;}.w-m img{margin-right: 0;float: right;margin-top: 60px;animation: toWoman 0.5s ease .5s both;}@keyframes toWoman{0%{opacity: 0;transform: translate(-200px);}100%{opacity: 1;transform: translate(0);}}.w-w{float: right;width: 50%;}.w-w img{margin-left: 0;float: left;animation: showW 0.8s ease 0s both;}@keyframes showW{0%{opacity: 0;}100%{opacity: 1;}}.w-f{position: absolute;z-index: 20;left: 50%;margin-left: -30px;margin-top: 75px;}.w-f img{width: 60px;animation: show 0.4s ease 1s both;}@keyframes show{0%{opacity: 0;transform: scale(0.1,0.1);}100%{opacity: 1;transform: scale(1,1);}}.w-p:after{clear:both;clear:both;content:'.';display:block;height:0;visibility:hidden;overflow:hidden;}/*flowers*/.w-fls{width: 820px;margin: 0 auto;}.w-fls img{height: 120px;z-index: 400;animation: showFlows 0.4s ease 2.3s both;}@keyframes showFlows{0%{opacity: 0;transform: translate(0,200px);}100%{opacity: 1;transform: translate(0);}}.w-2{margin-top: -130px;padding-left: 100px;}.w-2 img{animation: showFlows 0.4s ease 2.7s both;}
三、精彩专栏
看到这里了就 【点赞，关注，收藏】 三连 支持下吧，你的支持是我创作的动力。
