Одна картинка, одна анимация, два свойства...
<img src="https://placeimg.com/300/300/animals">
<style>
img {
border-radius: 50%;
animation: 10s pie infinite linear;
}
@keyframes pie {
0% {
-webkit-clip-path: polygon(50% -100%, 50% 50%, 50% -100%, 50% -100%, 50% -100%);
clip-path: polygon(50% -100%, 50% 50%, 50% -100%, 50% -100%, 50% -100%);
}
25% {
-webkit-clip-path: polygon(50% -100%, 50% 50%, 200% 50%, 180% -25%, 125% -80%);
clip-path: polygon(50% -100%, 50% 50%, 200% 50%, 180% -25%, 125% -80%);
}
50% {
-webkit-clip-path: polygon(50% -100%, 50% 50%, 50% 200%, 180% 125%, 180% -25%);
clip-path: polygon(50% -100%, 50% 50%, 50% 200%, 180% 125%, 180% -25%);
}
75% {
-webkit-clip-path: polygon(50% -100%, 50% 50%, -100% 50%, 50% 200%, 200% 50%);
clip-path: polygon(50% -100%, 50% 50%, -100% 50%, 50% 200%, 200% 50%);
}
100% {
-webkit-clip-path: polygon(50% -100%, 50% 50%, 50% -100%, -80% 125%, 180% 125%);
clip-path: polygon(50% -100%, 50% 50%, 50% -100%, -80% 125%, 180% 125%);
}
}
</style>
Этого достаточно!
#funfact Анимация была сгенерирована при помощи скрипта
var r = 50;
var R = 3 * r;
var getPoint = (p, k, t) => `${
Math.round(R * Math.cos((p * 2 * Math.PI * k) / (3*t) - Math.PI / 2) + r)
}% ${
Math.round(R * Math.sin((p * 2 * Math.PI * k) / (3*t) - Math.PI / 2) + r)
}%`;
var getKeyframe = (k, t) => `polygon(${getPoint(0, k, t)}, 50% 50%, ${[3, 2, 1].map(p => getPoint(p, k, t)).join(", ")})`;
var getKeyframes = t => k => `
${Math.round(100 / t * k)}% {
-webkit-clip-path: ${getKeyframe(k, t)};
clip-path: ${getKeyframe(k, t)};
}`;
var rule = t => `@keyframes pie {${Array.from(Array(t + 1), (_, i) => i).map(getKeyframes(t)).join("\n")}\n}`;
console.log(rule(4));
Но перед этим были построены точки desmos.com/calculator/z1xftsuv7u
|