css html 抽屉,CSS3 书柜和抽屉

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

html {

background: -webkit-linear-gradient(top, #919191 0%, #f2f2f2 75%);

background: linear-gradient(to bottom, #919191 0%, #f2f2f2 75%);

}

.cabinet {

background-color: #202020;

width: 250px;

height: 400px;

padding: 10px;

margin: 80px auto;

border-radius: 3px;

}

.drawer {

position: relative;

width: 100%;

height: 50%;

border: 2px solid #000;

margin: 0 auto;

background: -webkit-linear-gradient(315deg, #828282 0%, #202020 40%);

background: linear-gradient(135deg, #828282 0%, #202020 40%);

background-size: 100%;

-webkit-transition: all 1s;

transition: all 1s;

box-shadow: 0 0 0 transparent;

z-index: 1;

}

.drawer:hover {

background-size: 200%;

-webkit-transform: scale(1.15);

-ms-transform: scale(1.15);

transform: scale(1.15);

z-index: 2;

box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

}

.drawer:hover .files {

display: block;

height: 25px;

top: -27px;

}

.wrapper {

margin: 0 auto;

top: 50%;

-webkit-transform: translatey(-50%);

-ms-transform: translatey(-50%);

transform: translatey(-50%);

position: relative;

width: 60px;

}

label {

display: block;

width: 75%;

height: 30px;

border: 2px solid #ddd;

margin-bottom: 30px;

box-shadow: inset 0px 0px 5px black;

margin: 0 auto 30px auto;

}

.handle {

display: block;

position: relative;

background: -webkit-linear-gradient(top, #ddd 0%, #5e5e5e 100%);

background: linear-gradient(to bottom, #ddd 0%, #5e5e5e 100%);

width: 100%;

height: 7px;

box-shadow: 0px 0px 5px black;

}

.files {

position: absolute;

background-color: beige;

width: 95%;

height: 0;

left: 0;

right: 0;

top: -2px;

margin: auto;

box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.2);

-webkit-transition: all 1s;

transition: all 1s;

}

.files:before,

.files:after {

position: absolute;

top: -10px;

height: 10px;

width: 50%;

box-shadow: -1px -2px 5px rgba(0, 0, 0, 0.2);

border-top-left-radius: 5px;

border-top-right-radius: 5px;

}

.files:before {

content: '';

background-color: beige;

left: 0;

}

.files:after {

content: '';

background-color: #eaeab4;

right: 0;

}