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 圆形时钟抖音就完成啦！