使用CSS3构建的图像多边形裁剪动画特效

CSS3 generated polygons 使用clip-path把背景图片进行裁剪，并实现缓缓转动的动画。

css3, clip, image

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
    background: #333;
}
.polygon {
    -webkit-clip-path: polygon(50% 0%, 79.38926% 9.54915%, 97.55283% 34.54915%, 97.55283% 65.45085%, 79.38926% 90.45085%, 50% 100%, 20.61074% 90.45085%, 2.44717% 65.45085%, 2.44717% 34.54915%, 20.61074% 9.54915%);
    clip-path: polygon(50% 0%, 79.38926% 9.54915%, 97.55283% 34.54915%, 97.55283% 65.45085%, 79.38926% 90.45085%, 50% 100%, 20.61074% 90.45085%, 2.44717% 65.45085%, 2.44717% 34.54915%, 20.61074% 9.54915%);
    -webkit-animation: clip-path-animation 15s linear infinite;
    animation: clip-path-animation 15s linear infinite;
    width: 300px;
    height: 300px;
    background: url(/assets/beauty.jpg);
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
@-webkit-keyframes clip-path-animation {
    0% {
        -webkit-clip-path: polygon(50% 0%, 79.38926% 9.54915%, 97.55283% 34.54915%, 97.55283% 65.45085%, 79.38926% 90.45085%, 50% 100%, 20.61074% 90.45085%, 2.44717% 65.45085%, 2.44717% 34.54915%, 20.61074% 9.54915%);
        clip-path: polygon(50% 0%, 79.38926% 9.54915%, 97.55283% 34.54915%, 97.55283% 65.45085%, 79.38926% 90.45085%, 50% 100%, 20.61074% 90.45085%, 2.44717% 65.45085%, 2.44717% 34.54915%, 20.61074% 9.54915%);
    }
    100% {
        -webkit-clip-path: polygon(79.38926% 9.54915%, 97.55283% 34.54915%, 97.55283% 65.45085%, 79.38926% 90.45085%, 50% 100%, 20.61074% 90.45085%, 2.44717% 65.45085%, 2.44717% 34.54915%, 20.61074% 9.54915%, 50% 0%);
        clip-path: polygon(79.38926% 9.54915%, 97.55283% 34.54915%, 97.55283% 65.45085%, 79.38926% 90.45085%, 50% 100%, 20.61074% 90.45085%, 2.44717% 65.45085%, 2.44717% 34.54915%, 20.61074% 9.54915%, 50% 0%);
    }
}
@keyframes clip-path-animation {
    0% {
        -webkit-clip-path: polygon(50% 0%, 79.38926% 9.54915%, 97.55283% 34.54915%, 97.55283% 65.45085%, 79.38926% 90.45085%, 50% 100%, 20.61074% 90.45085%, 2.44717% 65.45085%, 2.44717% 34.54915%, 20.61074% 9.54915%);
        clip-path: polygon(50% 0%, 79.38926% 9.54915%, 97.55283% 34.54915%, 97.55283% 65.45085%, 79.38926% 90.45085%, 50% 100%, 20.61074% 90.45085%, 2.44717% 65.45085%, 2.44717% 34.54915%, 20.61074% 9.54915%);
    }
    100% {
        -webkit-clip-path: polygon(79.38926% 9.54915%, 97.55283% 34.54915%, 97.55283% 65.45085%, 79.38926% 90.45085%, 50% 100%, 20.61074% 90.45085%, 2.44717% 65.45085%, 2.44717% 34.54915%, 20.61074% 9.54915%, 50% 0%);
        clip-path: polygon(79.38926% 9.54915%, 97.55283% 34.54915%, 97.55283% 65.45085%, 79.38926% 90.45085%, 50% 100%, 20.61074% 90.45085%, 2.44717% 65.45085%, 2.44717% 34.54915%, 20.61074% 9.54915%, 50% 0%);
    }
}

HTML

CSS3 generated polygons 使用clip-path把背景图片进行裁剪，并实现缓缓转动的动画。

css3, clip, image

编辑器支持Emmet

快捷键

CSS3 generated polygons 使用clip-path把背景图片进行裁剪，并实现缓缓转动的动画。

css3, clip, image

使用纯CSS3构建的3D卷轴动画特效

使用CSS3伪元素构建的超炫图片悬停动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：