html右侧浮动菜单,HTML5 浮动菜单动画

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

html,

body {

height: 100%;

font-family: 'Open Sans', sans-serif;

}

h1 {

font-weight: 900;

font-style: italic;

font-family: 'Open Sans', sans-serif;

text-align: center;

text-transform: uppercase;

color: #555;

}

a#menu-opener {

-webkit-transition: all 0.8s ease-in-out;

-moz-transition: all 0.8s ease-in-out;

transition: all 0.8s ease-in-out;

background-color: green;

background-image: -webkit-radial-gradient(green, #00b300);

background-image: radial-gradient(green, #00b300);

position: absolute;

right: 40px;

top: -128px;

width: 48px;

height: 48px;

border-radius: 50%;

display: block;

text-align: center;

z-index: 900;

}

a#menu-opener svg {

-webkit-transition: all 0.4s ease-in-out;

-moz-transition: all 0.4s ease-in-out;

transition: all 0.4s ease-in-out;

margin-top: 8px;

}

a#menu-opener svg path {

fill: #fff;

}

a#menu-opener.open {

-webkit-transform: rotateX(180deg);

-moz-transform: rotateX(180deg);

-ms-transform: rotateX(180deg);

-o-transform: rotateX(180deg);

transform: rotateX(180deg);

-webkit-filter: hue-rotate(-135deg);

filter: hue-rotate(-135deg);

top: 20px;

}

a#menu-opener.open svg {

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

-moz-transform: rotate(-405deg);

-ms-transform: rotate(-405deg);

-o-transform: rotate(-405deg);

transform: rotate(-405deg);

}

nav {

-webkit-transition: all 0.4s 0.2s;

-moz-transition: all 0.4s 0.2s;

transition: all 0.4s 0.2s;

position: fixed;

bottom: 0;

left: 0;

width: 100%;

max-height: 0;

}

nav.open {

max-height: 300px;

}

ul {

-webkit-transition: all 0.4s ease-in-out;

-moz-transition: all 0.4s ease-in-out;

transition: all 0.4s ease-in-out;

-webkit-transform: scaleY(0);

-moz-transform: scaleY(0);

-ms-transform: scaleY(0);

-o-transform: scaleY(0);

transform: scaleY(0);

-webkit-transform-style: preserve3d;

-moz-transform-style: preserve3d;

-ms-transform-style: preserve3d;

-o-transform-style: preserve3d;

transform-style: preserve3d;

-webkit-transform-origin: bottom;

-moz-transform-origin: bottom;

-ms-transform-origin: bottom;

-o-transform-origin: bottom;

transform-origin: bottom;

list-style: none;

position: relative;

bottom: 0;

left: 0;

width: 100%;

padding: 0;

margin: 0;

}

ul li {

-webkit-transition: all 0.2s;

-moz-transition: all 0.2s;

transition: all 0.2s;

background: #c8c8c8;

display: block;

padding: 6px 20px;

color: #555;

}

ul li:hover {

color: #f7486a;

background: #afafaf;

font-weight: 900;

}

ul.open {

-webkit-transform: scaleY(1);

-moz-transform: scaleY(1);

-ms-transform: scaleY(1);

-o-transform: scaleY(1);

transform: scaleY(1);

}