HTML5 表格 填充不同图片,HTML5 草图风格的表格填充和划线动画

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;

}

}