CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Lato:700);

* {

box-sizing: border-box;

}

html,

body {

height: 100%;

}

body {

-webkit-perspective: 1000px;

perspective: 1000px;

background-color: #49586e;

font-size: 14px;

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

}

.overlay {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

visibility: hidden;

z-index: 1;

-webkit-transition-property: background-color, visibility;

transition-property: background-color, visibility;

-webkit-transition-duration: 0.7s, 0s;

transition-duration: 0.7s, 0s;

-webkit-transition-timing-function: ease;

transition-timing-function: ease;

-webkit-transition-delay: 0s, 0.35s;

transition-delay: 0s, 0.35s;

}

.overlay.active {

-webkit-transition-delay: 0.35s 0s;

transition-delay: 0.35s 0s;

background-color: #309e72;

visibility: visible;

}

span {

width: 90%;

height: 8px;

margin-top: 20px;

display: block;

background-color: #96a5ba;

}

.contents {

position: absolute;

top: 50%;

left: 50%;

margin-top: -150px;

margin-left: -100px;

width: 200px;

height: 300px;

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

transform-style: preserve-3d;

z-index: 5;

}

.contents__front {

height: 100%;

position: relative;

background-color: #576983;

padding: 24px;

border-radius: 6px;

box-shadow: 0 3px 15px rgba(0, 0, 0, 0.45);

-webkit-transition-property: -webkit-transform, background-color;

transition-property: transform, background-color;

-webkit-transition-duration: 0.35s, 0.35s;

transition-duration: 0.35s, 0.35s;

-webkit-transition-timing-function: cubic-bezier(0.5, -0.15, 0.5, 0.05), ease;

transition-timing-function: cubic-bezier(0.5, -0.15, 0.5, 0.05), ease;

-webkit-transition-delay: 0s, 0s;

transition-delay: 0s, 0s;

}

.contents__btn {

position: absolute;

left: 0;

bottom: 0;

width: 100%;

height: 27px;

background-color: #309e72;

box-shadow: 0 1px 1px rgba(255, 255, 255, 0.25) inset;

border-radius: inherit;

overflow: hidden;

cursor: pointer;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

border: none;

z-index: 4;

}

.contents__btn:before {

content: '';

position: absolute;

top: 50%;

left: 50%;

width: 0;

height: 100%;

margin: auto;

background-color: #fff;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

-webkit-transition: width 0.175s ease;

transition: width 0.175s ease;

}

.contents__btn:focus {

outline: none;

}

.contents__back {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: #fff;

box-shadow: 0 3px 15px rgba(0, 0, 0, 0.45);

-webkit-transform: rotateX(-90deg) translateZ(150px);

transform: rotateX(-90deg) translateZ(150px);

opacity: 0;

-webkit-transition-property: -webkit-transform, opacity;

transition-property: transform, opacity;

-webkit-transition-duration: 0.35s, 0.35s;

transition-duration: 0.35s, 0.35s;

-webkit-transition-delay: 0s, 0.35s;

transition-delay: 0s, 0.35s;

-webkit-transition-timing-function: cubic-bezier(0.5, -0.3, 0.85, 0.05), ease;

transition-timing-function: cubic-bezier(0.5, -0.3, 0.85, 0.05), ease;

}

.contents__back h2 {

height: 40%;

background-color: #63bd99;

color: #fff;

font-weight: bold;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

}

.contents__back form {

padding: 20px;

}

.contents__back label {

display: block;

color: #309e72;

margin-bottom: 3px;

}

.contents__back input[type="text"] {

width: 100%;

margin-bottom: 10px;

padding: 3px 0px;

color: #555;

display: block;

border: none;

border-bottom: 1px solid #aaa;

background-color: transparent;

}

.contents__back input[type="text"]:focus {

border-bottom: 1px solid #309e72;

outline: none;

}

.contents__back input[type="submit"] {

background-color: none;

border: none;

background-color: #309e72;

color: #fff;

padding: 3px 10px;

margin-top: 15px;

border-radius: 3px;

cursor: pointer;

}

.contents__back input[type="submit"]:hover {

background-color: #3dc48e;

}

.contents__back input[type="submit"]:focus {

outline: none;

}

.contents.active .contents__front {

background-color: #3b4759;

-webkit-transition-timing-function: cubic-bezier(0.55, 0.1, 0.7, 0.5), ease;

transition-timing-function: cubic-bezier(0.55, 0.1, 0.7, 0.5), ease;

-webkit-transition-delay: 0.35s, 0.35s;

transition-delay: 0.35s, 0.35s;

-webkit-transform-origin: top center;

-ms-transform-origin: top center;

transform-origin: top center;

-webkit-transform: rotateX(-23.07692deg) translateZ(-300px);

transform: rotateX(-23.07692deg) translateZ(-300px);

}

.contents.active .contents__btn:before {

width: 100%;

}

.contents.active .contents__back {

-webkit-transform: rotateX(0deg) translateZ(150px);

transform: rotateX(0deg) translateZ(150px);

opacity: 1;

-webkit-transition-duration: 0.7s, 0.35s;

transition-duration: 0.7s, 0.35s;

-webkit-transition-delay: 0.35s, 0.35s;

transition-delay: 0.35s, 0.35s;

-webkit-transition-timing-function: cubic-bezier(0.2, 0.8, 0.25, 1.2), ease;

transition-timing-function: cubic-bezier(0.2, 0.8, 0.25, 1.2), ease;

}