600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > HTML5七夕情人节表白网页制作【新年倒计时-红色雪花】HTML+CSS+JavaScript

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

时间:2020-01-15 16:26:58

相关推荐

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

这是程序员表白系列中的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="/jquery/1.11.1/jquery.min.js"></script><style type="text/css">@import url("/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("/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("/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>

三、精彩专栏

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。