* {
margin:0;
padding:0;
}
html,body {
position:absolute;
width:100%;
height:100%;
background:#E6E9EF;
}
.clock_Container {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:400px;
height:400px;
border-radius:50%;
transition:all 0.5s;
filter:blur(3px);
padding:10px;
background:linear-gradient(to right bottom,#D7DEE8,#F9FAFB);
}
.clock_Container .clock_main {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:350px;
height:350px;
border-radius:50%;
filter:blur(2px);
padding:10px;
background:#E6E9EF;
}
.clock_Container .clock_main .center {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:30px;
height:30px;
border:1px solid #000;
border-radius:50%;
}
.pointer_Container {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:400px;
height:400px;
border-radius:50%;
padding:10px;
}
.pointer_Container .pointer_main {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:10px;
height:10px;
}
.pointer_main .pointer_Hour {
position:absolute;
top:-920%;
left:50%;
transform:translateX(-50%) rotate(0deg);
transform-origin:center bottom;
width:15px;
height:80px;
border-radius:10px;
background:#333;
}
.pointer_main .pointer_Minute {
position:absolute;
top:-1300%;
left:50%;
transform:translateX(-50%) rotate(0deg);
transform-origin:center bottom;
width:12px;
height:120px;
border-radius:10px;
background:#F55555;
}
.pointer_main .pointer_Second {
position:absolute;
top:-1600%;
left:50%;
transform:translateX(-50%) rotate(0deg);
transform-origin:center bottom;
width:10px;
height:150px;
border-radius:10px;
background:#999;
}
.clock_wrap {
width:auto;
height:auto;
}
更新时间:2021-01-21 23:45:01