HTML5七夕情人节表白网页制作【css求婚动画源码】HTML+CSS+JavaScript 程序员表白代码

article/2025/10/3 23:03:06

这是程序员表白系列中的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;
}