css3 混合,CSS3动画图像混合模式

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;

}

}