表白网站源码-html源码结婚倒计时-CFANZ编程社区

📂文章目录

二、📚网站介绍
三、🔗网站效果

▶️1.视频演示
🧩 2.图片演示

四、💒 网站代码

🧱HTML结构代码

五、🎁更多源码

二、📚网站介绍

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

46-新年倒计时+白色雪花飘落

🧩 2.图片演示

表白网站源码-html源码结婚倒计时_html

四、💒 网站代码

🧱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 {
        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>

五、🎁更多源码

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