在网页中添加一个时钟是非常具有实用性的，可以让用户清楚地了解当前的时间。下面我们就来介绍一下如何使用CSS来实现一个简单的时钟。

html代码：
<div id="clock">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
CSS代码：
#clock{
width:100px;
height:100px;
border-radius:50%;
background:#FFF;
position:relative;
}
#hour, #minute, #second{
position:absolute;
width:0;
height:0;
border-style:solid;
}
#hour{
top:50%;
left:50%;
margin-top:-20px;
margin-left:-3px;
border-width:20px 3px 0 3px;
border-color:#000 transparent transparent transparent;
transform-origin:50% 90%;
}
#minute{
top:50%;
left:50%;
margin-top:-30px;
margin-left:-2px;
border-width:30px 2px 0 2px;
border-color:#000 transparent transparent transparent;
transform-origin:50% 90%;
}
#second{
top:50%;
left:50%;
margin-top:-35px;
margin-left:-1px;
border-width:35px 1px 0 1px;
border-color:#FF0000 transparent transparent transparent;
transform-origin:50% 90%;
}
@keyframes rotate{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
#hour{
animation:rotate 7200s infinite linear;
}
#minute{
animation:rotate 3600s infinite linear;
}
#second{
animation:rotate 60s infinite linear;
}

以上代码中，HTML部分定义了一个圆形的时钟，其中包含了三个空的div标签，分别用于表示时针、分针和秒针。CSS部分则会对这三个div标签进行美化和动画效果的添加。

首先，我们使用CSS设置了时钟的大小和形状，以及每个指针的样式。其中，时针的样式是一个黑色的三角形，分针是一个黑色的梯形，而秒针则是一个红色的矩形。这些样式的具体实现方法使用了border属性。

接着，我们使用了@keyframes关键字来定义了一个关键帧动画。该动画会将指针顺时针旋转360度，使得指针的长度到达指定的时间。
最后，我们使用伪类选择器:nth-child()来针对每个指针，使用animation属性来将对应的动画应用上去。具体来说，时针的旋转速率是每2小时旋转一圈，分针则是每1小时旋转一圈，秒针则是每1分钟旋转一圈。