教你如何制作浪漫的表白网站 七夕情人节表白网页在线制作(多种款式)

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

📂文章目录

二、📚网站介绍三、🔗网站效果▶️1.视频演示🧩 2.图片演示

四、💒 网站代码🧱HTML结构代码🏠CSS样式代码

五、🎁更多源码

二、📚网站介绍

📒网站文件方面：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.视频演示

109 告白气球，飞入我的心扉 表白网页

🧩 2.图片演示

四、💒 网站代码

🧱HTML结构代码

Your browser isn't invited for super fun audio time.

🏠CSS样式代码

body{

background: #fe909b;

}

@keyframes ani-pBg1cNNqT-an-obj-6-0 {

0% {

-webkit-transform: translate3d(-48px, -137px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(42.9deg) scale3d(0.2, 0.2, 1);

-webkit-animation-timing-function: linear;

}

100% {

-webkit-transform: translate3d(-55px, -281px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(42.9deg) scale3d(0.08000000000000002, 0.08000000000000002, 1);

-webkit-animation-timing-function: linear;

}

}

@keyframes ani-pBg1cNNqT-an-obj-11-0 {

0% {

-webkit-transform: translate3d(108px, 38px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(45deg) scale3d(-0.23999999999999996, 0.26, 1);

-webkit-animation-timing-function: linear;

opacity: 1;

}

100% {

-webkit-transform: translate3d(218px, 7px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(45deg) scale3d(-0.09599999999999999, 0.10400000000000001, 1);

-webkit-animation-timing-function: linear;

opacity: 0;

}

}

@keyframes ani-pBg1cNNqT-an-obj-10-0 {

0% {

-webkit-transform: translate3d(14px, -142px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(26.3deg) scale3d(0.26, 0.26, 1);

-webkit-animation-timing-function: linear;

opacity: 1;

}

100% {

-webkit-transform: translate3d(38px, -268px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(26.3deg) scale3d(0.078, 0.078, 1);

-webkit-animation-timing-function: linear;

opacity: 0;

}

}

@keyframes ani-pBg1cNNqT-an-obj-9-0 {

0% {

-webkit-transform: translate3d(67px, -113px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(7.5deg) scale3d(0.17, 0.17, 1);

-webkit-animation-timing-function: linear;

opacity: 1;

}

100% {

-webkit-transform: translate3d(78px, -249px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(7.5deg) scale3d(0.068, 0.068, 1);

-webkit-animation-timing-function: linear;

opacity: 0.3;

}

}

@keyframes ani-pBg1cNNqT-an-obj-7-0 {

0% {

-webkit-transform: translate3d(-108px, -101px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(16.3deg) scale3d(-0.24, 0.25, 1);

-webkit-animation-timing-function: linear;

opacity: 1;

}

100% {

-webkit-transform: translate3d(-138px, -262px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(16.3deg) scale3d(-0.096, 0.1, 1);

-webkit-animation-timing-function: linear;

opacity: 0.2;

}

}

@keyframes ani-pBg1cNNqT-an-obj-8-0 {

0% {

-webkit-transform: translate3d(-34px, -148px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(11.8deg) scale3d(0.14, 0.14, 1);

-webkit-animation-timing-function: linear;

opacity: 1;

}

100% {

-webkit-transform: translate3d(-33px, -255px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(11.8deg) scale3d(0.042, 0.042, 1);

-webkit-animation-timing-function: linear;

opacity: 0.2;

}

}

@keyframes ani-pBg1cNNqT-an-obj-13-0 {

0% {

-webkit-transform: translate3d(85px, -105px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(38.2deg) scale3d(-0.23, 0.20653061224489797, 1);

-webkit-animation-timing-function: linear;

opacity: 1;

}

100% {

-webkit-transform: translate3d(185px, -176px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(38.2deg) scale3d(-0.069, 0.061959183673469385, 1);

-webkit-animation-timing-function: linear;

opacity: 0;

}

}

@keyframes ani-pBg1cNNqT-an-obj-12-0 {

0% {

-webkit-transform: translate3d(102px, -55px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(65.1deg) scale3d(0.17, 0.17, 1);

-webkit-animation-timing-function: linear;

opacity: 1;

}

100% {

-webkit-transform: translate3d(168px, -152px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(65.1deg) scale3d(0.051000000000000004, 0.051000000000000004, 1);

-webkit-animation-timing-function: linear;

opacity: 0;

}

}

@keyframes ani-pBg1cNNqT-an-obj-15-0 {

0% {

-webkit-transform: translate3d(-95px, -139px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(156.4deg) scale3d(-0.25, -0.25, 1);

-webkit-animation-timing-function: linear;

opacity: 1;

}

100% {

-webkit-transform: translate3d(-104px, -270px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(156.4deg) scale3d(-0.125, -0.125, 1);

-webkit-animation-timing-function: linear;

opacity: 0;

}

}

@keyframes ani-pBg1cNNqT-an-obj-14-0 {

0% {

-webkit-transform: translate3d(-129px, -120px, 0px) scale3d(-0.21103448275862072, 0.17, 1);

-webkit-animation-timing-function: linear;

opacity: 1;

}

100% {

-webkit-transform: translate3d(-153px, -221px, 0px) scale3d(-0.21103448275862072, 0.17, 1);

-webkit-animation-timing-function: linear;

opacity: 0;

}

}

@keyframes ani-pBg1cNNqT-an-obj-17-0 {

0% {

-webkit-transform: translate3d(-62px, -149px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(19.4deg) scale3d(-0.20869565217391306, 0.24, 1);

-webkit-animation-timing-function: linear;

opacity: 1;

}

100% {

-webkit-transform: translate3d(-12px, -289px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(19.4deg) scale3d(-0.06260869565217392, 0.072, 1);

-webkit-animation-timing-function: linear;

opacity: 0;

}

}

@keyframes ani-pBg1cNNqT-an-obj-16-0 {

0% {

-webkit-transform: translate3d(-24px, -138px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-0.8deg) scale3d(0.32, 0.32, 1);

-webkit-animation-timing-function: linear;

opacity: 1;

}

100% {

-webkit-transform: translate3d(12px, -243px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-0.8deg) scale3d(0.16, 0.16, 1);

-webkit-animation-timing-function: linear;

opacity: 0;

}

}

@keyframes ani-pBg1cNNqT-an-obj-19-0 {

0% {

-webkit-transform: translate3d(104px, -34px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(81.7deg) scale3d(-0.2836666666666667, 0.23, 1);

-webkit-animation-timing-function: linear;

opacity: 1;

}

100% {

-webkit-transform: translate3d(214px, -24px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(91.7deg) scale3d(-0.11346666666666667, 0.09200000000000001, 1);

-webkit-animation-timing-function: linear;

opacity: 0;

}

}

@keyframes ani-pBg1cNNqT-an-obj-18-0 {

0% {

-webkit-transform: translate3d(50px, -123px, 0px) scale3d(0.29, 0.29, 1);

-webkit-animation-timing-function: linear;

opacity: 1;

}

100% {

-webkit-transform: translate3d(121px, -264px, 0px) scale3d(0.0116, 0.0116, 1);

-webkit-animation-timing-function: linear;

opacity: 0;

}

}

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

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