<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>模拟时钟</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
body::before{
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: linear-gradient(45deg,#e91e63,#e91e63 50%,
#ffc107 50%,#ffc107);
}
body::after{
content: "";
position: absolute;
top:-20px;
left:0;
width: 100%;
height: 100%;
background: linear-gradient(160deg,#03a9f4,#03a9f4 50%,
transparent 50%,transparent);
animation: animate 5s ease-in-out infinite;
}
@keyframes animate{
0%,100%{
transform: translateY(10px);
}
50%{
transform: translateY(-10px);
}
}
.container{
position: relative;
}
.container::before{
content: "";
position:absolute;
bottom: -150px;
width: 100%;
height: 60px;
background: radial-gradient(rgba(0,0,0,0.2),transparent,transparent);
border-radius: 50%;
}
.box{
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 220px;
height: 220px;
border-radius: 50%;
backdrop-filter:blur(25px);
border:1px solid rgba(255,255,255,0.5);
animation: animate 5s ease-in-out infinite;
animation-delay: -2.5s;
}
.box::before{
position: absolute;
content: "";
height: 220px;
width: 220px;
background:#fff;
border-radius: 50%;
box-shadow:inset -3px -3px 7px #ffffff73,
inset 3px 3px 5px rgba(94,104,121,0.288)
}
.box::after{
position: absolute;
content:"";
height: 120px;
width: 120px;
background:#fff;
border-radius: 50%;
box-shadow: -1px -1px 5px #ffffff73,
1px 1px 3px rgba(94,104,121,0.288);
}
.box .center-nut{
height: 10px;
width: 10px;
z-index:1;
border-radius: 50%;
border:1px solid #333;
background: #67CAF3
}
.indicators div{
width: 2px;
height: 10px;
background: #333;
position: absolute;
top:48%;
left: 49.5%;
transform: translateY(-50%);
}
.indicators div:nth-child(1){
transform: rotate(30deg) translateY(-100px);
}
.indicators div:nth-child(2){
transform: rotate(60deg) translateY(-100px);
}
.indicators div:nth-child(3){
transform: rotate(90deg) translateY(-100px);
}
.indicators div:nth-child(4){
transform: rotate(120deg) translateY(-100px);
}
.indicators div:nth-child(5){
transform: rotate(150deg) translateY(-100px);
}
.indicators div:nth-child(6){
transform: rotate(180deg) translateY(-100px);
}
.indicators div:nth-child(7){
transform: rotate(210deg) translateY(-100px);
}
.indicators div:nth-child(8){
transform: rotate(240deg) translateY(-100px);
}
.indicators div:nth-child(9){
transform: rotate(270deg) translateY(-100px);
}
.indicators div:nth-child(10){
transform: rotate(300deg) translateY(-100px);
}
.indicators div:nth-child(11){
transform: rotate(330deg) translateY(-100px);
}
.indicators div:nth-child(12){
transform: rotate(360deg) translateY(-100px);
}
.sec-hand,.min-hand,.hr-hand{
position: absolute;
}
.sec-hand,.sec{
height: 180px;
width: 180px;
z-index:6
}
.min-hand,.min{
height: 140px;
width: 140px;
z-index:5
}
.hr-hand,.hr{
height: 110px;
width: 110px;
z-index:4
}
.sec,.min,.hr{
display: flex;
justify-content: center;
position: absolute;
}
.sec::before{
position: absolute;
content:"";
height: 110px;
width: 3px;
background: #3498db;
}
.sec::after{
position: absolute;
content:"";
height: 35px;
width: 7px;
background: #3498db;
top:105px;
border-radius: 5px;
}
.min::before{
position: absolute;
content:"";
top:-15px;
width: 1px;
border-left: 3px solid transparent;
border-right:3px solid transparent ;
border-bottom: 60px solid #e95949;
}
.min::after{
position: absolute;
content:"";
top:40px;
width: 3px;
border-left:2px solid transparent;
border-right:2px solid transparent ;
border-top: 30px solid #e95949;
}
.hr::before{
position: absolute;
content:"";
width: 1px;
border-left: 3px solid transparent;
border-right:3px solid transparent ;
border-bottom: 30px solid #303030;
}
.hr::after{
position: absolute;
content:"";
top:34px;
width: 3px;
border-left:2px solid transparent;
border-right:2px solid transparent ;
border-top: 30px solid #303030;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="center-nut"></div>
<div class="center-nut2"></div>
<div class="indicators">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="sec-hand">
<div class="sec"></div>
</div>
<div class="min-hand">
<div class="min"></div>
</div>
<div class="hr-hand">
<div class="hr"></div>
</div>
</div>
</div>
<script>
let sec=document.querySelector(".sec")
let min=document.querySelector(".min")
let hr=document.querySelector(".hr")
setInterval(()=>{
let time = new Date();
let secs=time.getSeconds()*6;
let mins=time.getMinutes()*6;
let hrs=time.getHours()*30;
sec.style.transform=`rotateZ(${
secs}deg)`
min.style.transform=`rotateZ(${
mins}deg)`
hr.style.transform=`rotateZ(${
hrs+(mins/12)}deg)`
},1000)
</script>
</body>
</html>