* { 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