html 很简单

```

```

```.cn-button {
outline: none;
border: none;
color: #f06060;
text-align: center;
font-size: 1.8em;
padding-bottom: 1em;
height: 3.5em;
width: 3.5em;
background-color: #fff;
position: fixed;
left: 50%;
margin-left: -1.75em;
bottom: -1.75em;
border-radius: 50%;
cursor: pointer;
z-index: 11;
}```

`border-radius: 50%;`

```.cn-wrapper {
width: 26em;
height: 26em;
position: fixed;
z-index: 10;
bottom: 0;
left: 50%;
margin-left: -200px;
border: 1px solid #7C5089;
-webkit-transition: all .3s ease;
transition: all .3s ease;
border-radius: 50%;
overflow: hidden;
bottom: -13em;
-webkit-transform: scale(0);
}```

`-webkit-transform: scale(0);`

```.cn-wrapper li {
position: absolute;
font-size: 1.5em;
width: 10em;
height: 10em;
overflow: hidden;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
background-color: #eee;
-webkit-transition: all 1s ease;
transition: all 1s ease;
color: #aaa;
}```

`overflow: hidden;`

```.cn-wrapper li:first-child {
left: 50%;
top: 50%;
margin-top: -1.3em;
margin-left: -10em;
overflow: hidden;
-webkit-transform: rotate(0deg) skew(50deg);
}```

`-webkit-transform: rotate(0deg) skew(50deg);`

skew（50deg）就是在水平方向倾斜50度（姑且称之为度），rotate围绕自己旋转0度 也就是不转，第一个li不用转，只用倾斜就可以，后面的li要依次旋转36度，为什么36度？ 180/5

```.cn-wrapper li a {
display: block;
font-size: 1.2em;
height: 14.5em;
width: 13.5em;
position: absolute;
bottom: -6.75em;
right: -6.75em;
text-decoration: none;
color: white;
-webkit-transition: background-color .3s ease, -webkit-transform .8s ease;
transition: background-color .3s ease, -webkit-transform .8s ease;
transition: background-color .3s ease, transform .8s ease;
text-align: center;
padding-top: 2em;
padding-right: 20px;
-webkit-transform: skew(-50deg) rotate(-70deg);
}```

```text-align: center;
padding-top: 2em;
padding-right: 20px;```

`-webkit-transform: skew(-50deg) rotate(-70deg);`

OK，接下来就是一些基本的样式了

```

Insert title here

*{box-sizing:border-box;margin:0;padding:0;list-style:none;position:relative;}.cn-wrapper{width:26em;height:26em;position:fixed;z-index:10;bottom:0;left:50%;margin-left:-200px;border:1px solid #7C5089;-webkit-transition:all .3s ease;transition:all .3s ease;border-radius:50%;overflow:hidden;bottom:-13em;-webkit-transform:scale(0);}.open{-webkit-transform:scale(1);}.cn-wrapper li{position:absolute;font-size:1.5em;width:10em;height:10em;overflow:hidden;-webkit-transform-origin:100% 100%;transform-origin:100% 100%;background-color:#eee;-webkit-transition:all 1s ease;transition:all 1s ease;color:#aaa;}.cn-button{outline:none;border:none;color:#f06060;text-align:center;font-size:1.8em;padding-bottom:1em;height:3.5em;width:3.5em;background-color:#fff;position:fixed;left:50%;margin-left:-1.75em;bottom:-1.75em;border-radius:50%;cursor:pointer;z-index:11;}.cn-wrapper li a{display:block;font-size:1.2em;height:14.5em;width:13.5em;position:absolute;bottom:-6.75em;right:-6.75em;text-decoration:none;color:white;-webkit-transition:background-color .3s ease,-webkit-transform .8s ease;transition:background-color .3s ease,-webkit-transform .8s ease;transition:background-color .3s ease,transform .8s ease;text-align:center;border-radius:50%;padding-top:2em;padding-right:20px;-webkit-transform:skew(-50deg) rotate(-70deg);}.cn-wrapper li:first-child{left:50%;top:50%;margin-top:-1.3em;margin-left:-10em;overflow:hidden;-webkit-transform:rotate(0deg) skew(50deg);}.cn-wrapper li:nth-child(2){left:50%;top:50%;margin-top:-1.3em;margin-left:-10em;overflow:hidden;-webkit-transform:rotate(36deg) skew(50deg);}.cn-wrapper li:nth-child(3){left:50%;top:50%;margin-top:-1.3em;margin-left:-10em;overflow:hidden;-webkit-transform:rotate(72deg) skew(50deg);}.cn-wrapper li:nth-child(4){left:50%;top:50%;margin-top:-1.3em;margin-left:-10em;overflow:hidden;-webkit-transform:rotate(108deg) skew(50deg);}.cn-wrapper li:nth-child(5){left:50%;top:50%;margin-top:-1.3em;margin-left:-10em;overflow:hidden;-webkit-transform:rotate(144deg) skew(50deg);}.cn-wrapper li:nth-child(even) a{background-color:#a61414;background-color:hsla(0,88%,65%,1);}.cn-wrapper li:nth-child(odd) a{background-color:#a11313;background-color:hsla(0,88%,63%,1);}.cn-wrapper li a:hover{background-color:#a11313;}body{background-color:rgba(0,0,0,0.6);}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">

</script>
<script type="text/javascript">
var button = \$("#cn-button");
button.click(function(){
\$("#cn-wrapper").toggleClass("open");
if (button.text() === "+") {
button.text("-");
} else {
button.text("+");
}
});
//button.addEventLis
</script>
```