clip-path实现形状变换动画

clip-path的超强应用： http://species-in-pieces.com/

1. 一个简单的clip-path动画

(最后抖了一下是gif没录制好不是动画的问题)

HTML

CSS

.wrapper {
    width: 500px;
    height: 500px;
    position: relative;
    background-color: #f0f0f0;
    margin: auto;
}
.piece {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 1s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.62, 0.02, 0.34, 1);
}
.piece:nth-child(1) {
    animation-name: move1;
}

.piece:nth-child(2) {
    animation-name: move2;
}

.piece:nth-child(3) {
    animation-name: move3;
}

.piece:nth-child(4) {
    animation-name: move4;
}

@keyframes move1{
    0%, 10% {
        background: #368AE4;
        clip-path: polygon(100px 100px, 200px 100px, 150px 186.60px);
    }
    90%, 100% {
        background: linear-gradient(180deg, #368AE4, #e400c6);
        clip-path: polygon(150px 150px, 150px 350px, 250px 250px);
    }
}

@keyframes move2{
    0%, 10% {
        background: #ff5500;
        clip-path: polygon(350px 100px, 300px 186.60px, 400px 186.60px);
    }
    90%, 100% {
        background: linear-gradient(180deg, #ffaa7f, #4be47e);
        clip-path: polygon(150px 150px, 350px 150px, 250px 250px);
    }
}

@keyframes move3{
    0%, 10% {
        background: #55007f;
        clip-path: polygon(100px 300px, 200px 300px, 150px 386.60px);
    }
    90%, 100% {
        background: linear-gradient(180deg, #3401ff, #e46c09);
        clip-path: polygon(350px 150px, 350px 350px, 250px 250px);
    }
}
@keyframes move4{
    0%, 10% {
        background: #7f1e6d;
        clip-path: polygon(350px 300px, 300px 386.60px, 400px 386.60px);
    }
    90%, 100% {
        background: linear-gradient(180deg, #f4ff10, #dc60e4);
        clip-path: polygon(150px 350px, 350px 350px, 250px 250px);
    }
}

主要思路，每一个片都是一个完整的填满最外层容器的div，使用clip-path画出三角形，动画改变三角形的位置