使用CSS3线性渐变和合成模式（blend-mode）实现的5种图像特效

一个很好的用来学习如何使用CSS3来处理图像特效的实例。

css3, gradient, blend

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.card {
    box-sizing: border-box;
    position: relative;
    width: 40vw;
    height: 30vw;
    margin: 5vh;
    padding: 1vh;
    overflow: hidden;
    font-size: 3vh;
    font-weight: bold;
    color: #eee;
    background-image: url("/uploads/161001/normal1.jpg");
    background-position: center center;
    background-size: cover;
    box-shadow: 0.5vh 0.5vh 1.5vh rgba(0, 0, 0, 0.5);
    text-shadow: 0.2vh 0.2vh 0.5vh rgba(0, 0, 0, 0.5);
}
.card:before {
    content: "";
    display: block;
    position: absolute;
    top: 0vh;
    right: 0;
    bottom: 0vh;
    left: 0;
    opacity: 1;
    -webkit-transition: opacity 200ms ease-in-out;
    transition: opacity 200ms ease-in-out;
}
.card:hover:before {
    opacity: 0;
}
.card.passion:before {
    background-color: rgba(30, 30, 200, 0.3);
    background-image: -webkit-linear-gradient(285deg, rgba(140, 47, 250, 0.2), rgba(255, 47, 220, 0.8)), -webkit-radial-gradient(ellipse 30vw 20vh at 10% 5%, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0));
    background-image: linear-gradient(165deg, rgba(140, 47, 250, 0.2), rgba(255, 47, 220, 0.8)), radial-gradient(ellipse 30vw 20vh at 10% 5%, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0));
    mix-blend-mode: lighten;
    box-shadow: inset 0 0 5vw rgba(140, 47, 250, 0.8);
}
.card.timeless:before {
    background-color: rgba(30, 30, 200, 0.3);
    background-image: -webkit-linear-gradient(285deg, rgba(185, 170, 127, 0.2), rgba(158, 142, 95, 0.8)), -webkit-radial-gradient(ellipse 30vw 20vh at 10% 5%, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0));
    background-image: linear-gradient(165deg, rgba(185, 170, 127, 0.2), rgba(158, 142, 95, 0.8)), radial-gradient(ellipse 30vw 20vh at 10% 5%, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0));
    mix-blend-mode: color;
    box-shadow: inset 0 0 5vw rgba(125, 124, 122, 0.8);
}
.card.pop:before {
    background-color: rgba(0, 255, 34, 0.3);
    background-image: -webkit-linear-gradient(285deg, rgba(51, 255, 0, 0.2), rgba(0, 255, 80, 0.8)), -webkit-radial-gradient(ellipse 30vw 20vh at 10% 5%, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0));
    background-image: linear-gradient(165deg, rgba(51, 255, 0, 0.2), rgba(0, 255, 80, 0.8)), radial-gradient(ellipse 30vw 20vh at 10% 5%, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0));
    mix-blend-mode: saturation;
}
.card.survival:before {
    background-color: rgba(0, 255, 34, 0.3);
    background-image: -webkit-linear-gradient(285deg, rgba(255, 118, 0, 0.4), rgba(255, 0, 0, 0.8)), -webkit-radial-gradient(ellipse 30vw 20vh at 10% 5%, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0));
    background-image: linear-gradient(165deg, rgba(255, 118, 0, 0.4), rgba(255, 0, 0, 0.8)), radial-gradient(ellipse 30vw 20vh at 10% 5%, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0));
    mix-blend-mode: overlay;
}
.card.breathe:before {
    background-color: rgba(0, 255, 34, 0.3);
    background-image: -webkit-radial-gradient(ellipse farthest-corner at 50% 50%, rgba(27, 0, 255, 0.4), #008aff), -webkit-radial-gradient(ellipse 30vw 20vh at 10% 5%, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0));
    background-image: radial-gradient(ellipse farthest-corner at 50% 50%, rgba(27, 0, 255, 0.4), #008aff), radial-gradient(ellipse 30vw 20vh at 10% 5%, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0));
    mix-blend-mode: screen;
}
body {
    height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -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-color: #222;
}

HTML

一个很好的用来学习如何使用CSS3来处理图像特效的实例。

css3, gradient, blend

编辑器支持Emmet

快捷键

一个很好的用来学习如何使用CSS3来处理图像特效的实例。

css3, gradient, blend

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

使用CSS3背景裁剪（background-clip）特性实现的文本标题透视特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：