CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

}

body {

display: flex;

justify-content: center;

align-items: center;

background: #9abc20;

background-image: url("http://www.transparenttextures.com/patterns/subtle-grey.png");

background-position: center;

}

p {

font-family: Codystar;

color: transparent;

background: linear-gradient(to right, black 0%, gold 35%, orangered 50%, black 60%, cyan 80%);

background-position: 50%;

background-size: 25vh 10vh;

-webkit-background-clip: text;

font-size: 17vw;

font-weight: 400;

text-align: center;

position: absolute;

top: 50%;

left: 50%;

opacity: 0;

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

animation: anim 3s ease-in 1 10s forwards;

}

@keyframes anim {

100% {

background-position: 6vw 0;

opacity: 1;

z-index: 2;

}

}

.firefox {

color: white;

display: none;

text-align: center;

padding: 20px;

}

@-moz-document url-prefix() {

.firefox {

display: block;

}

}

figure {

pointer-events: none;

display: flex;

flex-wrap: wrap;

width: 70vw;

height: 70vh;

background-image: url("http://www.transparenttextures.com/patterns/subtle-grey.png");

background-position: center;

}

div {

flex: 1 0 12%;

animation: spin 12s ease-in-out;

background: #2d41c3;

background-image: url("http://www.transparenttextures.com/patterns/light-wool.png");

background-position: center;

}

div:nth-child(odd) {

animation-direction: reverse;

background-image: url("http://www.transparenttextures.com/patterns/light-wool.png");

background-position: center;

}

@keyframes spin {

from {

-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

}

33% {

background: #24349c;

background-image: url("http://www.transparenttextures.com/patterns/light-wool.png");

background-position: center;

}

66% {

background: #5767cf;

background-image: url("http://www.transparenttextures.com/patterns/subtle-grey.png");

background-position: center;

}

to {

-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);

}

}