CSS动画时间特效

原创已于 2025-06-27 14:15:28 修改 · 696 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-21 17:27:39 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS动画时间特效</title>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
color: #333;
}

.time-container {
text-align: center;
padding: 30px;
border-radius: 15px;
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}

.time-display {
font-size: 5rem;
font-weight: bold;
margin: 20px 0;
color: #2c3e50;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.date-display {
font-size: 1.5rem;
margin-bottom: 20px;
color: #7f8c8d;
}

/* 时钟指针动画 */
.clock {
width: 200px;
height: 200px;
border: 10px solid #2c3e50;
border-radius: 50%;
position: relative;
margin: 30px auto;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.hour-hand, .minute-hand, .second-hand {
position: absolute;
left: 50%;
bottom: 50%;
transform-origin: 50% 100%;
background-color: #2c3e50;
border-radius: 5px;
}

.hour-hand {
width: 8px;
height: 60px;
margin-left: -4px;
animation: rotate 43200s linear infinite;
}

.minute-hand {
width: 5px;
height: 80px;
margin-left: -2.5px;
animation: rotate 3600s linear infinite;
}

.second-hand {
width: 2px;
height: 90px;
margin-left: -1px;
background-color: #e74c3c;
animation: rotate 60s linear infinite;
}

@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

/* 数字变化动画 */
.digit {
display: inline-block;
position: relative;
}

.digit-change {
animation: digitFlip 0.5s ease-in-out;
}

@keyframes digitFlip {
0% { transform: rotateX(0deg); }
50% { transform: rotateX(90deg); }
100% { transform: rotateX(0deg); }
}

/* 背景粒子动画 */
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}

.particle {
position: absolute;
background-color: rgba(52, 152, 219, 0.5);
border-radius: 50%;
animation: float 15s infinite linear;
}

@keyframes float {
0% { transform: translateY(0) rotate(0deg); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

/* 链接样式 */
.link {
margin-top: 30px;
color: #3498db;
text-decoration: none;
font-weight: bold;
transition: color 0.3s;
}

.link:hover {
color: #e74c3c;
}
</style>
</head>
<body>
<div class="time-container">
<h1>CSS动画时间特效</h1>
<div class="date-display" id="date"></div>
<div class="time-display" id="time"></div>

<div class="clock">
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>


</div>

<div class="particles" id="particles"></div>

<script>
// 更新时间显示
function updateTime() {
const now = new Date();

// 更新日期
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
document.getElementById('date').textContent = now.toLocaleDateString('zh-CN', options);

// 更新时间
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');

const timeString = `${hours}:${minutes}:${seconds}`;
const timeElement = document.getElementById('time');

// 添加数字变化动画
if (timeElement.textContent !== timeString) {
timeElement.textContent = timeString;
const digits = timeElement.querySelectorAll('.digit');

digits.forEach(digit => {
digit.classList.add('digit-change');
setTimeout(() => digit.classList.remove('digit-change'), 500);
});
}

// 将时间数字包裹在span中以便动画
timeElement.innerHTML = timeString.split('').map(char =>
char === ':' ? char : `<span class="digit">${char}</span>`
).join('');
}

// 创建背景粒子
function createParticles() {
const particlesContainer = document.getElementById('particles');
const particleCount = 30;

for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');

// 随机大小
const size = Math.random() * 10 + 5;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;

// 随机位置
particle.style.left = `${Math.random() * 100}%`;
particle.style.bottom = `-${size}px`;

// 随机动画延迟和持续时间
const delay = Math.random() * 15;
const duration = Math.random() * 10 + 10;
particle.style.animationDelay = `${delay}s`;
particle.style.animationDuration = `${duration}s`;

particlesContainer.appendChild(particle);
}
}

// 初始化
document.addEventListener('DOMContentLoaded', () => {
updateTime();
setInterval(updateTime, 1000);
createParticles();
});
</script>
</body>
</html>