雪花飘落倒计时-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>雪花飘落倒计时</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background: linear-gradient(to bottom, #1a2a6c, #b21f1f, #fdbb2d);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Arial', sans-serif;
}

.countdown-container {
position: relative;
z-index: 10;
text-align: center;
color: white;
}

.countdown {
font-size: 8rem;
font-weight: bold;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
margin: 0;
animation: pulse 1s infinite alternate;
}

.message {
font-size: 2rem;
margin-top: 20px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.snowflake {
position: absolute;
color: white;
font-size: 1.5rem;
pointer-events: none;
user-select: none;
z-index: 1;
animation: fall linear forwards;
}

@keyframes fall {
to {
transform: translateY(100vh);
}
}

@keyframes pulse {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(1.05);
opacity: 0.8;
}
}

.link {
position: absolute;
bottom: 20px;
color: white;
font-size: 1rem;
text-decoration: none;
z-index: 100;
}

.link:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="countdown-container">
<h1 class="countdown" id="countdown">10</h1>
<p class="message">倒计时开始</p>
</div>


<script>
// 雪花效果
function createSnowflakes() {
const snowflakes = ['❄', '❅', '❆', '✻', '✼', '✽', '✾', '✿', '❀', '❁'];
const body = document.body;

setInterval(() => {
const snowflake = document.createElement('div');
snowflake.className = 'snowflake';
snowflake.textContent = snowflakes[Math.floor(Math.random() * snowflakes.length)];

// 随机位置
snowflake.style.left = Math.random() * 100 + 'vw';
snowflake.style.top = '-20px';

// 随机大小
const size = Math.random() * 2 + 1;
snowflake.style.fontSize = size + 'rem';

// 随机透明度
snowflake.style.opacity = Math.random() * 0.5 + 0.5;

// 随机动画持续时间
const duration = Math.random() * 5 + 5;
snowflake.style.animationDuration = duration + 's';

body.appendChild(snowflake);

// 动画结束后移除元素
setTimeout(() => {
snowflake.remove();
}, duration * 1000);
}, 100);
}

// 倒计时效果
function startCountdown() {
let count = 10;
const countdownElement = document.getElementById('countdown');
const messageElement = document.querySelector('.message');

const timer = setInterval(() => {
count--;
countdownElement.textContent = count;

// 改变颜色和消息
if (count <= 3) {
countdownElement.style.color = '#ff4d4d';
messageElement.textContent = '即将结束！';
} else if (count <= 7) {
countdownElement.style.color = '#ffcc00';
messageElement.textContent = '倒计时进行中';
}

if (count === 0) {
clearInterval(timer);
countdownElement.textContent = '0';
messageElement.textContent = '时间到！';

// 最终效果
setTimeout(() => {
countdownElement.style.fontSize = '12rem';
countdownElement.style.color = '#ffffff';
countdownElement.style.textShadow = '0 0 30px rgba(255, 255, 255, 1)';
messageElement.textContent = '新年快乐！';
}, 500);
}
}, 1000);
}

// 初始化
window.onload = function() {
createSnowflakes();
startCountdown();
};
</script>
</body>
</html>