**css时钟**
纯css时钟表盘和动画要求实际结果表盘表盘底部针
代码
纯css时钟表盘和动画
web前端的老师留下了一个只能用css做时钟的作业，尝试了一下，但表针拼接的还是有点怪异。
要求
实际结果
表盘
这里我的表盘主要由表盘底部，针，和响应顶部三部分
表盘底部
表盘底部是三层，分别有三个div块， 最下面是一个绿色的大圆，其上是一个稍小的蓝色圆，蓝色圆上面是另一种蓝色的半圆，共同构成表盘底部 表盘数字是另外一个css样式.te控制
针
这里我的针是拼合的，有少许不和谐
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>时钟</title>
<style type="text/css">
.clock{
width: 540px
;
height: 540px
;
position: relative
;
}
.clock_table_0{
margin: 200px 0 0 0
;
width: 540px
;
height: 540px
;
position: absolute
;
background: rgb(187,187,0
);
border-radius: 50% 50% 50% 50%
;
border: 1px solid black
;
transform: rotate(45deg
);
}
.clock_table_1{
position: absolute
;
top: 20px
;
margin: 0px 0px 0px 0px
;
width:500px
;
height:500px
;
border-radius: 250px 250px 250px 250px
;
//
box-shadow:0px 0px 20px red
;
//
transform:rotate(45deg
);
//
background:rgb(193,224,255
);
background:radial-gradient(circle,
rgb(193,224,255
) 55%,
rgb(154,178,201
));
}
.clock_table_2{
position: absolute
;
top: -480px
;
margin: 0px 0px 0px 250px
;
width:250px
;
height:500px
;
border-radius: 0px 250px 250px 0px
;
//
transform:rotate(45deg
);
//
background:rgb(178,210,243
);
background:radial-gradient(circle,
rgb(178,210,243
) 55%,
rgb(154,178,201
));
}
.te{
font-size: 64px
;
color:rgb(193,224,255
);
text-shadow: 5px 0px 1px
rgb(126,145,164
);
}
.shizhen_ro{
width: 200px
;
height: 36px
;
left: 5px
;
top: -628px
;
animation: action_0 360s linear infinite
;
}
@keyframes action_0 {
from {
transform: rotate(-90deg
) ;
}
to {
transform: rotate(270deg
) ;
}
}
.shizhen_0{
width: 100px
;
height: 18px
;
background: black
;
border-radius: 18px
;
//
border-left: 20px solid red
;
border-left: 20px solid transparent
;
border-right: 20px solid transparent
;
border-bottom: 18px solid
rgb(86,86,86
);
left: 60px
;
transform: rotate(180deg
);
}
.shizhen_1{
width: 0
;
height: 0
;
left:59px
;
top: 9px
;
transform: rotate(90deg
);
border-left: 18px solid transparent
;
border-right: 18px solid transparent
;
border-top: 20px solid
rgb(86,86,86
);
border-radius: 100%
;
}
.fenzhen_ro{
width: 260px
;
height: 24px
;
left: 5px
;
top: -655px
;
animation: action_1 30s linear infinite
;
}
@keyframes action_1 {
from {
transform: rotate(-90deg
) ;
}
to {
transform: rotate(270deg
) ;
}
}
.fenzhen_0{
width: 130px
;
height: 12px
;
background: rgb(0,86,162
);
border-radius: 12px
;
//
border-left: 20px solid red
;
border-left: 13px solid transparent
;
border-right: 13px solid transparent
;
border-bottom: 12px solid
rgb(0,129,243
);
left: 75px
;
transform: rotate(180deg
);
}
.fenzhen_1{
width: 0
;
height: 0
;
left:70px
;
top: 6px
;
transform: rotate(90deg
);
border-left: 12px solid transparent
;
border-right: 12px solid transparent
;
border-top: 13px solid
rgb(0,129,243
);
border-radius: 100%
;
}
.miaozhen_ro{
width: 320px
;
height: 16px
;
left: 5px
;
top: -690px
;
visibility:hidden
;
animation: action_2 60s linear infinite
;
}
@keyframes action_2 {
from {
transform: rotate(-90deg
) ;
}
to {
transform: rotate(270deg
) ;
}
}
.miaozhen_0{
width: 160px
;
height: 8px
;
background: rgb(255,25,25
);
border-radius: 8px
;
//
border-left: 20px solid red
;
border-left: 9px solid transparent
;
border-right: 9px solid transparent
;
border-bottom: 8px solid
rgb(179,25,25
);
left: 75px
;
transform: rotate(180deg
);
}
.miaozhen_1{
width: 0
;
height: 0
;
left:84px
;
top: 6px
;
transform: rotate(90deg
);
border-left: 8px solid transparent
;
border-right: 8px solid transparent
;
border-top: 9px solid
rgb(179,25,25
);
border-radius: 100%
;
}
.ta{
width: 540px
;
height: 540px
;
border-radius: 50%
;
}
</style>
<script type="text/javascript">
function miaozhen_1()
{
document.
getElementById("miaozhen").style.visibility=
"visible";
document.
getElementById("fenzhen").style.animationDuration=
"3600s";
document.
getElementById("shizhen").style.animationDuration=
"43200s";
}
function miaozhen_2()
{
document.
getElementById("miaozhen").style.visibility=
"hidden";
document.
getElementById("fenzhen").style.animationDuration=
"30s";
document.
getElementById("shizhen").style.animationDuration=
"360s";
}
</script>
</head>
<body><center>
<!--表盘-->
<div class=
"ta" onMouseOver=
"miaozhen_1()" style=
"z-index: 100;position: relative" onMouseOut=
"miaozhen_2()">
<div id=
"clock" class=
"Clock" style=
"z-index: -100;position: relative">
<div class=
"clock_table_0" style=
"z-index: -90;position: relative" >
<div class=
"clock_table_1" style=
"z-index: -80;position: relative"></div>
<div class=
"clock_table_2" style=
"z-index: -50;position: relative"></div>
</div>
<!--表盘数字-->
<div class=
"te" style=
"z-index: -20;position: relative;top: -530px">12</div>
<div class=
"te" style=
"z-index: -20;position: relative;left: 220px;top:-399px">3</div>
<div class=
"te" style=
"z-index: -20;position: relative;top: -266px">6</div>
<div class=
"te" style=
"z-index: -20;position: relative;left:-220px;top: -565px">9</div>
<!--时针-->
<div id=
"shizhen" class=
"shizhen_ro" style=
"z-index: -15;position: relative">
<div class=
"shizhen_0" style=
"z-index: -10;position: relative">
<div class=
"shizhen_1" style=
"z-index: 0;position: relative"></div>
</div>
</div>
<!--分针-->
<div id=
"fenzhen" class=
"fenzhen_ro" style=
"z-index: -5;position: relative">
<div class=
"fenzhen_0" style=
"z-index: 0;position: relative">
<div class=
"fenzhen_1" style=
"z-index: 10;position: relative"></div>
</div>
</div>
<!--秒针-->
<div id=
"miaozhen" class=
"miaozhen_ro" style=
"z-index: 15;position: relative" >
<div class=
"miaozhen_0" style=
"z-index: 20;position: relative">
<div class=
"miaozhen_1" style=
"z-index: 30;position: relative"></div>
</div>
</div>
</div>
</div>
</center></body>
</html>
