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

举报
IT司马青衫 发表于 2022/08/11 10:32:22 2022/08/11
【摘要】 这是程序员表白系列中的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://fonts.googleapis.com/css?family=Aleo");
      :root {
        font-family: "Aleo", sans-serif;
      }

      html,
      body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        background: rgb(119, 13, 13);
        background: radial-gradient(
          circle,
          rgba(119, 13, 13, 0.92) 64%,
          rgba(0, 0, 0, 0.6) 100%
        );
      }

      canvas {
        width: 100%;
        height: 100%;
      }
      .label {
        font-size: 2.2rem;
        background: url("https://www.jq22.com/tp/6368077651977322227241996.png");
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        animation: moveBg 30s linear infinite;
      }

      @keyframes moveBg {
        0% {
          background-position: 0% 30%;
        }
        100% {
          background-position: 1000% 500%;
        }
      }

      .middle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        user-select: none;
      }

      .time {
        color: #d99c3b;
        text-transform: uppercase;
        display: flex;
        justify-content: center;
      }

      .time span {
        padding: 0 14px;
        font-size: 0.8rem;
      }

      .time span div {
        font-size: 3rem;
      }

      @media (max-width: 740px) {
        .label {
          font-size: 1.7rem;
        }
        .time span {
          padding: 0 16px;
          font-size: 0.6rem;
        }
        .time span div {
          font-size: 2rem;
        }
      }
    </style>
  </head>

  <body>
    <div class="middle">
      <h1 class="label">New Year Countdown</h1>
      <div class="time">
        <span>
          <div id="LeftTime"></div>
        </span>
      </div>
    </div>
  </body>
  <script>
    class Snowflake {
      constructor() {
        this.x = 0;
        this.y = 0;
        this.vx = 0;
        this.vy = 0;
        this.radius = 0;
        this.alpha = 0;

        this.reset();
      }

      reset() {
        this.x = this.randBetween(0, window.innerWidth);
        this.y = this.randBetween(0, -window.innerHeight);
        this.vx = this.randBetween(-3, 3);
        this.vy = this.randBetween(2, 5);
        this.radius = this.randBetween(1, 4);
        this.alpha = this.randBetween(0.1, 0.9);
      }

      randBetween(min, max) {
        return min + Math.random() * (max - min);
      }

      update() {
        this.x += this.vx;
        this.y += this.vy;

        requestAnimationFrame(this.updateBound);
      }
    }

    new Snow();

    /////////////////////新年倒计时//////////////////////////////

    function FreshTime() {
      var endtime = new Date("2021/2/12,00:00:00"); //结束时间
      var nowtime = new Date(); //当前时间
      var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
      d = parseInt(lefttime / (24 * 60 * 60));
      h = parseInt((lefttime / (60 * 60)) % 24);
      m = parseInt((lefttime / 60) % 60);
      s = parseInt(lefttime % 60);

      document.getElementById("LeftTime").innerHTML =
        d + "天 \t\t" + h + "小时 \t\t" + m + "分 \t\t" + s + "秒";
      if (lefttime <= 0) {
        document.getElementById("LeftTime").innerHTML = "新年快乐";
        clearInterval(sh);
      }
    }
    FreshTime();
    var sh;
    sh = setInterval(FreshTime, 1000);
  </script>
</html>



三、精彩专栏

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


💂【获取方式】

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

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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