纯css制作时钟
纯CSS制作时钟
使用纯CSS制作时钟需要结合CSS动画和伪元素来模拟时钟指针的运动。以下是一个完整的实现方法：
HTML结构
时钟的HTML结构非常简单，只需要一个容器和三个代表时针、分针和秒针的元素：
<div class="clock">
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>CSS样式
通过CSS设置时钟的外观和动画效果：
.clock {
width: 200px;
height: 200px;
border: 10px solid #333;
border-radius: 50%;
position: relative;
margin: 50px auto;
background: #fff;
}
.hour-hand, .minute-hand, .second-hand {
position: absolute;
left: 50%;
bottom: 50%;
transform-origin: 50% 100%;
}
.hour-hand {
width: 6px;
height: 50px;
background: #333;
margin-left: -3px;
animation: rotate 43200s linear infinite; /* 12小时一圈 */
}
.minute-hand {
width: 4px;
height: 80px;
background: #666;
margin-left: -2px;
animation: rotate 3600s linear infinite; /* 60分钟一圈 */
}
.second-hand {
width: 2px;
height: 90px;
background: red;
margin-left: -1px;
animation: rotate 60s linear infinite; /* 60秒一圈 */
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}添加刻度
为了更逼真，可以添加时钟刻度：
.clock::before {
content: '';
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
/* 小时刻度 */
.clock::after {
content: '';
position: absolute;
width: 5px;
height: 15px;
background: #333;
top: 10px;
left: 50%;
margin-left: -2.5px;
transform-origin: 50% 90px;
}
/* 创建12个刻度 */
.clock::after {
box-shadow:
0 90px 0 0 #333,
30px 78px 0 0 #333,
78px 30px 0 0 #333,
90px 0 0 0 #333,
78px -30px 0 0 #333,
30px -78px 0 0 #333,
0 -90px 0 0 #333,
-30px -78px 0 0 #333,
-78px -30px 0 0 #333,
-90px 0 0 0 #333,
-78px 30px 0 0 #333,
-30px 78px 0 0 #333;
}优化指针位置
调整指针的初始位置，使其指向当前时间：
.hour-hand {
transform: rotate(30deg); /* 初始指向1点 */
}
.minute-hand {
transform: rotate(180deg); /* 初始指向6点 */
}
.second-hand {
transform: rotate(270deg); /* 初始指向9点 */
}注意事项
- 纯CSS时钟是模拟的，不会显示真实时间
- 指针的初始位置可以手动设置，但不会自动同步到当前时间
- 如需显示真实时间，需要结合JavaScript
- 动画使用
linear缓动函数确保匀速运动
这个实现展示了如何使用CSS动画创建基本的时钟效果，可以根据需要调整大小、颜色和动画时间。
