CSS
语言:
CSSSCSS
确定
@import url(http://fonts.googleapis.com/css?family=Roboto:400,);
@-webkit-keyframes slideDown {
0% {
-webkit-transform: translateY(0);
}
10% {
-webkit-transform: translateY(-8px);
}
40% {
-webkit-transform: translateY(100px);
}
50% {
-webkit-transform: translateY(-8px);
}
65% {
-webkit-transform: translateY(4px);
}
85% {
-webkit-transform: translateY(-2px);
}
100% {
-webkit-transform: translateY(0);
}
}
@keyframes slideDown {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
10% {
-webkit-transform: translateY(-8px);
-ms-transform: translateY(-8px);
transform: translateY(-8px);
}
40% {
-webkit-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
}
50% {
-webkit-transform: translateY(-8px);
-ms-transform: translateY(-8px);
transform: translateY(-8px);
}
65% {
-webkit-transform: translateY(4px);
-ms-transform: translateY(4px);
transform: translateY(4px);
}
85% {
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
* {
box-sizing: border-box;
}
body {
display: table;
height: 100%;
width: 100%;
font-family: Roboto, Helvetica Neue, sans-serif;
}
.text {
font-size: 18px;
text-transform: uppercase;
color: #000;
font-weight: 400;
margin: 0 auto 30px;
text-align: center;
}
.vertical-align {
display: table-cell;
vertical-align: middle;
height: 100vh;
}
.close-button-container {
width: 30px;
position: relative;
margin: 0 auto;
}
.close-button {
position: absolute;
margin: 0 auto;
border: 2px solid #1a1a1a;
background: transparent;
border-radius: 20px;
padding: 15px 15px 15px;
cursor: pointer;
height: 30px;
width: 30px;
-webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.close-button:hover {
border: 2px solid #333;
-webkit-transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.close-button:after,
.close-button:before {
position: absolute;
top: 3px;
right: 3px;
bottom: 0;
left: 50%;
-webkit-transform: rotate(45deg) translateX(0) translateY(0);
-ms-transform: rotate(45deg) translateX(0) translateY(0);
transform: rotate(45deg) translateX(0) translateY(0);
height: 1.5em;
width: 0.15em;
background: #1a1a1a;
content: '';
display: block;
margin: 0 0 0 -1px;
-webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.close-button:hover:after,
.close-button:hover:before {
background: #333;
}
.close-button:hover:after {
-webkit-transform: rotate(-315deg) translateX(7px) translateY(1px);
-ms-transform: rotate(-315deg) translateX(7px) translateY(1px);
transform: rotate(-315deg) translateX(7px) translateY(1px);
height: 0.9em;
width: 0.15em;
-webkit-transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.close-button:hover:before {
-webkit-transform: rotate(-405deg) translateX(-7px) translateY(1px);
-ms-transform: rotate(-405deg) translateX(-7px) translateY(1px);
transform: rotate(-405deg) translateX(-7px) translateY(1px);
height: 0.9em;
width: 0.15em;
-webkit-transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.close-button:before {
-webkit-transform: rotate(-45deg) translateX(0) translateY(0);
-ms-transform: rotate(-45deg) translateX(0) translateY(0);
transform: rotate(-45deg) translateX(0) translateY(0);
}
.slide-down {
-webkit-animation-name: slideDown;
animation-name: slideDown;
-webkit-animation-duration: 1200ms;
animation-duration: 1200ms;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}