html5点击展开的横向小三角,HTML5 三角形渐变背景的菜单展开动画

CSS

语言：

CSSSCSS

确定

body,

html {

height: 100%;

font-family: 'Source Sans Pro', sans-serif;

}

body {

background: url(https://unsplash.imgix.net/photo-1429305336325-b84ace7eba3b?dpr=2&fit=crop&fm=jpg&h=700&q=75&w=1050);

background-size: cover;

}

.menu-overlay {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 100;

}

.menu-overlay__menu {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

position: relative;

z-index: 1000;

height: 100%;

}

.menu-overlay__menu a,

.menu-overlay__menu a:link {

color: #e8effc;

display: block;

text-decoration: none;

margin-bottom: 20px;

font-weight: 700;

text-transform: uppercase;

font-size: 24px;

opacity: 0;

-webkit-transform: translateY(-100vh);

-ms-transform: translateY(-100vh);

transform: translateY(-100vh);

}

.menu-overlay__menu a:nth-child(1),

.menu-overlay__menu a:link:nth-child(1) {

-webkit-transition: opacity 0.3s ease-in-out 0.3s, -webkit-transform 0.1s linear;

transition: opacity 0.3s ease-in-out 0.3s, transform 0.1s linear;

}

.menu-overlay__menu a:nth-child(2),

.menu-overlay__menu a:link:nth-child(2) {

-webkit-transition: opacity 0.3s ease-in-out 0.6s, -webkit-transform 0.1s linear;

transition: opacity 0.3s ease-in-out 0.6s, transform 0.1s linear;

}

.menu-overlay__menu a:nth-child(3),

.menu-overlay__menu a:link:nth-child(3) {

-webkit-transition: opacity 0.3s ease-in-out 0.9s, -webkit-transform 0.1s linear;

transition: opacity 0.3s ease-in-out 0.9s, transform 0.1s linear;

}

.menu-overlay__menu a:nth-child(4),

.menu-overlay__menu a:link:nth-child(4) {

-webkit-transition: opacity 0.3s ease-in-out 1.2s, -webkit-transform 0.1s linear;

transition: opacity 0.3s ease-in-out 1.2s, transform 0.1s linear;

}

.menu-overlay__menu a:nth-child(5),

.menu-overlay__menu a:link:nth-child(5) {

-webkit-transition: opacity 0.3s ease-in-out 1.5s, -webkit-transform 0.1s linear;

transition: opacity 0.3s ease-in-out 1.5s, transform 0.1s linear;

}

.menu-overlay__menu a:nth-child(6),

.menu-overlay__menu a:link:nth-child(6) {

-webkit-transition: opacity 0.3s ease-in-out 1.8s, -webkit-transform 0.1s linear;

transition: opacity 0.3s ease-in-out 1.8s, transform 0.1s linear;

}

.menu-overlay__menu a:nth-child(7),

.menu-overlay__menu a:link:nth-child(7) {

-webkit-transition: opacity 0.3s ease-in-out 2.1s, -webkit-transform 0.1s linear;

transition: opacity 0.3s ease-in-out 2.1s, transform 0.1s linear;

}

.menu-overlay__menu a:nth-child(8),

.menu-overlay__menu a:link:nth-child(8) {

-webkit-transition: opacity 0.3s ease-in-out 2.4s, -webkit-transform 0.1s linear;

transition: opacity 0.3s ease-in-out 2.4s, transform 0.1s linear;

}

.menu-overlay__menu a:nth-child(9),

.menu-overlay__menu a:link:nth-child(9) {

-webkit-transition: opacity 0.3s ease-in-out 2.7s, -webkit-transform 0.1s linear;

transition: opacity 0.3s ease-in-out 2.7s, transform 0.1s linear;

}

.menu-overlay.active .menu-overlay__menu a,

.menu-overlay.active .menu-overlay__menu a:link {

opacity: 1;

-webkit-transform: translateY(0);

-ms-transform: translateY(0);

transform: translateY(0);

}

.menu-overlay svg {

background: url(https://unsplash.imgix.net/photo-1429305336325-b84ace7eba3b?dpr=2&fit=crop&fm=jpg&h=700&q=75&w=1050);

background-size: cover;

}

#menu {

position: fixed;

z-index: 500;

top: 28px;

right: 40px;

background: transparent;

padding: 8px 12px;

color: white;

border: 2px solid #3d588f;

}

svg {

width: 100%;

height: 100%;

position: absolute;

}

polygon {

opacity: 0;

mix-blend-mode: multiply;

}

.menu-overlay.active polygon {

opacity: 0.8;

}

#top-triangle {

fill: #708bc2;

-webkit-transition: all 0.2s linear 0s;

transition: all 0.2s linear 0s;

}

#right-triangle {

fill: #4563a1;

-webkit-transition: all 0.2s linear 0.2s;

transition: all 0.2s linear 0.2s;

}

#bottom-triangle {

fill: #708bc2;

-webkit-transition: all 0.2s linear 0.4s;

transition: all 0.2s linear 0.4s;

}

#left-triangle {

fill: #4563a1;

-webkit-transition: all 0.6s linear 0.6s;

transition: all 0.6s linear 0.6s;

}