二、CSS樣式

/*注意這里為style標(biāo)簽添加了一個(gè)id，在JavaScript里面有獲取，并往里面添加css樣式。*/
body,ul{
	margin:0;
	padding:0;}
body{
	font:1em "microsoft Yahei";
	color:#666;
	background-color:#333;}
h2{
	text-align:center;
	color:#eee;
	font-size:3rem;}
li{
	list-style:none;}
p{
	text-align:center;
	color:#ddd;
	position:relative;
	top:100px;
	}
a{
	color:#999;
	text-decoration:none;
	transition:0.2s;}
a:hover{
	color:#ddd;}
#clock-wrap{
	width:400px;
	height:400px;
	border:10px solid #fff;
	border-radius:50%;
	margin:80px auto 0;
	position:relative;
	box-shadow:0 0 40px rgba(0,0,0,1)}
#clock ul{
	width:400px;
	height:400px;
	position:relative;
	border-radius:50%;
	background:radial-gradient(circle at center,#667eea,#764ba2);
	box-shadow:0 0 50px rgba(0,0,0,0.5) inset; /*設(shè)置內(nèi)陰影*/
	}
#clock ul li{
	position:absolute;
	left:50%;
	margin-left:-2px;
	top:0;
	width:4px;
	height:10px;
	background:rgba(255,255,255,.5);
	transform-origin:center 200px; /*li的旋轉(zhuǎn)中心點(diǎn)在圓形中間。*/
	}
#clock li:nth-child(5n+1){ /*5個(gè)刻度為一組，每一組的第一個(gè)刻度要長一點(diǎn)。*/
	height:18px;
	}
#num{
	position:absolute;
	width:360px;
	height:360px;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	}
#num li{
	position:absolute;
	left:50%;
	margin-left:-10px;
	top:0;
	color:rgba(255,255,255,.5);
	font:2em Arial, Helvetica, sans-serif;	
	transform-origin:center 180px;}

#hour,#min,#sec{
	background:#fff;
	position:absolute;
	left:50%;
	top:50%;
	transform-origin:bottom; /*時(shí)針的旋轉(zhuǎn)點(diǎn)在自己的底部。*/
	box-shadow:0 0 6px rgba(0,0,0,.5)
	}
#hour{
	width:14px;
	height:100px;
	margin-left:-7px;
	margin-top:-100px;
	border-radius:3px;
	}
#min{
	width:10px;
	height:150px;
	margin-left:-5px;
	margin-top:-150px;
	border-radius:2px;
	}
#sec{
	width:4px;
	height:180px;
	margin-left:-2px;
	margin-top:-180px;
	border-radius:1px;
	}
#circle{
	width:40px;
	height:40px;
	border-radius:50%;
	background:#fff;
	position:absolute;
	left:50%;
	margin-left:-20px;
	top:50%;
	margin-top:-20px;
	box-shadow:0 0 20px rgba(0,0,0,.4)}

三、JavaScript代碼

以上是“css3如何利用transform打造走動(dòng)的2D時(shí)鐘”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！