我来为你创建一个精美的模拟时钟网页,具有平滑的指针旋转效果和现代化的设计。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">精美模拟时钟</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: 'Arial', sans-serif;
}
.clock-container {
position: relative;
width: 350px;
height: 350px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 50%;
box-shadow:
0 25px 45px rgba(0, 0, 0, 0.2),
inset 0 0 0 20px rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
}
.clock-face {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
}
/* 时钟刻度 */
.mark {
position: absolute;
width: 4px;
height: 20px;
background: rgba(255, 255, 255, 0.8);
left: 50%;
top: 10px;
transform-origin: 50% 165px;
border-radius: 2px;
}
.mark.hour {
height: 30px;
width: 6px;
background: rgba(255, 255, 255, 0.9);
}
/* 数字 */
.number {
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* 指针 */
.hand {
position: absolute;
left: 50%;
bottom: 50%;
transform-origin: 50% 100%;
border-radius: 10px;
transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.hour-hand {
width: 8px;
height: 100px;
background: linear-gradient(to top, #fff 0%, #f0f0f0 100%);
margin-left: -4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.minute-hand {
width: 6px;
height: 130px;
background: linear-gradient(to top, #fff 0%, #f0f0f0 100%);
margin-left: -3px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.second-hand {
width: 2px;
height: 140px;
background: linear-gradient(to top, #ff6b6b 0%, #ff5252 100%);
margin-left: -1px;
box-shadow: 0 0 6px rgba(255, 107, 107, 0.5);
}
/* 中心点 */
.center-dot {
position: absolute;
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 10;
}
/* 数字时钟显示 */
.digital-time {
position: absolute;
bottom: -80px;
left: 50%;
transform: translateX(-50%);
color: white;
font-size: 24px;
font-weight: 300;
letter-spacing: 2px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
/* 日期显示 */
.date-display {
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
color: white;
font-size: 16px;
font-weight: 300;
letter-spacing: 1px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
/* 悬停效果 */
.clock-container:hover {
transform: scale(1.05);
transition: transform 0.3s ease;
}
/* 响应式设计 */
@media (max-width: 480px) {
.clock-container {
width: 280px;
height: 280px;
}
.mark {
transform-origin: 50% 130px;
}
.hour-hand {
height: 80px;
}
.minute-hand {
height: 100px;
}
.second-hand {
height: 110px;
}
.number {
font-size: 20px;
}
}
</style>
</head>
<body>
<div class="clock-container">
<div class="date-display" id="dateDisplay"></div>
<div class="clock-face">
<!-- 时钟刻度 -->
<div class="mark hour" style="transform: rotate(0deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(6deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(12deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(18deg) translateX(-50%);"></div>
<div class="mark hour" style="transform: rotate(30deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(36deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(42deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(48deg) translateX(-50%);"></div>
<div class="mark hour" style="transform: rotate(60deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(66deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(72deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(78deg) translateX(-50%);"></div>
<div class="mark hour" style="transform: rotate(90deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(96deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(102deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(108deg) translateX(-50%);"></div>
<div class="mark hour" style="transform: rotate(120deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(126deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(132deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(138deg) translateX(-50%);"></div>
<div class="mark hour" style="transform: rotate(150deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(156deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(162deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(168deg) translateX(-50%);"></div>
<div class="mark hour" style="transform: rotate(180deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(186deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(192deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(198deg) translateX(-50%);"></div>
<div class="mark hour" style="transform: rotate(210deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(216deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(222deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(228deg) translateX(-50%);"></div>
<div class="mark hour" style="transform: rotate(240deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(246deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(252deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(258deg) translateX(-50%);"></div>
<div class="mark hour" style="transform: rotate(270deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(276deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(282deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(288deg) translateX(-50%);"></div>
<div class="mark hour" style="transform: rotate(300deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(306deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(312deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(318deg) translateX(-50%);"></div>
<div class="mark hour" style="transform: rotate(330deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(336deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(342deg) translateX(-50%);"></div>
<div class="mark" style="transform: rotate(348deg) translateX(-50%);"></div>
<div class="mark hour" style="transform: rotate(360deg) translateX(-50%);"></div>
<!-- 数字 -->
<div class="number" style="left: 50%; top: 20px; transform: translateX(-50%);">12</div>
<div class="number" style="right: 20px; top: 50%; transform: translateY(-50%);">3</div>
<div class="number" style="left: 50%; bottom: 20px; transform: translateX(-50%);">6</div>
<div class="number" style="left: 20px; top: 50%; transform: translateY(-50%);">9</div>
<!-- 指针 -->
<div class="hand hour-hand" id="hourHand"></div>
<div class="hand minute-hand" id="minuteHand"></div>
<div class="hand second-hand" id="secondHand"></div>
<!-- 中心点 -->
<div class="center-dot"></div>
</div>
<div class="digital-time" id="digitalTime"></div>
</div>
<script>
function updateClock() {
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const milliseconds = now.getMilliseconds();
// 计算角度
const secondAngle = (seconds + milliseconds / 1000) * 6; // 每秒6度
const minuteAngle = (minutes + seconds / 60) * 6; // 每分钟6度
const hourAngle = ((hours % 12) + minutes / 60) * 30; // 每小时30度
// 应用旋转
document.getElementById('secondHand').style.transform = `rotate(${secondAngle}deg)`;
document.getElementById('minuteHand').style.transform = `rotate(${minuteAngle}deg)`;
document.getElementById('hourHand').style.transform = `rotate(${hourAngle}deg)`;
// 更新数字时间
const digitalTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
document.getElementById('digitalTime').textContent = digitalTime;
// 更新日期
const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
const dateStr = now.toLocaleDateString('zh-CN', options);
document.getElementById('dateDisplay').textContent = dateStr;
}
// 初始化时钟
updateClock();
// 每50毫秒更新一次，使秒针移动更平滑
setInterval(updateClock, 50);
</script>
</body>
</html>
这个精美的模拟时钟具有以下特点：
设计特色：
- 🎨 现代玻璃态设计，带有毛玻璃效果
- 🌈 渐变背景，视觉效果出色
- ✨ 平滑的指针旋转动画
- 💫 悬停时的缩放效果
功能特点：
- 🕐 实时显示当前时间
- 📅 显示完整日期和星期
- 🕐 数字时间显示
- 🎯 精确的指针旋转，包括毫秒级的平滑移动
- 📱 响应式设计，适配移动设备
技术实现：
（图片来源网络，侵删）
- 使用
transform: rotate()实现指针旋转 - 每50毫秒更新一次,确保秒针移动流畅
- 使用
cubic-bezier缓动函数让动画更自然 - 毛玻璃效果使用
backdrop-filter实现
时钟会自动显示当前时间,指针平滑旋转，整体设计现代且优雅。
（图片来源网络，侵删）
