[CSS3技术]Pure CSS3 Circle Menu

图片：150446wefz9qj2zllljejl.jpg

 
[*]
 
[*]
 
[*]
 
[*]
 
[*]
 

body {
 background: -*-radial-gradient(#fff 10%,#fefefe 20%,#d7d7d7);
}
.demo {
 text-align: left;
}
.demo ul {
 position: relative;
 width: 200px;
 height: 200px;
 margin: 40px auto 0;
}
.pie {
 position: absolute;
 width: 200px;
 height: 200px;
 border-radius: 100px;
 clip: rect(0px,100px,200px,0px);
 transform:rotate(18deg) translateZ(0);
 box-shadow: 0 0 10px 3px rgba(255,255,255,.85) inset;
}
.demo li {
 position: absolute;
 width: 200px;
 height: 200px;
 clip: rect(100px,200px,200px,0px);
}
.deg_1{
 transform:rotate(162deg);
}
.deg_2{
 transform:rotate(234deg);
}
.deg_3{
 transform:rotate(306deg);
}
.deg_4{
 transform:rotate(378deg);
}
.deg_5{
 transform:rotate(450deg);
}
.deg_1 .pie {
 background-image: -*-linear-gradient(top,#f16d4b,#e15f3d);
}
.deg_2 .pie {
 background-image: -*-linear-gradient(top,#a2be5f,#98b454);
}
.deg_3 .pie {
 background-image: -*-linear-gradient(top,#f7b71b,#fec332);
}
.deg_4 .pie {
 background-image: -*-linear-gradient(top,#edeeef,#e7ecef);
}
.deg_5 .pie {
 background-image: -*-linear-gradient(top,#a1d5dd,#77bcc7);
}
.pie:after {
 position: absolute;
 top: 120px;
 left: 45px;
 font-family: 'brankic1979';
 font-style: normal;
 speak: none;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 font-size: 36px;
 color: rgba(0,0,0,.25);
}
.deg_1 .pie:after {
 content:"e041";
 transform: rotate(180deg);
}
.deg_2 .pie:after {
 content:"e04b";
 transform: rotate(180deg);
}
.deg_3 .pie:after {
 content:"e09b";
 transform: rotate(34deg);
}
.deg_4 .pie:after {
 content:"e098";
 transform: rotate(322deg);
}
.deg_5 .pie:after {
 content:"e081";
 transform: rotate(250deg);
}
.dot {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 30px;
 height: 30px;
 margin: -15px 0 0 -15px;
 border-radius: 15px 15px 15px 0;
 border: 1px solid #eee;
 box-shadow: 0 0 8px rgba(0,0,0,.37);
 background-image: -*-linear-gradient(top,#fcfcfd,#e1e6e9);
 transform: rotate(28deg);
}
.dot:after {
 position: absolute;
 top: 18px;
 left: 5px;
 color: #fff;
 content: "";
 width: 0;
 height: 10px;
 border-left: 1px solid #adadad;
 box-shadow: 1px 0 0 rgba(255,255,255,.5);
 transform: rotate(45deg);
}
@font-face {
 font-family: 'brankic1979';
 src:url('fonts/brankic1979.eot');
 src:url('fonts/brankic1979.eot?#iefix') format('embedded-opentype'),
 url('fonts/brankic1979.svg#brankic1979') format('svg'),
 url('fonts/brankic1979.woff') format('woff'),
 url('fonts/brankic1979.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}