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