Html
    Css
    Js

    
                        
body,div,p {
	font-family:'Microsoft Yahei';
	font-size:14px;
}
.box {
	width:400px;
	height:400px;
	border:10px solid #8bf2f1;
	margin:100px auto;
	border-radius:50%;
	box-shadow:0px 0px 20px 3px #444 inset;
	position:relative;
}
/*原点*/
        .origin {
	width:20px;
	height:20px;
	border-radius:50%;
	background:#ff0000;
	top:190px;
	left:190px;
	position:absolute;
}
/* 指针 */
        .clock_line {
	position:absolute;
	position:absolute;
	z-index:20;
}
.hour_line {
	width:100px;
	height:4px;
	top:198px;
	left:200px;
	background-color:#000;
	border-radius:2px;
	transform-origin:0 50%;
	box-shadow:1px -3px 8px 3px #aaa;
}
.minute_line {
	width:130px;
	height:2px;
	top:199px;
	left:190px;
	background-color:#000;
	transform-origin:7.692% 50%;
	box-shadow:1px -3px 8px 1px #aaa;
}
.second_line {
	width:170px;
	height:1px;
	top:199.5px;
	left:180px;
	background-color:#f60;
	transform-origin:11.765% 50%;
	box-shadow:1px -3px 7px 1px #bbb;
}
.dot_box {
	width:inherit;
	height:inherit;
}
/*时钟数*/
        .dot {
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	font-size:22px;
	position:absolute;
}
.clock-scale {
	width:195px;
	height:2px;
	transform-origin:0% 50%;
	z-index:7;
	position:absolute;
	top:199px;
	left:200px;
}
.scale-show {
	width:12px;
	height:2px;
	background-color:#555;
	float:left;
}
.scale-hidden {
	width:183px;
	height:2px;
	float:left;
}
/*日期*/
        .date_info {
	width:160px;
	height:28px;
	line-height:28px;
	text-align:center;
	position:absolute;
	top:230px;
	left:120px;
	z-index:11;
	color:#555;
	font-weight:bold;
}
.time_info {
	width:110px;
	height:35px;
	line-height:35px;
	text-align:center;
	position:absolute;
	top:270px;
	left:150px;
	z-index:11;
	color:#555;
	background:#253e3e;
}
.time {
	width:35px;
	height:35px;
	float:left;
	color:#fff;
	font-size:22px;
}
#minute_time {
	border-left:1px solid #fff;
	border-right:1px solid #fff;
}

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

动态美观圆形时钟

本时钟会获取本地时间自动更新,包含年月日时分秒和星期,美观大方实用。

0