使用css3实现一个超浪漫的新年倒计时
以下是一个使用HTML和CSS3实现的简单新年倒计时示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Year Countdown</title>
<style>
.countdown {
font-size: 48px;
font-weight: bold;
text-align: center;
}
.day {
animation: day-countdown 1s infinite;
}
@keyframes day-countdown {
0% {
color: #ff0;
}
100% {
color: #f0f;
}
}
</style>
</head>
<body>
<div class="countdown day">01</div>
<script>
// JavaScript 控制倒计时
const newYear = new Date('2023-01-01T00:00:00'); // 请将日期更改为新的一年开始的时间
function countdown() {
const now = new Date();
const distance = newYear - now;
if (distance < 0) {
clearInterval(intervalId);
document.querySelector('.countdown').textContent = '00';
} else {
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
document.querySelector('.countdown').textContent = days.toString().padStart(2, '0');
}
}
countdown(); // 初始运行
const intervalId = setInterval(countdown, 1000); // 每秒更新
</script>
</body>
</html>这段代码会在网页上显示一个倒计时天数，从1开始，并且每秒更新。JavaScript 脚本负责计算剩余时间，并更新页面上的数字。CSS3 中的 @keyframes 用于创建颜色变化的动画效果。这个示例简单易懂，适合作为新手学习CSS动画的入门项目。
评论已关闭