html5 path菜单,HTML5 SVG画布外菜单动效 - 左侧弹性弧线滑入

CSS

语言：

CSSSCSS

确定

.content {

height: 100%;

}

*,

*:after,

*:before {

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

.clearfix:before,

.clearfix:after {

content: '';

display: table;

}

.clearfix:after {

clear: both;

}

body {

background: #b4bad2;

color: #fffce1;

font-weight: 400;

font-size: 1em;

font-family: Arial, sans-serif;

margin: 0;

}

a {

color: #4e4a46;

text-decoration: none;

outline: none;

}

a:hover,

a:focus {

color: #c94e50;

outline: none;

}

button:focus {

outline: none;

}

section {

padding: 1em;

text-align: center;

}

/* Header */

.codrops-header {

margin: 0 auto;

padding: 3em 2em;

text-align: center;

}

.codrops-header h1 {

margin: 50px auto;

font-weight: 800;

font-size: 3.75em;

line-height: 1;

}

.codrops-header h1 span {

display: block;

font-size: 50%;

font-weight: 400;

padding-top: 0.325em;

}

.codrops-links {

text-transform: uppercase;

font-weight: 700;

font-size: 0.69em;

line-height: 2.2;

padding: 1.61em 5em;

}

.codrops-links a {

display: inline-block;

padding: 0 1em;

text-decoration: none;

letter-spacing: 1px;

}

.codrops-icon:before {

margin: 0 4px;

text-transform: none;

font-weight: normal;

font-style: normal;

font-variant: normal;

line-height: 1;

speak: none;

-webkit-font-smoothing: antialiased;

}

html,

body,

.container,

.content-wrap {

overflow: hidden;

width: 100%;

height: 100%;

}

.container {

background: #373a47;

}

.menu-wrap a {

color: #b8b7ad;

}

.menu-wrap a:hover,

.menu-wrap a:focus {

color: #c94e50;

}

.content-wrap {

overflow-y: scroll;

-webkit-overflow-scrolling: touch;

-webkit-transition: -webkit-transform 0.3s;

transition: transform 0.3s;

}

.content {

position: relative;

background: #b4bad2;

}

.content::before {

position: absolute;

top: 0;

left: 0;

z-index: 10;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.3);

content: '';

opacity: 0;

-webkit-transition: opacity 0.3s, -webkit-transform 0s 0.3s;

transition: opacity 0.3s, transform 0s 0.3s;

-webkit-transform: translate3d(100%, 0, 0);

transform: translate3d(100%, 0, 0);

}

/* Menu Button */

.menu-button {

position: fixed;

z-index: 1000;

margin: 1em;

padding: 0;

width: 2.5em;

height: 2.25em;

border: none;

text-indent: 2.5em;

font-size: 1.5em;

color: transparent;

background: transparent;

}

.menu-button::before {

position: absolute;

top: 0.5em;

right: 0.5em;

bottom: 0.5em;

left: 0.5em;

background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);

content: '';

}

.menu-button:hover {

opacity: 0.6;

}

/* Close Button */

.close-button {

width: 16px;

height: 16px;

position: absolute;

right: 1em;

top: 1em;

overflow: hidden;

text-indent: 16px;

border: none;

z-index: 1001;

background: transparent;

color: transparent;

}

.close-button::before,

.close-button::after {

content: '';

position: absolute;

width: 2px;

height: 100%;

top: 0;

left: 50%;

background: #95a5a6;

}

.close-button::before {

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

}

.close-button::after {

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

transform: rotate(-45deg);

}

/* Menu */

.menu-wrap {

position: absolute;

z-index: 1001;

width: 300px;

height: 100%;

font-size: 1.15em;

-webkit-transform: translate3d(-300px, 0, 0);

transform: translate3d(-300px, 0, 0);

-webkit-transition: -webkit-transform 0.3s;

transition: transform 0.3s;

}

.menu {

background: #373a47;

width: calc(100% - 120px);

height: 100%;

padding: 2em 1em;

}

.icon-list {

width: 280px;

}

.icon-list a {

display: block;

padding: 0.8em;

}

.icon-list a i {

opacity: 0.5;

}

.icon-list a span {

margin-left: 10px;

text-transform: uppercase;

font-weight: 700;

letter-spacing: 1px;

font-size: 0.75em;

}

/* Morph Shape */

.morph-shape {

position: absolute;

width: 120px;

height: 100%;

top: 0;

right: 0;

fill: #373a47;

z-index: 1000;

}

/* Shown menu */

.show-menu .menu-wrap {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

.show-menu .content-wrap {

-webkit-transition-delay: 0.1s;

transition-delay: 0.1s;

-webkit-transform: translate3d(100px, 0, 0);

transform: translate3d(100px, 0, 0);

}

.show-menu .content::before {

opacity: 1;

-webkit-transition: opacity 0.3s;

transition: opacity 0.3s;

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}