css画钟表_运用css3绘制时钟。
时间: 2023-07-30 08:12:43 浏览: 51
好的,下面是一个简单的 CSS3 时钟示例:
HTML 代码:
```html
<div class="clock">
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
<div class="center"></div>
</div>
```
CSS 代码:
```css
.clock {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #f5f5f5;
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.hour-hand, .minute-hand, .second-hand {
position: absolute;
width: 50%;
height: 6px;
background-color: #333;
transform-origin: 100% 50%;
}
.hour-hand {
top: 50%;
left: 50%;
margin-left: -25%;
margin-top: -3px;
z-index: 3;
}
.minute-hand {
top: 50%;
left: 50%;
margin-left: -25%;
margin-top: -3px;
z-index: 2;
}
.second-hand {
top: 50%;
left: 50%;
margin-left: -25%;
margin-top: -3px;
z-index: 1;
}
.center {
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #333;
z-index: 4;
transform: translate(-50%, -50%);
}
@keyframes rotate-hour-hand {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes rotate-minute-hand {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes rotate-second-hand {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.hour-hand {
animation: rotate-hour-hand 12s linear infinite;
}
.minute-hand {
animation: rotate-minute-hand 60s linear infinite;
}
.second-hand {
animation: rotate-second-hand 60s linear infinite;
}
```
这个示例中,我们创建了一个具有相应类名的 div 元素,然后使用 CSS3 的 transform-origin 属性设置时针、分针、秒针的旋转中心。然后,我们使用 CSS3 动画来让时针、分针、秒针以相应的速度旋转。最后,我们使用 CSS3 的 box-shadow 属性为时钟添加阴影效果。