CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

.panel {

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

box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.3);

border-radius: 25px;

-webkit-transition: 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);

transition: 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);

-webkit-transform: rotateX(-90deg);

transform: rotateX(-90deg);

}

.panel.is--open {

-webkit-transform: rotateX(0deg);

transform: rotateX(0deg);

}

.panel__content {

padding-bottom: 4em;

background: #fff;

border-top-left-radius: 25px;

border-top-right-radius: 25px;

color: #5a5a5a;

text-align: center;

}

.panel__content h4 {

padding: 1.5em 0;

border-bottom: 2px solid #ededed;

color: #865fdf;

font-size: 1.15em;

font-weight: 700;

text-transform: uppercase;

}

.panel__content h2 {

padding: 0.5em 1.5em;

font-size: 3em;

font-weight: 300;

}

.panel__content p {

margin: auto;

width: 55%;

font-size: 1.15em;

font-weight: 300;

line-height: 1.4;

}

.panel__flaps {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-perspective: 1000px;

perspective: 1000px;

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

transform-style: preserve-3d;

}

.flap {

height: 100px;

background: #865fdf;

}

.flap__btn {

width: calc((100% - 212px) / 2);

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;

position: relative;

background: #8f69e8;

color: white;

cursor: pointer;

font-size: 2.25em;

font-weight: 700;

z-index: 1;

-webkit-transition: 0.2s ease;

transition: 0.2s ease;

-webkit-transform-origin: top center;

-ms-transform-origin: top center;

transform-origin: top center;

}

.flap__btn:hover {

background: #865fdf;

-webkit-transform: rotateX(-25deg);

transform: rotateX(-25deg);

}

.outer {

width: 106px;

}

.flap--left {

border-bottom-left-radius: 25px;

-webkit-transform-origin: top right;

-ms-transform-origin: top right;

transform-origin: top right;

}

.flap--right {

border-bottom-right-radius: 25px;

-webkit-transform-origin: top left;

-ms-transform-origin: top left;

transform-origin: top left;

}

.is--open .outer {

-webkit-animation: swing 1.5s 0.2s ease;

animation: swing 1.5s 0.2s ease;

}

.is--open .flap__btn:first-of-type {

-webkit-animation: swing 1.5s 0.3s ease;

animation: swing 1.5s 0.3s ease;

}

.is--open .flap__btn:last-of-type {

-webkit-animation: swing 1.5s 0.4s ease;

animation: swing 1.5s 0.4s ease;

}

@-webkit-keyframes swing {

10% {

-webkit-transform: rotateX(25deg);

transform: rotateX(25deg);

}

50% {

-webkit-transform: rotateX(-15deg);

transform: rotateX(-15deg);

}

75% {

-webkit-transform: rotateX(5deg);

transform: rotateX(5deg);

}

90% {

-webkit-transform: rotateX(-2.5deg);

transform: rotateX(-2.5deg);

}

100% {

-webkit-transform: rotateX(0deg);

transform: rotateX(0deg);

}

}

@keyframes swing {

10% {

-webkit-transform: rotateX(25deg);

transform: rotateX(25deg);

}

50% {

-webkit-transform: rotateX(-15deg);

transform: rotateX(-15deg);

}

75% {

-webkit-transform: rotateX(5deg);

transform: rotateX(5deg);

}

90% {

-webkit-transform: rotateX(-2.5deg);

transform: rotateX(-2.5deg);

}

100% {

-webkit-transform: rotateX(0deg);

transform: rotateX(0deg);

}

}

.replay {

position: absolute;

top: 1em;

left: 1em;

padding: 0.5em;

background: #865fdf;

border-radius: 3px;

color: white;

cursor: pointer;

opacity: 0;

pointer-events: none;

-webkit-transition: all 0.3s;

transition: all 0.3s;

}

.replay:hover {

background: #8f69e8;

}

.replay:active {

-webkit-transform: scale(0.9);

-ms-transform: scale(0.9);

transform: scale(0.9);

}

.replay.is--active {

opacity: 1;

pointer-events: initial;

}

*,

*:before,

*:after {

-webkit-font-smoothing: antialiased;

font-smoothing: antialiased;

text-rendering: optimizeLegibility;

box-sizing: border-box;

}

html,

body {

height: 100%;

}

body {

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;

background: #2e2e2e;

font-family: "Lato", Arial, sans-serif;

-webkit-perspective: 1000px;

perspective: 1000px;

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

transform-style: preserve-3d;

}