css3时钟 日历 |css路径根目录

为了创建一个CSS3时钟，大家需要使用HTML来定义时钟的结构，并使用CSS3的属性和选择器来定位和展示时钟的各个元素。

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

以上是时钟HTML的基本结构，时钟由4个元素组成：时针、分针、秒针和中心圆。其中，时针、分针和秒针使用CSS3动画来实现旋转的效果。

.hour-hand {
transform-origin: bottom center;
animation: rotate-hour 12s linear infinite;
}
@keyframes rotate-hour {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

以上是时钟的时针旋转动画的代码。首先使用transform-origin属性定义旋转点，然后定义关键帧动画来实现旋转效果。

.minute-hand {
transform-origin: bottom center;
animation: rotate-minute 60s linear infinite;
}
@keyframes rotate-minute {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

以上是时钟的分针旋转动画的代码。与时针的代码类似，只是动画时间不同。

.second-hand {
transform-origin: bottom center;
animation: rotate-second 1s linear infinite;
}
@keyframes rotate-second {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

以上是时钟的秒针旋转动画的代码。与时针和分针的代码类似，只是动画时间更短。

最后，大家需要使用CSS3来美化时钟，并添加时间相关的信息，如下所示：

#clock {
position: relative;
width: 200px;
height: 200px;
border: 10px solid #333;
border-radius: 100%;
}
.center-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border-radius: 100%;
background-color: #333;
}
.clock-text {
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, -75%);
text-align: center;
font-size: 18px;
color: #333;
}
.clock-text span {
font-size: 12px;
color: #999;
}

以上是CSS3样式代码。首先定义时钟的基本样式，设置宽度和高度，并使用border和border-radius属性定义时钟的边框和圆形形状。然后定义中心圆和时间文本的样式，最终实现一个漂亮的时钟效果。

CSS3还可以实现日历等有趣的功能，让大家一起探索CSS3的无限可能性！