.box {
	margin:100px;
}
p {
	font-size:20px;
	text-align:center;
	color:#fff;
	line-height:20px;
}
.yuan {
	width:600px;
	height:600px;
	border-radius:50%;
	border-left:2px solid #ccc;
	position:relative;
}
.yuan .yuan1 {
	position:absolute;
	width:40px;
	height:40px;
	background:#ccc;
	border-radius:50%;
	bottom:-20px;
	left:50%;
	transform-origin:20px -300px;
	transition:all 1s;
	-webkit-transition:all 1s;
	-moz-transition:all 1s;
	-ms-transition:all 1s;
}
.yuan .yuan1.active {
	width:80px;
	height:80px;
	bottom:-40px;
	transform-origin:40px -300px;
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
}
.yuan .yuan1.active p {
	transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
}
.yuan .yuan2 {
	position:absolute;
	width:40px;
	height:40px;
	background:red;
	border-radius:50%;
	top:-20px;
	left:50%;
	transform-origin:20px 320px;
	transition:all 1s;
	-webkit-transition:all 1s;
	-moz-transition:all 1s;
	-ms-transition:all 1s;
}
.yuan .yuan2.active {
	width:80px;
	height:80px;
	top:-40px;
	transform-origin:20px 360px;
	transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
}
.yuan .yuan2.active p {
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
}
.yuan .yuan3 {
	position:absolute;
	width:80px;
	height:80px;
	background:blue;
	border-radius:50%;
	bottom:50%;
	left:-40px;
	transform-origin:120px 0;
	transition:all 1s;
	-webkit-transition:all 1s;
	-moz-transition:all 1s;
	-ms-transition:all 1s;
}
.yuan .yuan3.active_b {
	width:40px;
	height:40px;
	bottom:-20px;
	transform-origin:180px -140px;
	transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
}
.yuan .yuan3.active_b p {
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
}
.yuan .yuan3.active_t {
	width:40px;
	height:40px;
	bottom:100%;
	transform-origin:180px 200px;
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
}
.yuan .yuan3.active_t p {
	transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
}
ul {
	position:absolute;
	width:100%;
	left:0;
	top:200px;
}
ul li {
	padding-left:200px;
	display:none;
	font-size:20px;
}
ul li.active {
	display:block;
}