🤍 羊年2027倒计时
相关代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2027羊年新年倒计时</title>
<link rel="stylesheet" href="/tx/2027/url/styles.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
html, body {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #b71c1c, #d32f2f, #c2185b);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-align: center;
overflow: hidden;
position: relative;
}
.container {
z-index: 10;
padding: 0 20px;
width: 100%;
max-width: 600px;
}
.title {
font-size: 28px;
font-weight: normal;
margin-bottom: 10px;
opacity: 0.95;
}
.main-title {
font-size: 46px;
font-weight: bold;
margin-bottom: 50px;
text-shadow: 0 0 20px rgba(255,255,255,0.3);
}
.countdown {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 50px;
flex-wrap: wrap;
}
.time-box {
width: 90px;
height: 90px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,0.2);
}
.time-num {
font-size: 36px;
font-weight: bold;
}
.time-text {
font-size: 14px;
opacity: 0.9;
margin-top: 4px;
}
.wish {
font-size: 24px;
color: #FFE162;
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.fall {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
@keyframes down {
0% { transform: translateY(-10vh); opacity: 0; }
10% { opacity: 1; }
100% { transform: translateY(100vh); opacity: 0; }
}
</style>
<!-- 左侧灯笼 -->
<div class="deng-box">
<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>
<img style="position: absolute;left: -90px;top: 2px;max-width: 190px !important;" src="/tx/2027/url/2027dl-1.png">
</div>
</div>
</div>
<!-- 右侧灯笼 -->
<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>
<img style="position: absolute;left: -90px;top: 2px;max-width: 190px !important;" src="/tx/2027/url/2027dl-2.png">
</div>
</div>
</div>
</head>
<body>
<div class="fall" id="fall"></div>
<div class="container">
<div class="title">羊年新春倒计时</div>
<div class="main-title">离2027新年还有</div>
<div class="countdown">
<div class="time-box">
<div class="time-num" id="day">00</div>
<div class="time-text">天</div>
</div>
<div class="time-box">
<div class="time-num" id="hour">00</div>
<div class="time-text">时</div>
</div>
<div class="time-box">
<div class="time-num" id="min">00</div>
<div class="time-text">分</div>
</div>
<div class="time-box">
<div class="time-num" id="sec">00</div>
<div class="time-text">秒</div>
</div>
</div>
<div class="wish">三羊开泰 · 万事顺遂 · 阖家安康</div>
</div>
<audio id="bgm" loop preload="auto">
<source src="/content/uploadfile/202602/23cb1771998031.mp3" type="audio/mpeg">
<script>
function countDown() {
var now = new Date();
var target = new Date("2027-02-05 00:00:00");
var diff = target - now;
if (diff <= 0) {
document.getElementById("day").innerText = "00";
document.getElementById("hour").innerText = "00";
document.getElementById("min").innerText = "00";
document.getElementById("sec").innerText = "00";
return;
}
var d = Math.floor(diff / 1000 / 60 / 60 / 24);
var h = Math.floor(diff / 1000 / 60 / 60 % 24);
var m = Math.floor(diff / 1000 / 60 % 60);
var s = Math.floor(diff / 1000 % 60);
d = d < 10 ? "0" + d : d;
h = h < 10 ? "0" + h : h;
m = m < 10 ? "0" + m : m;
s = s < 10 ? "0" + s : s;
document.getElementById("day").innerText = d;
document.getElementById("hour").innerText = h;
document.getElementById("min").innerText = m;
document.getElementById("sec").innerText = s;
}
setInterval(countDown, 1000);
countDown();
// 飘落福字
(function createFall() {
const box = document.getElementById("fall");
const words = ["福", "喜", "财", "安", "吉", "顺"];
const colors = ["#fff", "#FFE162", "#FFD54F"];
for (var i = 0; i < 70; i++) {
let span = document.createElement("span");
span.innerText = words[Math.floor(Math.random() * words.length)];
span.style.position = "absolute";
span.style.color = colors[Math.floor(Math.random() * colors.length)];
span.style.fontSize = Math.random() * 18 + 14 + "px";
span.style.left = Math.random() * 100 + "vw";
span.style.animation = `down ${Math.random() * 6 + 5}s linear infinite`;
span.style.animationDelay = Math.random() * 6 + "s";
box.appendChild(span);
}
})();
// 背景音乐
document.addEventListener("click", function () {
const bgm = document.getElementById("bgm");
if (bgm.paused) bgm.play();
}, { once: true });
</script>
</body>
</html>演示地址
阅读：23
发布时间：