CSS 圓形時鐘抖音是一種獨特的鐘表設計，目前在抖音等社交媒體平臺中頗受歡迎。接下來，讓我們一起學習如何使用 CSS 實現這種時鐘設計。

.clock{
width:200px;
height:200px;
background-color:#fff;
border-radius: 50%;
position:relative;
margin:0 auto;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.hour{
width:4px;
height:50px;
background-color:#000;
position:absolute;
top:50%;
left:50%;
transform-origin:center bottom;
transform: rotateZ(30deg);
}
.minute{
width:3px;
height:70px;
background-color:#000;
position:absolute;
top:50%;
left:50%;
transform-origin:center bottom;
transform: rotateZ(180deg);
}
.second{
width:2px;
height:80px;
background-color:#ff2d55;
position:absolute;
top:50%;
left:50%;
transform-origin:center bottom;
transform: rotateZ(90deg);
animation: rotate 60s linear infinite;
}
@keyframes rotate{
from{
transform:rotateZ(90deg);
}
to{
transform:rotateZ(450deg);
}
}

以上是 CSS 代碼，其中 .clock 代表時鐘的整體布局，.hour 代表時針，.minute 代表分針，.second 代表秒針。關于 transform-origin 屬性，是設置元素旋轉動畫的基準點，比如我們設置了 center bottom，則為元素正中心底部。另外，.second 內使用了動畫，實現了秒針的旋轉效果。

當 CSS 代碼實現后，我們需要在HTML中寫入以下代碼:

<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>

以上為 HTML 代碼，我們將 .hour、.minute 和 .second 三個元素插入到了 .clock 內，從而實現了整體時鐘效果。最后我們基本的 CSS 圓形時鐘抖音就完成啦！