Html
    Css
    Js

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

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

拟物化时钟(原创)

更新时间:2021-01-21 23:45:01

0