Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
#wrap {
	position:fixed;
	left:0;
	top:300px;
	width:800px;
	height:800px;
	border:1px solid #000;
	position:fixed;
	left:0;
	top:0;
	color:gold;
	font-size:14px;
	position:relative;
	background:#000;
	line-height:20px;
}
#wrap .wrap_inner {
	width:800px;
	height:800px;
	background:#000;
	position:relative;
	border-radius:50%;
}
#wrap .wrap_inner .timeout {
	width:800px;
	height:800px;
	position:absolute;
	background:transparent;
}
#wrap .wrap_inner .timeout:nth-of-type(1) {
	transition:1s linear;
	box-shadow:0 0 20px gold;
	border-radius:50%;
}
#wrap .wrap_inner .timeout:nth-of-type(2) {
	width:600px;
	height:600px;
	left:100px;
	top:100px;
	transition:1s linear;
}
#wrap .wrap_inner .timeout:nth-of-type(3) {
	width:400px;
	height:400px;
	left:200px;
	top:200px;
	transition:1s linear;
}
#wrap .wrap_inner .timeout:nth-of-type(4) {
	width:300px;
	height:300px;
	left:250px;
	top:250px;
	transition:1s linear;
}
#wrap .wrap_inner .timeout:nth-of-type(5) {
	width:200px;
	height:200px;
	left:300px;
	top:300px;
	transition:1s linear;
}
#wrap .wrap_inner .timeout .secbox {
	width:400px;
	height:20px;
	position:absolute;
	left:400px;
	top:390px;
	transform-origin:left center;
}
#wrap .wrap_inner .timeout .minbox {
	width:300px;
	height:20px;
	position:absolute;
	left:300px;
	top:290px;
	transform-origin:left center;
}
#wrap .wrap_inner .timeout .houbox {
	width:200px;
	height:20px;
	position:absolute;
	left:200px;
	top:190px;
	transform-origin:left center;
}
#wrap .wrap_inner .timeout .datbox {
	width:150px;
	height:20px;
	position:absolute;
	left:150px;
	top:140px;
	transform-origin:left center;
}
#wrap .wrap_inner .timeout .daybox {
	width:100px;
	height:20px;
	position:absolute;
	left:100px;
	top:90px;
	transform-origin:left center;
}
#wrap .zhizhen {
	width:400px;
	height:20px;
	background:rgba(255,255,255,.4);
	position:absolute;
	left:400px;
	top:390px;
	z-index:999;
}

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

罗盘时钟(原创)

更新时间:2019-11-18 18:54:03

这个demo用了cs3动画呈现的,其实也就是旋转命令。每一层用定位覆盖。就能实现这个小功能。

0