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

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

2.CSS代码

/* 流星css */
:root {--primary-color: hsl(196, 78%, 61%);--secondary-color: hsl(217, 15%, 83%);--success-color: hsl(165, 58%, 55%);--info-color: hsl(214, 79%, 65%);--warning-color: hsl(43, 100%, 66%);--danger-color: hsl(354, 81%, 63%);--primary-color-darker: hsl(196, 68%, 54%);--secondary-color-darker: hsl(215, 13%, 70%);--success-color-darker: hsl(165, 55%, 48%);--info-color-darker: hsl(214, 68%, 58%);--warning-color-darker: hsl(39, 97%, 62%);--danger-color-darker: hsl(354, 67%, 56%);--primary-color-lighter: hsl(196, 78%, 81%);--secondary-color-lighter: hsl(214, 16%, 92%);--success-color-lighter: hsl(165, 58%, 75%);--info-color-lighter: hsl(214, 79%, 85%);--warning-color-lighter: hsl(43, 100%, 86%);--danger-color-lighter: hsl(354, 81%, 83%);--secondary-color-darkest: hsl(215, 11%, 30%);--secondary-color-lightest: hsl(220, 1%, 98%);
}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%);overflow: hidden;
}.stars {z-index: 9999;position: fixed;top: 0;left: 0;width: 100%;height: 120%;transform: rotate(-45deg);
}.star {--star-color: var(--primary-color);--star-tail-length: 6em;--star-tail-height: 2px;--star-width: calc(var(--star-tail-length) / 6);--fall-duration: 9s;--tail-fade-duration: var(--fall-duration);position: absolute;top: var(--top-offset);left: 0;width: var(--star-tail-length);height: var(--star-tail-height);color: var(--star-color);background: linear-gradient(45deg, currentColor, transparent);border-radius: 50%;filter: drop-shadow(0 0 6px currentColor);transform: translate3d(104em, 0, 0);animation: fall var(--fall-duration) var(--fall-delay) linear infinite,tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
}
@media screen and (max-width: 750px) {.star {animation: fall var(--fall-duration) var(--fall-delay) linear infinite;}
}
.star:nth-child(1) {--star-tail-length: 6.07em;--top-offset: 18.71vh;--fall-duration: 6.295s;--fall-delay: 8.613s;
}
.star:nth-child(2) {--star-tail-length: 5.87em;--top-offset: 91.61vh;--fall-duration: 6.744s;--fall-delay: 5.299s;
}
.star:nth-child(3) {--star-tail-length: 7.01em;--top-offset: 66.77vh;--fall-duration: 7.356s;--fall-delay: 8.793s;
}
.star:nth-child(4) {--star-tail-length: 5.54em;--top-offset: 3.44vh;--fall-duration: 11.193s;--fall-delay: 7.602s;
}
.star:nth-child(5) {--star-tail-length: 7.37em;--top-offset: 30.74vh;--fall-duration: 7.323s;--fall-delay: 5.879s;
}
.star:nth-child(6) {--star-tail-length: 5.74em;--top-offset: 96.44vh;--fall-duration: 6.375s;--fall-delay: 6.784s;
}
.star:nth-child(7) {--star-tail-length: 6.75em;--top-offset: 53.58vh;--fall-duration: 11.154s;--fall-delay: 2.304s;
}
.star:nth-child(8) {--star-tail-length: 6.93em;--top-offset: 45.4vh;--fall-duration: 9.916s;--fall-delay: 1.499s;
}
.star:nth-child(9) {--star-tail-length: 6.79em;--top-offset: 4.57vh;--fall-duration: 6.47s;--fall-delay: 3.746s;
}
.star:nth-child(10) {--star-tail-length: 7.16em;--top-offset: 87.24vh;--fall-duration: 10.807s;--fall-delay: 3.084s;
}
.star:nth-child(11) {--star-tail-length: 5.29em;--top-offset: 16.51vh;--fall-duration: 8.055s;--fall-delay: 1.882s;
}
.star:nth-child(12) {--star-tail-length: 5.48em;--top-offset: 88.17vh;--fall-duration: 6.439s;--fall-delay: 4.72s;
}
.star:nth-child(13) {--star-tail-length: 5.42em;--top-offset: 99.99vh;--fall-duration: 10.565s;--fall-delay: 9.969s;
}
.star:nth-child(14) {--star-tail-length: 6.45em;--top-offset: 66.41vh;--fall-duration: 6.242s;--fall-delay: 4.135s;
}
.star:nth-child(15) {--star-tail-length: 6.1em;--top-offset: 33.08vh;--fall-duration: 9.203s;--fall-delay: 5.222s;
}
.star:nth-child(16) {--star-tail-length: 5.31em;--top-offset: 71.71vh;--fall-duration: 8.738s;--fall-delay: 0.224s;
}
.star:nth-child(17) {--star-tail-length: 5.18em;--top-offset: 96.06vh;--fall-duration: 11.629s;--fall-delay: 4.021s;
}
.star:nth-child(18) {--star-tail-length: 6.82em;--top-offset: 79.65vh;--fall-duration: 6.07s;--fall-delay: 0.699s;
}
.star:nth-child(19) {--star-tail-length: 7.45em;--top-offset: 50.02vh;--fall-duration: 9.895s;--fall-delay: 5.542s;
}
.star:nth-child(20) {--star-tail-length: 5.29em;--top-offset: 81.84vh;--fall-duration: 6.928s;--fall-delay: 2.042s;
}
.star:nth-child(21) {--star-tail-length: 5.99em;--top-offset: 42.27vh;--fall-duration: 7.946s;--fall-delay: 4.317s;
}
.star:nth-child(22) {--star-tail-length: 6.49em;--top-offset: 0.55vh;--fall-duration: 10.794s;--fall-delay: 9.025s;
}
.star:nth-child(23) {--star-tail-length: 6.42em;--top-offset: 42vh;--fall-duration: 8.135s;--fall-delay: 6.336s;
}
.star:nth-child(24) {--star-tail-length: 5.07em;--top-offset: 56.93vh;--fall-duration: 11.157s;--fall-delay: 2.912s;
}
.star:nth-child(25) {--star-tail-length: 6.56em;--top-offset: 65.69vh;--fall-duration: 9.641s;--fall-delay: 0.982s;
}
.star:nth-child(26) {--star-tail-length: 6.5em;--top-offset: 80.77vh;--fall-duration: 6.756s;--fall-delay: 5.443s;
}
.star:nth-child(27) {--star-tail-length: 6.01em;--top-offset: 30.77vh;--fall-duration: 7.305s;--fall-delay: 8.435s;
}
.star:nth-child(28) {--star-tail-length: 6.74em;--top-offset: 57.09vh;--fall-duration: 10.082s;--fall-delay: 9.389s;
}
.star:nth-child(29) {--star-tail-length: 6.09em;--top-offset: 65.11vh;--fall-duration: 6.587s;--fall-delay: 6.4s;
}
.star:nth-child(30) {--star-tail-length: 7.49em;--top-offset: 92.88vh;--fall-duration: 10.762s;--fall-delay: 2.241s;
}
.star:nth-child(31) {--star-tail-length: 5.77em;--top-offset: 97.66vh;--fall-duration: 10.42s;--fall-delay: 4.185s;
}
.star:nth-child(32) {--star-tail-length: 7.1em;--top-offset: 48.23vh;--fall-duration: 9.418s;--fall-delay: 0.79s;
}
.star:nth-child(33) {--star-tail-length: 5.06em;--top-offset: 70.09vh;--fall-duration: 6.436s;--fall-delay: 2.047s;
}
.star:nth-child(34) {--star-tail-length: 5.35em;--top-offset: 47.6vh;--fall-duration: 8.384s;--fall-delay: 4.431s;
}
.star:nth-child(35) {--star-tail-length: 6.5em;--top-offset: 35.5vh;--fall-duration: 9.579s;--fall-delay: 2.685s;
}
.star:nth-child(36) {--star-tail-length: 5.31em;--top-offset: 78.83vh;--fall-duration: 10.381s;--fall-delay: 0.631s;
}
.star:nth-child(37) {--star-tail-length: 7.45em;--top-offset: 75.7vh;--fall-duration: 6.924s;--fall-delay: 6.499s;
}
.star:nth-child(38) {--star-tail-length: 6.71em;--top-offset: 50.78vh;--fall-duration: 8.385s;--fall-delay: 6.098s;
}
.star:nth-child(39) {--star-tail-length: 5.03em;--top-offset: 36.46vh;--fall-duration: 9.385s;--fall-delay: 6.252s;
}
.star:nth-child(40) {--star-tail-length: 5.58em;--top-offset: 86.88vh;--fall-duration: 7.07s;--fall-delay: 0.626s;
}
.star:nth-child(41) {--star-tail-length: 5.75em;--top-offset: 16.67vh;--fall-duration: 8.02s;--fall-delay: 1.497s;
}
.star:nth-child(42) {--star-tail-length: 7.08em;--top-offset: 56.93vh;--fall-duration: 9.208s;--fall-delay: 5.358s;
}
.star:nth-child(43) {--star-tail-length: 5.6em;--top-offset: 73.67vh;--fall-duration: 6.207s;--fall-delay: 3.243s;
}
.star:nth-child(44) {--star-tail-length: 5.45em;--top-offset: 25.2vh;--fall-duration: 10.599s;--fall-delay: 8.583s;
}
.star:nth-child(45) {--star-tail-length: 7.14em;--top-offset: 56.77vh;--fall-duration: 11.523s;--fall-delay: 9.923s;
}
.star:nth-child(46) {--star-tail-length: 5.22em;--top-offset: 10.01vh;--fall-duration: 8.072s;--fall-delay: 0.293s;
}
.star:nth-child(47) {--star-tail-length: 7.44em;--top-offset: 87.25vh;--fall-duration: 9.226s;--fall-delay: 2.065s;
}
.star:nth-child(48) {--star-tail-length: 7.43em;--top-offset: 68.32vh;--fall-duration: 11.421s;--fall-delay: 7.182s;
}
.star:nth-child(49) {--star-tail-length: 5.68em;--top-offset: 56.42vh;--fall-duration: 9.508s;--fall-delay: 7.669s;
}
.star:nth-child(50) {--star-tail-length: 5.37em;--top-offset: 93.45vh;--fall-duration: 10.222s;--fall-delay: 4.175s;
}
.star::before,
.star::after {position: absolute;content: "";top: 0;left: calc(var(--star-width) / -2);width: var(--star-width);height: 100%;background: linear-gradient(45deg, transparent, currentColor, transparent);border-radius: inherit;animation: blink 2s linear infinite;
}
.star::before {transform: rotate(45deg);
}
.star::after {transform: rotate(-45deg);
}@keyframes fall {to {transform: translate3d(-30em, 0, 0);}
}
@keyframes tail-fade {0%,50% {width: var(--star-tail-length);opacity: 1;}70%,80% {width: 0;opacity: 0.6;}100% {width: 0;opacity: 0;}
}
@keyframes blink {50% {opacity: 0.6;}
}

三、精彩专栏

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