CSS
语言:
CSSSCSS
确定
* {
box-sizing: border-box;
}
body {
background: url("/uploads/150501/unsplash-table.jpg") no-repeat;
background-size: cover;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-family: source sans pro;
font-size: 2rem;
font-weight: bold;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
height: 100vh;
width: 100vw;
text-transform: uppercase;
}
.row {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background-size: cover;
color: #fff;
padding: 0.5rem 0 0 2rem;
text-shadow: 2px 2px 0 #000, 4px 4px 0 #0ff;
-webkit-animation: colorize 30s infinite ease-in;
animation: colorize 30s infinite ease-in;
}
.row:nth-child(1) {
mix-blend-mode: normal;
}
.row:nth-child(1)::before {
content: ' normal ';
}
.row:nth-child(2) {
mix-blend-mode: darken;
}
.row:nth-child(2)::before {
content: ' darken ';
}
.row:nth-child(3) {
mix-blend-mode: multiply;
}
.row:nth-child(3)::before {
content: ' multiply ';
}
.row:nth-child(4) {
mix-blend-mode: color-dodge;
}
.row:nth-child(4)::before {
content: ' color-dodge ';
}
.row:nth-child(5) {
mix-blend-mode: color-burn;
}
.row:nth-child(5)::before {
content: ' color-burn ';
}
.row:nth-child(6) {
mix-blend-mode: screen;
}
.row:nth-child(6)::before {
content: ' screen ';
}
.row:nth-child(7) {
mix-blend-mode: lighten;
}
.row:nth-child(7)::before {
content: ' lighten ';
}
.row:nth-child(8) {
mix-blend-mode: overlay;
}
.row:nth-child(8)::before {
content: ' overlay ';
}
.row:nth-child(9) {
mix-blend-mode: hard-light;
}
.row:nth-child(9)::before {
content: ' hard-light ';
}
.row:nth-child(10) {
mix-blend-mode: soft-light;
}
.row:nth-child(10)::before {
content: ' soft-light ';
}
.row:nth-child(11) {
mix-blend-mode: difference;
}
.row:nth-child(11)::before {
content: ' difference ';
}
.row:nth-child(12) {
mix-blend-mode: exclusion;
}
.row:nth-child(12)::before {
content: ' exclusion ';
}
.row:nth-child(13) {
mix-blend-mode: hue;
}
.row:nth-child(13)::before {
content: ' hue ';
}
.row:nth-child(14) {
mix-blend-mode: saturation;
}
.row:nth-child(14)::before {
content: ' saturation ';
}
.row:nth-child(15) {
mix-blend-mode: color;
}
.row:nth-child(15)::before {
content: ' color ';
}
@-webkit-keyframes colorize {
0% {
background-color: #40e0d0;
}
25% {
background-color: #ff0;
}
50% {
background-color: #4b0082;
}
75% {
background-color: #ff6347;
}
100% {
background-color: #008000;
}
}
@keyframes colorize {
0% {
background-color: #40e0d0;
}
25% {
background-color: #ff0;
}
50% {
background-color: #4b0082;
}
75% {
background-color: #ff6347;
}
100% {
background-color: #008000;
}
}