这是一个综合的案例，用到了transition（动画，动作在单位时间内完成），transform（旋转），border-radius（圆角），absolute（定位），linear-gradient（线性渐变）,box-shadow（阴影）。
这里记录一下备忘，贴出源码，方便下次使用时理解，粘贴代码可以直接可以看效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*禁用所有元素的内外边距*/
*{
margin: 0;
padding: 0px;
}
/*禁用浏览器的滚动条*/
html,body{
height:100%;
overflow: hidden;
}
/*初始最外层的容器*/
#wrapper{
height:100%;
overflow: auto;
}
/*居中定位*/
#wrap{
position: absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
margin: auto;
456px;
height: 456px;
/*150 s 完成动画（选装48000 度）*/
transition: 150s;
}
/*鼠标悬浮开启动画*/
#wrap:hover{
transform: rotate(48000deg);
}
/* > 代表直接下属的子元素*/
#wrap > div{
position: relative;
150px;
height:150px;
/**/
float: left;
border-radius: 0 100%;
/*box-shadow: 10px 10px pink;*/
/*border: solid 1px black;*/
background-image: linear-gradient(deeppink,white);
}
/*选中直接下属的第一个子元素*/
#wrap > div:nth-child(1){
top:75px;
left:75px;
background-image: linear-gradient(green,pink);
}
#wrap > div:nth-child(2){
top: 43px;
right: 10px;
transform: rotate(40deg);
background-image: linear-gradient(yellow,pink);
}
#wrap > div:nth-child(3){
top: 63px;
right: 91px;
transform: rotate(80deg);
background-image: linear-gradient(red,pink);
}
#wrap > div:nth-child(4){
left: 256px;
top: -29px;
transform: rotate(120deg);
background-image: linear-gradient(orange,pink);
}
#wrap > div:nth-child(5){
left: 97px;
top: 43px;
transform: rotate(160deg);
background-image: linear-gradient(green,pink);
}
#wrap > div:nth-child(6){
left: -106px;
top: 95px;
transform: rotate(200deg);
background-image: linear-gradient(yellow,pink);
}
#wrap > div:nth-child(7){
left: 124px;
top: -51px;
transform: rotate(240deg);
background-image: linear-gradient(red,pink);
}
#wrap > div:nth-child(8){
left: -89px;
top: -92px;
transform: rotate(280deg);
background-image: linear-gradient(orange,pink);
}
#wrap > div:nth-child(9){
left: -259px;
top: -163px;
transform: rotate(320deg);
background-image: linear-gradient(#00ff80,pink);
/*75px;*/
}
#wrap > div:nth-child(9){
left: -259px;
top: -163px;
transform: rotate(320deg);
}
</style>
</head>
<body>
<div id="wrapper">
<div id="wrap">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>