border-radius属性变形动画构建粘稠物体

Border Radius Morphing

css, border

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body::before {
    content: '';
    display: block;
    width: 40vh;
    height: 40vh;
    min-height: 200px;
    min-width: 200px;
    background: linear-gradient( 270deg, #43e97b, #38f9d7, #e0c3fc, #8ec5fc, #4facfe, #00f2fe, #a8edea, #fed6e3);
    background-size: 1600% 1600%;
    box-shadow: inset 0px -20px 100px rgba(255, 255, 255, 0.6);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-animation: transform 20s ease-in-out infinite both alternate, movement 40s ease-in-out infinite both, shade 60s linear infinite both;
    animation: transform 20s ease-in-out infinite both alternate, movement 40s ease-in-out infinite both, shade 60s linear infinite both;
}
@-webkit-keyframes transform {
    0%, 100% {
        border-radius: 33% 67% 70% 30% / 30% 30% 70% 70%;
    }
    20% {
        border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%;
    }
    40% {
        border-radius: 36% 64% 64% 36% / 64% 48% 52% 36%;
    }
    60% {
        border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%;
    }
    80% {
        border-radius: 40% 60% 42% 58% / 41% 51% 49% 59%;
    }
}
@keyframes transform {
    0%, 100% {
        border-radius: 33% 67% 70% 30% / 30% 30% 70% 70%;
    }
    20% {
        border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%;
    }
    40% {
        border-radius: 36% 64% 64% 36% / 64% 48% 52% 36%;
    }
    60% {
        border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%;
    }
    80% {
        border-radius: 40% 60% 42% 58% / 41% 51% 49% 59%;
    }
}
@-webkit-keyframes movement {
    0%, 100% {
        -webkit-transform: none;
        transform: none;
    }
    50% {
        -webkit-transform: translateY(20%) rotateY(10deg);
        transform: translateY(20%) rotateY(10deg);
    }
}
@keyframes movement {
    0%, 100% {
        -webkit-transform: none;
        transform: none;
    }
    50% {
        -webkit-transform: translateY(20%) rotateY(10deg);
        transform: translateY(20%) rotateY(10deg);
    }
}
@-webkit-keyframes shade {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}
@keyframes shade {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

HTML

Border Radius Morphing

css, border

编辑器支持Emmet

快捷键

Border Radius Morphing

css, border

使用CSS网格（grid）和外形（shape-outside）属性构建的圆形交集图

通过border-radius keyframes实现的橡皮变形动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：