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

举报
web前端优质创作者 发表于 2022/08/14 12:19:55 2022/08/14
【摘要】 这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。@TOC 一、网页介绍1 网页简介：基于 HTML+CSS+JavaScript 制作七...

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

@TOC

一、网页介绍

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

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

一、网页效果

在这里插入图片描述

二、代码展示

1.HTML代码

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

<html>
  <head>
    <meta charset="utf-8" />
    <script
      id="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 seconds
      snow_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 JS
    const 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>

三、精彩专栏

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

💂【获取方式】

gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
CSS HTML JavaScript
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入