纯css实现时钟功能

时间与我们的生活密不可分，下面我将用css来实现一个简单的时钟，并且实现其功能

时钟主要分为两个部分，一个是four的表盘部分，一个为five的指针部分，six为表中心的一个小黑点，接下来开始样式的编写
首先，four表盘的样式，完成效果如下，想要多一些针可以自行添加

具体代码如下：
.four{
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid #060606;
margin: 240px auto;
}

.four p{
	width: 100px;
	height: 1px;
	background: #000000;
	display: block;
}
.four p:first-child{
	margin-top: 100px;
	transform: rotate(90deg);
	transform-origin:right;
}
.four p:nth-child(2){
	transform: rotate(180deg);
	transform-origin:right;
}
.four p:nth-child(3){
	transform: rotate(270deg);
	transform-origin:right;
}
.four p:last-child{
	margin-top: -2px;
}

现在开始写five,我给five宽高，这样覆盖了不需要的部分，然后再是时针，分针，秒针的编写，具体效果如下：

具体代码：
.five{
width: 180px;
height: 180px;
line-height: 180px;
border-radius: 50%;
background: #E9E5E5;
margin: -430px auto;
background: #fff;
position: relative;
}
.fourlist,.fourlist2,.fourlist3{
width: 90px;
height: 1px;
background: #000000;
display: block;
transform: rotate(90deg);
transform-origin:right;
position: absolute;
}
.fourlist{
top: 90px;
left: 0px;
animation: one 60s linear infinite;
}
.fourlist2{
width: 70px;
top: 90px;
left: 20px;
animation: one 3600s linear infinite;
}
.fourlist3{
width: 50px;
top: 90px;
left: 40px;
animation: one 216000s linear infinite;
}
给予宽高，调整位置，然后就可以，最后添加动画效果
@keyframes one{
0%{
transform:rotate(90deg);
}
100%{
transform:rotate(450deg);
}
}
把时针，分针，秒针的动画时间分别设置成生活中的时间标准，这样便可以实现了，之所以是从90度旋转到450度，是因为开始位置是一条横线，在圆中心向左的位置，但是在手表上，是在圆心向上的位置，所以我先旋转了90度，这样时针，分针，秒针的旋转动画便是从90度到450度。