100字范文 > HTML5七夕情人节表白网页(新年倒计时+白色雪花飘落) HTML+CSS+JS 求婚 html生日快

HTML5七夕情人节表白网页(新年倒计时+白色雪花飘落) HTML+CSS+JS 求婚 html生日快

时间：2023-03-19 17:42:19

HTML5七夕情人节表白网页❤新年倒计时+白色雪花飘落❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。

🧡文章末尾-已经附上源码下载地址

🧡作者主页-更多源码

🧡100款七夕情人节告白源码-专栏文章

作品介绍

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

2.网页作品编辑：任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++）均可修改网页。

文章目录

HTML5七夕情人节表白网页❤新年倒计时+白色雪花飘落❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白作品介绍一、作品展示二、文件目录三、代码实现四、学习资料五、源码下载六、更多源码

一、作品展示

二、文件目录

三、代码实现

<html><head><meta charset="utf-8" /><scriptid="jqbb"src="/jquery/1.11.1/jquery.min.js"></script><style type="text/css">@import url("/ajax/libs/font-awesome/5.10.2/css/all.min.css");@import url("/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 cla</div></div><button class="floating-btn">Get in Touch</button></body><script>const body = document.body;const endTime = new Date("December 31 23:59:59");const daysEl = document.getElementById("days");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>