Html5液态粘合 菜单,HTML5 不错的一款侧翻导航栏+弹性菜单

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Raleway:500);

body {

width: 100%;

margin: 0;

padding: 0;

overflow: hidden;

background: #f2f2f3;

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

}

body h1 {

text-align: center;

margin-top: 5%;

}

.nav {

height: 100%;

position: fixed;

left: -2em;

top: 0;

z-index: 1000;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-perspective: 1000px;

perspective: 1000px;

}

.icon {

position: absolute;

left: 0;

top: 0;

z-index: 990;

height: 100%;

background: #262626;

}

.icon li {

border-bottom: 1px solid rgba(0, 0, 0, 0.3);

list-style-type: none;

}

.icon a {

display: block;

width: 64px;

height: 64px;

line-height: 64px;

text-align: center;

font-size: 1.6em;

color: #999;

text-shadow: 0 1px 0 black;

-webkit-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

}

.icon a:hover {

color: white;

-webkit-transform: translateX(10px) scale(1.2);

-ms-transform: translateX(10px) scale(1.2);

transform: translateX(10px) scale(1.2);

}

.nav:hover .text {

-webkit-transform: rotateY(0deg);

transform: rotateY(0deg);

}

.text {

position: absolute;

left: 63px;

top: 0;

z-index: 980;

height: 100%;

background: #262626;

border-right: 1px solid rgba(0, 0, 0, 0.3);

-webkit-transition: -webkit-transform 0.24s linear;

transition: transform 0.24s linear;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-transform-origin: left;

-ms-transform-origin: left;

transform-origin: left;

-webkit-transform: perspective(1000px) rotateY(90deg);

transform: perspective(1000px) rotateY(90deg);

}

.text li {

border-bottom: 1px solid rgba(0, 0, 0, 0.3);

}

.text a {

display: block;

width: 200px;

height: 64px;

line-height: 64px;

text-indent: 1em;

font-size: 1.4em;

text-decoration: none;

color: #999;

text-shadow: 0 1px 0 black;

-webkit-transition: all 0.5s ease;

transition: all 0.5s ease;

}

.text a:hover {

color: white;

-webkit-transform: translateX(-14px);

-ms-transform: translateX(-14px);

transform: translateX(-14px);

}

.nav:hover .info {

left: 0;

opacity: 1;

-webkit-transition: opacity 0.5s ease-in 0.1s;

transition: opacity 0.5s ease-in 0.1s;

}

.info {

position: absolute;

padding-left: 2em;

bottom: 30px;

z-index: 999;

width: 264px;

color: white;

text-align: center;

line-height: 1.6;

opacity: 0;

}

.info .logo p {

width: 100px;

height: 100px;

margin: 0 auto;

background: #262626;

opacity: 0.6;

overflow: hidden;

text-align: center;

-webkit-transition: all 0.5s ease;

transition: all 0.5s ease;

font-size: 2em;

}

.info .logo p:hover {

opacity: 1;

text-shadow: -1px 1px white;

}

.info .name {

font-size: 2em;

font-weight: bold;

letter-spacing: 2px;

color: #424242;

text-shadow: -1px -1px #4f4f4f, 1px 1px #121212;

}

.info .quote {

color: #444;

text-shadow: 1px 1px #121212;

}

.info .social a {

font-size: 2em;

color: #333;

letter-spacing: 0.5em;

text-shadow: 1px 1px #454545, -1px -1px #121212;

-webkit-transition: all 0.5s ease;

transition: all 0.5s ease;

}

.info .social a:hover {

color: white;

text-shadow: -1px -1px #575757, 1px 1px #121212;

}