2024龙年倒计时页面html源码-榆念资源网

预览如下，复制粘贴下面的代码，另存为html文件即可打开，文字链接都可以更改，把文件名修改成html就可以访问使用了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>2024新年倒计时</title>
<style>
::-webkit-scrollbar { 
display: none;
}
</style>
<style>
home.php?mod=space&uid=476974 url("https://fonts.lug.ustc.edu.cn/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://blog.azad.asia/2024/img/01.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;
}
home.php?mod=space&uid=945662 (max-width: 740px) {
.label {
font-size: 1.7rem;
}
.time span {
padding: 0 16px;
font-size: 0.6rem;
}
.time span div {
font-size: 2rem;
}
}
</style>
<!--适配小屏幕-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script language="javascript" type="text/javascript" src="https://cdn.staticfile.org/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("新的一年，祝各位坛友", "时来运转","如愿以偿","出门见喜","万事胜意","一夜暴富","元气满满","平安喜乐","乘风破浪","生活明朗","知足常乐","福如东海", "寿比南山", "财源滚滚", "喜气洋洋", "好运连连","步步高升", "蒸蒸日上","闪闪发光","欣欣向荣","生生不息","心想事成" ,"幸福安康","健康快乐", "笑口常开", "龙马精神", "福星高照","财运亨通","吉祥如意","美梦成真","锦鲤附体","喜气盈门","家肥屋润","家和万事兴","所得皆所期","所求皆如愿","所行化坦途");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#eea2a4"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
<div class="middle">
<h1 class="label">距農曆2024甲辰龍年 </h1>
<div class="time">
<span>
<div id="d">
00
</div>
天 </span> <span>
<div id="h">
00
</div>
時 </span> <span>
<div id="m">
00
</div>
分 </span> <span>
<div id="s">
00
</div>
秒 </span>
</div>
</div>
<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;
if (this.y + this.radius > window.innerHeight) {
this.reset();
}
}
}
class Snow {
constructor() {
this.canvas = document.createElement("canvas");
this.ctx = this.canvas.getContext("2d");
document.body.appendChild(this.canvas);
window.addEventListener("resize", () => this.onResize());
this.onResize();
this.updateBound = this.update.bind(this);
requestAnimationFrame(this.updateBound);
this.createSnowflakes();
}
onResize() {
this.width = window.innerWidth;
this.height = window.innerHeight;
this.canvas.width = this.width;
this.canvas.height = this.height;
}
createSnowflakes() {
const flakes = window.innerWidth / 4;
this.snowflakes = [];
for (let s = 0; s < flakes; s++) {
this.snowflakes.push(new Snowflake());
}
}
update() {
this.ctx.clearRect(0, 0, this.width, this.height);
for (let flake of this.snowflakes) {
flake.update();
this.ctx.save();
this.ctx.fillStyle = "#FFF";
this.ctx.beginPath();
this.ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
this.ctx.closePath();
this.ctx.globalAlpha = flake.alpha;
this.ctx.fill();
this.ctx.restore();
}
requestAnimationFrame(this.updateBound);
}
}
new Snow();
////////////////////////////////////////////////////////////
// Simple CountDown Clock
const comingdate = new Date("Feb 10, 2024 00:00:00");
const d = document.getElementById("d");
const h = document.getElementById("h");
const m = document.getElementById("m");
const s = document.getElementById("s");
const countdown = setInterval(() => {
const now   = new Date();
const des   = comingdate.getTime() - now.getTime();
const days  = Math.floor(des / (1000 * 60 * 60 * 24));
const hours = Math.floor((des % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const mins  = Math.floor((des % (1000 * 60 * 60)) / (1000 * 60));
const secs  = Math.floor((des % (1000 * 60)) / 1000);
d.innerHTML = getTrueNumber(days);
h.innerHTML = getTrueNumber(hours);
m.innerHTML = getTrueNumber(mins);
s.innerHTML = getTrueNumber(secs);
if (x <= 0) clearInterval(x);
}, 1000);
const getTrueNumber = x => (x < 10 ? "0" + x : x);
</script>
<style>
.deng-box1 {
position: fixed;
top: -30px;
left: 5px;
z-index: 9999;
pointer-events: none;
}
.deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 3s infinite ease-in-out;
box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.deng::before {
position: absolute;
top: -7px;
left: 29px;
height: 12px;
width: 60px;
content: " ";
display: block;
z-index: 999;
border-radius: 5px 5px 0 0;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.xian {
position: absolute;
top: -20px;
left: 60px;
width: 2px;
height: 20px;
background: #dc8f03;
}
.deng-box1 {
pointer-events: none;
}
.deng-a {
width: 100px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: 12px 8px 8px 10px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.deng-b {
width: 45px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: -2px 8px 8px 26px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.deng-t {
font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
font-size: 1.5rem;
color: #ffa500;
font-weight: bold;
line-height: 42px;
text-align: center;
width: 25px;
margin: 0 auto;
}
.shui-a {
position: relative;
width: 5px;
height: 20px;
margin: -5px 0 0 59px;
-webkit-animation: swing 4s infinite ease-in-out;
-webkit-transform-origin: 50% -45px;
background: #ffa500;
border-radius: 0 0 5px 5px;
}
.shui-c {
position: absolute;
top: 18px;
left: -2px;
width: 10px;
height: 35px;
background: #ffa500;
border-radius: 0 0 0 5px;
}
.shui-b {
position: absolute;
top: 14px;
left: -2px;
width: 10px;
height: 10px;
background: #dc8f03;
border-radius: 50%;
}
.deng::after {
position: absolute;
bottom: -7px;
left: 10px;
height: 12px;
width: 60px;
content: " ";
display: block;
margin-left: 20px;
border-radius: 0 0 5px 5px;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng-box2 {
position: fixed;
top: -30px;
right: 5px;
z-index: 9999;
pointer-events: none;
}
.deng-box2 .deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 5s infinite ease-in-out;
box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng-box2 {
pointer-events: none;
}
@-moz-keyframes swing {
0% {
-moz-transform: rotate(-10deg)
}
50% {
-moz-transform: rotate(10deg)
}
100% {
-moz-transform: rotate(-10deg)
}
}
@-webkit-keyframes swing {
0% {
-webkit-transform: rotate(-10deg)
}
50% {
-webkit-transform: rotate(10deg)
}
100% {
-webkit-transform: rotate(-10deg)
}
}
</style>
<div class="deng-box1"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"><div class="deng-t">辞旧</div></div> </div> <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div> </div> </div>
<div class="deng-box2"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"><div class="deng-t">迎新</div></div> </div> <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div> </div> </div>
<div style="text-align:center;width:90%;left:5%;bottom:10px;position:fixed;">
<font size="1"><span style="color:gray">Copyright ? 2023-2024</span>   <a href="http://xxxxxxxxxxx" target="_blank" style="text-decoration: none; color:gray" >XXXXX</a></font>
</div>
</body>
</html>
文章版权声明 1、本网站的内容均来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
2、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
3、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
4、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
5、修改版安卓软件，加群提示为修改者自留，非本站添加信息，注意鉴别！
THE END
HTML源码
2024龙年倒计时页面html源码

2025年-新年倒计时
