CSS3是HTML和CSS的新版本。它為我們帶來了許多新的、令人難以置信的功能，可以輕松實現各種效果和功能，包括時鐘和日歷。

為了創(chuàng)建一個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的無限可能性！