关于前端:clippath实现形状变换动画

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

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

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

HTML

<div class="wrapper">
    <div class="piece"></div>
    <div class="piece"></div>
    <div class="piece"></div>
    <div class="piece"></div>
</div>

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 画出三角形，动画扭转三角形的地位