HTML:
<div class="box"></div>
CSS:
body {
background-color: #59488b;
}
.box {
position: relative;
margin-top: 100px;
margin-left: 100px;
width: 30px;
height: 30px;
border: 2px solid #fff;
border-radius: 50%;
}
.box:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 10px;
height: 2px;
background-color: #fff;
transform-origin: 1px 1px;
animation: mymove linear 5s infinite;
}
.box:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 15px;
height: 2px;
background-color: #fff;
transform-origin: 1px 1px;
animation: mymove linear 2s infinite;
}
@keyframes mymove
{
0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}
利用两伪元素作为分针时针(当然你说秒针分针也行,哈哈),用定位调整好位置。自定义keyframes动画,0%0度,100%360度。然后在animation中调用keyframes动画。两指针速度设置不一样(时间不一致),都无限循环。还有一点设置好变形起点,否则是已中心点进行旋转的。