使用CSS3 clip-path实现的图片区块分割多格视图

每个图片区块呈现不同的色调

css3, clip-path, 图像特效

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.w {
    width: 100vw;
    height: 100vh;
    position: relative;
    --xx: calc(1px * var(--x));
    --yy: calc(1px * var(--y));
    cursor: move;
    overflow: hidden;
}
.p {
    background: center/cover no-repeat url(/uploads/161001/normal1.jpg);
    width: 100%;
    height: 100%;
    position: absolute;
}
.a {
    -webkit-transform-origin: var(--xx) var(--yy);
    transform-origin: var(--xx) var(--yy);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-filter: hue-rotate(72deg);
    filter: hue-rotate(72deg);
    -webkit-clip-path: polygon(var(--xx) var(--yy), 0 var(--yy), 0 0, var(--xx) 0);
    clip-path: polygon(var(--xx) var(--yy), 0 var(--yy), 0 0, var(--xx) 0);
}
.b {
    -webkit-transform-origin: var(--xx) var(--yy);
    transform-origin: var(--xx) var(--yy);
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    -webkit-filter: hue-rotate(144deg);
    filter: hue-rotate(144deg);
    -webkit-clip-path: polygon(var(--xx) var(--yy), var(--xx) 0, 100% 0, 100% var(--yy));
    clip-path: polygon(var(--xx) var(--yy), var(--xx) 0, 100% 0, 100% var(--yy));
}
.c {
    -webkit-transform-origin: var(--xx) var(--yy);
    transform-origin: var(--xx) var(--yy);
    -webkit-transform: scale(1.13);
    transform: scale(1.13);
    -webkit-filter: hue-rotate(216deg);
    filter: hue-rotate(216deg);
    -webkit-clip-path: polygon(var(--xx) var(--yy), 100% var(--yy), 100% 100%, var(--xx) 100%);
    clip-path: polygon(var(--xx) var(--yy), 100% var(--yy), 100% 100%, var(--xx) 100%);
}
.d {
    -webkit-transform-origin: var(--xx) var(--yy);
    transform-origin: var(--xx) var(--yy);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-filter: hue-rotate(288deg);
    filter: hue-rotate(288deg);
    -webkit-clip-path: polygon(var(--xx) var(--yy), var(--xx) 100%, 0 100%, 0 var(--yy));
    clip-path: polygon(var(--xx) var(--yy), var(--xx) 100%, 0 100%, 0 var(--yy));
}
@-webkit-keyframes a {
    to {
        -webkit-filter: hue-rotate(144deg)contrast(1.5);
        filter: hue-rotate(144deg)contrast(1.5)
    }
}
@keyframes a {
    to {
        -webkit-filter: hue-rotate(144deg)contrast(1.5);
        filter: hue-rotate(144deg)contrast(1.5)
    }
}
@-webkit-keyframes b {
    to {
        -webkit-filter: hue-rotate(216deg)contrast(1.5);
        filter: hue-rotate(216deg)contrast(1.5)
    }
}
@keyframes b {
    to {
        -webkit-filter: hue-rotate(216deg)contrast(1.5);
        filter: hue-rotate(216deg)contrast(1.5)
    }
}
@-webkit-keyframes c {
    to {
        -webkit-filter: hue-rotate(288deg)contrast(1.5);
        filter: hue-rotate(288deg)contrast(1.5)
    }
}
@keyframes c {
    to {
        -webkit-filter: hue-rotate(288deg)contrast(1.5);
        filter: hue-rotate(288deg)contrast(1.5)
    }
}
@-webkit-keyframes d {
    to {
        -webkit-filter: hue-rotate(72deg)contrast(1.5);
        filter: hue-rotate(72deg)contrast(1.5)
    }
}
@keyframes d {
    to {
        -webkit-filter: hue-rotate(72deg)contrast(1.5);
        filter: hue-rotate(72deg)contrast(1.5)
    }
}
.a {
    -webkit-animation: a 3s alternate infinite;
    animation: a 3s alternate infinite;
}
.b {
    -webkit-animation: b 3s alternate infinite;
    animation: b 3s alternate infinite;
}
.c {
    -webkit-animation: c 3s alternate infinite;
    animation: c 3s alternate infinite;
}
.d {
    -webkit-animation: d 3s alternate infinite;
    animation: d 3s alternate infinite;
}

HTML

每个图片区块呈现不同的色调

css3, clip-path, 图像特效

编辑器支持Emmet

快捷键

每个图片区块呈现不同的色调

css3, clip-path, 图像特效

使用CSS3 clip-path特性实现文本沿特定形状环绕图片

使用CSS3路径裁剪（clip-path）实现的图片裁剪动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：