css实现盒子缓慢展开效果,纯CSS3 创意菜单 盒子展开动画

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400|Dosis:200,300,400);

*, *:before, *:after {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box; }

body {

padding: 20px 0;

background: #111; }

#tog {

margin: auto;

padding: 0;

display: block;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

width: 140px;

height: 140px;

background: #fafafa;

font-family: 'Dosis';

font-weight: 200;

font-size: 1.8em;

text-align: center;

line-height: 140px;

color: #111;

cursor: pointer;

-webkit-transition: all 0.25s;

-moz-transition: all 0.25s;

-ms-transition: all 0.25s;

-o-transition: all 0.25s;

transition: all 0.25s;

z-index: 125; }

#tog:hover {

background: #7a3fae;

color: #fafafa; }

#menu {

margin: auto;

padding: 0;

display: block;

position: absolute;

top: 0;

right: 0px;

bottom: 0;

left: 0;

width: 140px;

height: 140px;

background: red;

-webkit-transition: all 0.1s;

-moz-transition: all 0.1s;

-ms-transition: all 0.1s;

-o-transition: all 0.1s;

transition: all 0.1s;

z-index: 100; }

.button {

margin: 0;

padding: 0;

display: block;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

width: 140px;

height: 140px;

background: #f0f0f0;

font-family: 'Dosis';

font-weight: 200;

font-size: 1.8em;

text-align: center;

line-height: 140px;

color: #111;

cursor: pointer;

-webkit-transition: all 0.25s;

-moz-transition: all 0.25s;

-ms-transition: all 0.25s;

-o-transition: all 0.25s;

transition: all 0.25s; }

.button:hover {

background: none;

color: #fafafa; }

.button:active {

color: #7a3fae; }

#check {

display: none; }

#check:checked ~ #tog {

background: #111;

color: #fafafa; }

#check:checked ~ #menu .button:nth-child(1) {

top: -20px; }

#check:checked ~ #menu .button:nth-child(1):hover {

top: -140px; }

#check:checked ~ #menu .button:nth-child(2) {

left: 20px; }

#check:checked ~ #menu .button:nth-child(2):hover {

left: 140px; }

#check:checked ~ #menu .button:nth-child(3) {

top: 20px; }

#check:checked ~ #menu .button:nth-child(3):hover {

top: 140px; }

#check:checked ~ #menu .button:nth-child(4) {

left: -20px; }

#check:checked ~ #menu .button:nth-child(4):hover {

left: -140px; }