CSS3动画图像混合模式

CSS3 Animated Image Blend Modes

css3, blend-mode

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2190
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    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;
    }
}

HTML

CSS3 Animated Image Blend Modes

css3, blend-mode

编辑器支持Emmet

快捷键

CSS3 Animated Image Blend Modes

css3, blend-mode

使用CSS3旋转变换和混合模式实现的动画图标

CSS3 用blend-mode属性来制作图像文本混合模式效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：