CSS
语言:
CSSSCSS
确定
@import url(http://fonts.googleapis.com/css?family=Fjalla+One);
html {
height: 100%;
}
body {
height: 100%;
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;
background: #3d505f;
}
.cover {
height: 90%;
}
svg {
height: 100%;
}
svg text {
font-family: Fjalla One;
}
@-webkit-keyframes light {
0% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes light {
0% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes light-b {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes light-b {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes light-c {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes light-c {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes light-d {
0% {
opacity: 0;
}
60% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes light-d {
0% {
opacity: 0;
}
60% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes sky {
0% {
opacity: 1;
}
100% {
opacity: 0.4;
}
}
@keyframes sky {
0% {
opacity: 1;
}
100% {
opacity: 0.4;
}
}
#light0 {
opacity: 0;
-webkit-animation: light 6s 1s infinite forwards alternate;
animation: light 6s 1s infinite forwards alternate;
}
#light-1,
#light1 {
opacity: 0;
-webkit-animation: light-b 6s 1s infinite forwards alternate;
animation: light-b 6s 1s infinite forwards alternate;
}
#light-2,
#light2 {
opacity: 0;
-webkit-animation: light-c 6s 1s infinite forwards alternate;
animation: light-c 6s 1s infinite forwards alternate;
}
#light3 {
opacity: 0;
-webkit-animation: light-d 6s 1s infinite forwards alternate;
animation: light-d 6s 1s infinite forwards alternate;
}
#sky {
opacity: 1;
-webkit-animation: sky 6s 1s infinite forwards alternate;
animation: sky 6s 1s infinite forwards alternate;
}