Html
    Css
    Js


body {
	background-color:#333;
	margin:0;
	padding:0;
}
.container {
	width:500px;
	height:500px;
	position:relative;
}
.container > div {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	box-sizing:border-box;
	border-radius:50%;
}
.month {
	width:500px;
	height:500px;
	border:20px solid #eea2a4;
}
.date {
	width:400px;
	height:400px;
	border:20px solid #ad6598;
}
.hour {
	width:300px;
	height:300px;
	border:20px solid #2177b8;
}
.minute {
	width:200px;
	height:200px;
	border:20px solid #68b88e;
}
.second {
	width:100px;
	height:100px;
	border:20px solid #fcc515;
}
.left,.right {
	width:calc(50% + 20px);
	height:calc(100% + 40px);
	position:absolute;
	top:-20px;
	overflow:hidden;
}
.left {
	left:-20px;
}
.right {
	right:-20px;
}
.cir {
	width:200%;
	height:100%;
	border-radius:50%;
	box-sizing:border-box;
	transform:rotate(-45deg);
	color:#fff;
	line-height:0;
}
.left .cir {
	border-left:20px solid #333;
	border-top:20px solid #333;
	border-right:20px solid transparent;
	border-bottom:20px solid transparent;
	text-align:left;
}
.right .cir {
	position:relative;
	left:-100%;
	border-left:20px solid transparent;
	border-top:20px solid transparent;
	border-right:20px solid #333;
	border-bottom:20px solid #333;
	text-align:right;
}
.text {
	width:20px;
	height:calc(50% + 20px);
	color:#fff;
	position:absolute;
	left:50%;
	margin-left:-10px;
	top:-20px;
	box-sizing:border-box;
	transform-origin:bottom;
}

↑上面代碼改變,會自動顯示代碼結果 jQuery調用版本:2.1.4
 立即下載

時間環形圖

apex英雄最快下载 www.znvry.icu container下的子元素div分別為5個圓環的載體。

以類名為second的元素舉例。

second元素設置border形成圓環,并填充顏色。

second下面分兩個子元素,left和right各占second的一半,分左右兩邊。

left和right中各有一個cir元素用來畫環,環的顏色和背景色一致,cir的大小和位置要和second重合,正好蓋住second。

隨時間變化,right里面的cir旋轉,露出下方的second的圓環。

時間過半的時候,right里面的cir圓環隱藏,旋轉left里面的cir的圓環,更大程度上露出second的圓環。

left和right要設置overflow:hidden屬性,這樣left和right里面的cir旋轉的時候,超出部分隱藏,不會再次蓋住second的部分。

0