Html
    Css
    Js

    
                        
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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.7.2
 立即下载

jquery css3网页时钟代码

更新时间:2023-04-26 22:14:41

0