使用CSS3 clip-path，blend-mode和SVG实现图片上的X/Y符号透明覆盖

MultiLayer Fx w/ Clip Paths, Filters & Blend

CSS3, 路径裁剪

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

section {
    width: 80%;
    margin: 0 auto;
}
.eastwood-jackman,
.clip {
    position: relative;
    float: left;
    display: inline-block;
    width: 40%;
    padding-top: 50%;
    overflow: hidden;
    margin: 0;
}
.eastwood-jackman img,
.clip img,
.eastwood-jackman figcaption,
.clip figcaption {
    position: absolute;
    width: 100%;
    top: 0;
}
.eastwood-jackman img:last-child,
.clip img:last-child {
    mix-blend-mode: multiply;
}
.eastwood-jackman figcaption,
.clip figcaption {
    font-family: Futura-CondensedExtraBold, sans-serif;
    font-weight: 400;
    font-size: 49vw;
    color: rgba(255, 234, 0, 0.8);
    line-height: .77;
    margin-left: 50px;
}
.clip {
    float: right;
}
.clip img:last-child {
    mix-blend-mode: normal;
    -webkit-clip-path: url(#y-shape);
    clip-path: url(#y-shape);
    -webkit-clip-path: polygon(16% 0, 40% 57%, 40% 100%, 72% 100%, 72% 57%, 100% 0, 72% 0%, 57% 28%, 48% 0);
    clip-path: polygon(16% 0, 40% 57%, 40% 100%, 72% 100%, 72% 57%, 100% 0, 72% 0%, 57% 28%, 48% 0);
    -webkit-filter: hue-rotate(120deg);
    filter: hue-rotate(120deg);
}
#shapeclipper {
    height: 0;
}

HTML

MultiLayer Fx w/ Clip Paths, Filters & Blend

CSS3, 路径裁剪

编辑器支持Emmet

快捷键

MultiLayer Fx w/ Clip Paths, Filters & Blend

CSS3, 路径裁剪

分别使用SVG path和CSS3 motion-path实现的粒子漂浮动画

使用CSS3 border-image和SVG实现的美丽边界图形

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：