html圆圈男女,html圆形导航导航

/*开始导航页样式表*/

html,body {

height:100%;

}

body {

margin:0;

overflow:hidden;

background:url(../images/bg.png) no-repeat center;

background-size:cover;

}

/*内容居中*/

body h1 {

text-align:center;

}

/*盒子样式*/

.selector {

position:absolute;

left:50%;

top:50%;

width:140px;

height:140px;

margin-top:-70px;

margin-left:-70px;

}

/*按钮*/

.selector,.selector button {

font-family:'Oswald',sans-serif;

font-weight:300;

}

.selector button {

position:relative;

width:100%;

height:100%;

padding:10px;

background:#428bca;

border-radius:50%;

border:0;

color:white;

font-size:20px;

cursor:pointer;

box-shadow:0 3px 3px rgba(0,0,0,0.1);

transition:all .1s;

}

.selector button:hover {

background:#3071a9;

}

.selector button:focus {

outline:none;

}

/*按钮结束*/

/*菜单*/

.selector ul {

position:absolute;

list-style:none;

padding:0;

margin:0;

top:-20px;

right:-20px;

bottom:-20px;

left:-20px;

}

.selector li {

position:absolute;

width:0;

height:100%;

margin:0 50%;

-webkit-transform:rotate(-360deg);

transition:all 0.8s ease-in-out;

}

.selector li input {

display:none;

}

.selector li input + label {

position:absolute;

left:50%;

bottom:100%;

width:0;

height:0;

line-height:1px;

margin-left:0;

background:#fff;

border-radius:50%;

text-align:center;

font-size:1px;

overflow:hidden;

cursor:pointer;

box-shadow:none;

transition:all 0.8s ease-in-out,color 0.1s,background 0.1s;

}

.selector li input + label:hover {

background:#f0f0f0;

}

.selector li input:checked + label {

background:#5cb85c;

color:white;

}

.selector li input:checked + label:hover {

background:#449d44;

}

.selector.open li input + label {

width:80px;

height:80px;

line-height:80px;

margin-left:-40px;

box-shadow:0 3px 3px rgba(0,0,0,0.1);

font-size:14px;

}

.selector.open li input + label a {

text-decoration:none;

color:#000;

}

/*菜单结束*/