CSS
语言:
CSSSCSS
确定
@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
@import url(http://fonts.googleapis.com/css?family=Rock+Salt);
body {
overflow: hidden;
background: #222;
z-index: 110;
text-align: center;
}
*:before,
*:after {
position: absolute;
content: "";
}
.box-wrap {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 300px;
width: 300px;
border: 5px solid #e74c3c;
z-index: 1;
}
.box-wrap:before {
height: 290px;
width: 5px;
background: #e74c3c;
top: 5px;
left: 100px;
box-shadow: 100px 0 0 #e74c3c;
}
.box-wrap:after {
height: 5px;
width: 290px;
background: #e74c3c;
top: 100px;
left: 5px;
box-shadow: 0 100px 0 #e74c3c;
}
.box-wrap span {
font-family: 'Indie Flower', cursive;
color: #1abc9c;
font-size: 100px;
line-height: 100px;
position: absolute;
-webkit-animation: strike 1.5s linear;
animation: strike 1.5s linear;
opacity: 0;
}
.box-wrap .x {
top: 100px;
left: 125px;
}
.box-wrap .x2 {
top: 200px;
left: 225px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.box-wrap .x3 {
top: 300px;
left: 325px;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.box-wrap .o {
left: 225px;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.box-wrap .o2 {
left: 25px;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.box-wrap .line {
height: 0px;
position: absolute;
width: 5px;
background: #1abc9c;
top: 150px;
left: 150px;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
z-index: 5;
-webkit-animation: go 1s linear;
animation: go 1s linear;
-webkit-animation-delay: 5s;
animation-delay: 5s;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
}
.outta {
font-family: 'Rock Salt', cursive;
font-size: 7.5vw;
color: #1abc9c;
position: absolute;
text-align: center;
-webkit-animation: strike 2s linear;
animation: strike 2s linear;
-webkit-animation-delay: 6.5s;
animation-delay: 6.5s;
opacity: 0;
}
@-webkit-keyframes strike {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes strike {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes go {
0% {
height: 0;
}
100% {
height: 300px;
}
}
@keyframes go {
0% {
height: 0;
}
100% {
height: 300px;
}
}