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

文章目录

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

一、网页介绍

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

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

一、网页效果

二、代码展示

1.HTML代码

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

<html><head><meta charset="utf-8" /><scriptid="jqbb"src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><style type="text/css">@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css");@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");* {box-sizing: border-box;}body {background-color: #323975;color: #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;font-family: "Muli", sans-serif;height: 100vh;overflow: hidden;margin: 0;text-align: center;}.fa-snowflake {color: #fff;position: absolute;top: -20px;animation: fall linear forwards;}@keyframes fall {to {transform: translateY(105vh);}}.countdown-container {display: flex;}.time {display: flex;font-size: 1.2em;flex-direction: column;margin: 0 15px;}.time h1 {margin-bottom: 0;}.time small {color: #ccc;}/* SOCIAL PANEL CSS */.social-panel-container {position: fixed;right: 0;bottom: 80px;transform: translateX(100%);transition: transform 0.4s ease-in-out;}.social-panel-container.visible {transform: translateX(-10px);}.social-panel {background-color: #fff;border-radius: 16px;box-shadow: 0 16px 31px -17px rgba(0, 31, 97, 0.6);border: 5px solid #001f61;display: flex;flex-direction: column;justify-content: center;align-items: center;font-family: "Muli";position: relative;height: 169px;width: 370px;max-width: calc(100% - 10px);}.social-panel button.close-btn {border: 0;color: #97a5ce;cursor: pointer;font-size: 20px;position: absolute;top: 5px;right: 5px;}.social-panel button.close-btn:focus {outline: none;}.social-panel p {background-color: #001f61;border-radius: 0 0 10px 10px;color: #fff;font-size: 14px;line-height: 18px;padding: 2px 17px 6px;position: absolute;top: 0;left: 50%;margin: 0;transform: translateX(-50%);text-align: center;width: 235px;}.social-panel p i {margin: 0 5px;}.social-panel p a {color: #ff7500;text-decoration: none;}.social-panel h4 {margin: 20px 0;color: #97a5ce;font-family: "Muli";font-size: 14px;line-height: 18px;text-transform: uppercase;}.social-panel ul {display: flex;list-style-type: none;padding: 0;margin: 0;}.social-panel ul li {margin: 0 10px;}.social-panel ul li a {border: 1px solid #dce1f2;border-radius: 50%;color: #001f61;font-size: 20px;display: flex;justify-content: center;align-items: center;height: 50px;width: 50px;text-decoration: none;}.social-panel ul li a:hover {border-color: #ff6a00;box-shadow: 0 9px 12px -9px #ff6a00;}.floating-btn {border-radius: 26.5px;background-color: #001f61;border: 1px solid #001f61;box-shadow: 0 16px 22px -17px #03153b;color: #fff;cursor: pointer;font-size: 16px;line-height: 20px;padding: 12px 20px;position: fixed;bottom: 20px;right: 20px;z-index: 999;}.floating-btn:hover {background-color: #ffffff;color: #001f61;}.floating-btn:focus {outline: none;}.floating-text {background-color: #001f61;border-radius: 10px 10px 0 0;color: #fff;font-family: "Muli";padding: 7px 15px;position: fixed;bottom: 0;left: 50%;transform: translateX(-50%);text-align: center;z-index: 998;}.floating-text a {color: #ff7500;text-decoration: none;}@media screen and (max-width: 480px) {.social-panel-container.visible {transform: translateX(0px);}.floating-btn {right: 10px;}}</style></head><body><h1>新年快到了！</h1><div class="countdown-container"><div class="time"><h1 id="days">00</h1><small>天</small></div><div class="time"><h1 id="hours">00</h1><small>时</small></div><div class="time"><h1 id="minutes">00</h1><small>分</small></div><div class="time"><h1 id="seconds">00</h1><small>秒</small></div></div><div class="social-panel-container"><div class="social-panel"><p>Created with <i class="fa fa-heart"></i> by <a href="#">Florin Pop</a></p><button class="close-btn"><i class="fas fa-times"></i></button><h4>Get in touch on</h4><ul><li><a href="#"><i class="fab fa-discord"></i></a></li><li><a href="#"><i class="fab fa-twitter"></i></a></li><li><a href="#"><i class="fab fa-linkedin"></i></a></li><li><a href="#"><i class="fab fa-facebook"></i></a></li><li><a href="#"><i class="fab fa-instagram"></i></a></li></ul></div></div><button class="floating-btn">Get in Touch</button></body><script>const body = document.body;const endTime = new Date("December 31 2021 23:59:59");const daysEl = document.getElementById("days");const hoursEl = document.getElementById("hours");const minutesEl = document.getElementById("minutes");const secondsEl = document.getElementById("seconds");setInterval(updateCountdown, 1000);setInterval(createSnowFlake, 50);function updateCountdown() {const startTime = new Date();const diff = endTime - startTime;const days = Math.floor(diff / 1000 / 60 / 60 / 24);const hours = Math.floor(diff / 1000 / 60 / 60) % 24;const minutes = Math.floor(diff / 1000 / 60) % 60;const seconds = Math.floor(diff / 1000) % 60;daysEl.innerHTML = days;hoursEl.innerHTML = hours < 10 ? "0" + hours : hours;minutesEl.innerHTML = minutes < 10 ? "0" + minutes : minutes;secondsEl.innerHTML = seconds < 10 ? "0" + seconds : seconds;}function createSnowFlake() {const snow_flake = document.createElement("i");snow_flake.classList.add("fas");snow_flake.classList.add("fa-snowflake");snow_flake.style.left = Math.random() * window.innerWidth + "px";snow_flake.style.animationDuration = Math.random() * 3 + 2 + "s"; // between 2 - 5 secondssnow_flake.style.opacity = Math.random();snow_flake.style.fontSize = Math.random() * 10 + 10 + "px";document.body.appendChild(snow_flake);setTimeout(() => {snow_flake.remove();}, 5000);}// SOCIAL PANEL JSconst floating_btn = document.querySelector(".floating-btn");const close_btn = document.querySelector(".close-btn");const social_panel_container = document.querySelector(".social-panel-container");floating_btn.addEventListener("click", () => {social_panel_container.classList.toggle("visible");});close_btn.addEventListener("click", () => {social_panel_container.classList.remove("visible");});</script>
</html>

三、精彩专栏

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

HTML5七夕情人节表白网页制作【新年倒计时白色雪花飘落】HTML+CSS+JavaScript CSS特效相关推荐

HTML5七夕情人节表白网页制作【樱花雨+爱心3D相册】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
HTML5七夕情人节表白网页制作【绘制冬季下雪3D相册】HTML+CSS+JavaScript html生日快乐祝福网页制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
HTML5七夕情人节表白网页制作 __浪漫空中散落的花瓣3D相册__ HTML+CSS+JavaScript
HTML5七夕情人节表白网页制作 ❤浪漫空中散落的花瓣3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人 ...
HTML5七夕情人节表白网页制作 (蓝色主题-樱花雨3D相册)HTML+CSS+JavaScript
HTML5七夕情人节表白网页制作 ❤蓝色主题-樱花雨3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看 ...
HTML5七夕情人节表白网页制作——蓝色梦幻海洋3D相册—— HTML+CSS+JavaScript
HTML5七夕情人节表白网页制作❤蓝色梦幻海洋3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此 ...
HTML5七夕情人节表白网页制作 (渐变色满天星空3D相册) HTML+CSS+JavaScript
HTML5七夕情人节表白网页制作 ❤渐变色满天星空3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看 ...
HTML5七夕情人节表白网页(爱心雨-满屏爱心飘落)HTML+CSS+JavaScript
HTML5七夕情人节表白网页❤(爱心雨-满屏爱心飘落)❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此 ...
HTML5七夕情人节表白网页抖音超火的樱花雨3D相册 HTML+CSS+JavaScript
HTML5七夕情人节表白网页????抖音超火的樱花雨3D相册???? HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱 ...
HTML5七夕情人节表白网页(烂漫的空中散落的花瓣3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤烂漫的空中散落的花瓣3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表 ...
HTML5七夕情人节表白网页❤抖音超火的樱花雨3D相册❤ HTML+CSS+JavaScript
HTML5七夕情人节表白网页

HTML5七夕情人节表白网页制作【新年倒计时白色雪花飘落】HTML+CSS+JavaScript CSS特效