body { margin:0px; background:#FFF; } .clock { width:600px; height:600px; background:#000; margin:50px auto; -moz-border-radius:300px; -webkit-border-radius:300px; border-radius:300px; -moz-box-shadow:5px 5px 8px #999; -webkit-box-shadow:5px 5px 8px #999; box-shadow:5px 5px 8px #999; } .clock_bg { width:600px; height:500px; background:#000; -moz-border-radius:300px; -webkit-border-radius:300px; border-radius:300px; -moz-box-shadow:5px 5px 8px #999 inset; -webkit-box-shadow:5px 5px 8px #999 inset; box-shadow:5px 5px 8px #999 inset; padding:50px 0px; } .clock_nr1 { width:500px; height:500px; background:#DEDEDE; margin:0px auto; -moz-border-radius:250px; -webkit-border-radius:250px; border-radius:250px; -moz-box-shadow:3px 3px 5px #999; -webkit-box-shadow:3px 3px 5px #999; box-shadow:3px 3px 5px #999; } .clock_nr2 { width:500px; height:500px; background:#DEDEDE; -moz-border-radius:250px; -webkit-border-radius:250px; border-radius:250px; -moz-box-shadow:5px 5px 8px #999 inset; -webkit-box-shadow:5px 5px 8px #999 inset; box-shadow:5px 5px 8px #999 inset; position:relative; } .spot { position:absolute; top:50%; left:50%; width:2px; height:490px; margin:-245px auto auto -1px; } .spot span { display:block; width:2px; height:15px; background:#444; position:absolute; display:block; } .spot .span { display:block; width:4px; height:30px; background:#444; position:absolute; margin-left:-1px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; } .spot1 { position:absolute; top:50%; left:50%; width:20px; height:300px; margin:-150px auto auto -10px; display:inline-block; } .spot1 div { width:20px; height:160px; background:#000; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .spot2 { position:absolute; top:50%; left:50%; width:16px; height:400px; margin:-200px auto auto -8px; } .spot2 .div1 { width:8px; height:100px; background:#000; -moz-border-radius:4px 4px 0px 0px; -webkit-border-radius:4px 4px 0px 0px; border-radius:4px 4px 0px 0px; margin:0px auto; } .spot2 .div2 { width:16px; height:20px; background:#000; -moz-border-radius:5px 5px 3px 3px; -webkit-border-radius:5px 5px 3px 3px; border-radius:5px 5px 3px 3px; } .spot2 .div3 { width:12px; height:80px; background:#000; -moz-border-radius:3px 3px 10px 10px; -webkit-border-radius:3px 3px 10px 10px; border-radius:3px 3px 10px 10px; margin:0px auto; } .spot3 { position:absolute; top:50%; left:50%; width:16px; height:420px; margin:-210px auto auto -8px; } .spot3 .div1 { width:6px; height:260px; background:#c00; -moz-border-radius:3px 3px 0px 0px; -webkit-border-radius:3px 3px 0px 0px; border-radius:3px 3px 0px 0px; margin:0px auto; } .spot3 .div2 { width:16px; height:40px; background:#c00; -moz-border-radius:5px 5px 10px 10px; -webkit-border-radius:5px 5px 10px 10px; border-radius:5px 5px 10px 10px; } .spot0 { position:absolute; top:50%; left:50%; width:20px; height:20px; margin:-15px auto auto -15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; border:5px solid #c00; background:#8f2c00; background-image:-moz-linear-gradient(top,#ff4f02,#8f2c00); /* Firefox */background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ff4f02),color-stop(1,#8f2c00)); /* Saf4+,Chrome */ } .clock_nr2 b { font-size:58px; color:#4A4A4A; font-style:italic; display:block; width:110px; } .clock_nr2 .numeral_1 { position:absolute; top:60px; left:331px; } .clock_nr2 .numeral_2 { position:absolute; top:132px; left:392px; } .clock_nr2 .numeral_3 { position:absolute; top:218px; left:417px; } .clock_nr2 .numeral_4 { position:absolute; top:313px; left:389px; } .clock_nr2 .numeral_5 { position:absolute; top:381px; left:326px; } .clock_nr2 .numeral_6 { position:absolute; top:401px; left:228px; } .clock_nr2 .numeral_7 { position:absolute; top:381px; left:134px; } .clock_nr2 .numeral_8 { position:absolute; top:313px; left:69px; } .clock_nr2 .numeral_9 { position:absolute; top:218px; left:38px; } .clock_nr2 .numeral_10 { position:absolute; top:132px; left:54px; } .clock_nr2 .numeral_11 { position:absolute; top:60px; left:120px; } .clock_nr2 .numeral_12 { position:absolute; top:32px; left:216px; }
更新时间:2023-04-26 22:14:41