html5球环绕菜单,HTML5 环绕式子菜单

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

}

body {

margin: 0;

background: linear-gradient(#eee, #ccc);

overflow: hidden;

}

.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 0.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;

}