12.10.2018, 12:18
|
Интересующийся
|
|
Регистрация: 03.07.2018
Сообщений: 26
|
|
Pie анимация с картинкой
Всем привет! Думаю как сделать вот эту анимацию : https://css-tricks.com/css-pie-timer/ но чтоб вместо синего цвета была картинка которая будет постепенно открыватся за счет этой же анимации?
|
|
13.10.2018, 21:38
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
Одна картинка, одна анимация, два свойства...
<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
|
|
13.10.2018, 22:04
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,124
|
|
Malleys,
здорово ...
|
|
23.10.2018, 15:24
|
Интересующийся
|
|
Регистрация: 03.07.2018
Сообщений: 26
|
|
Сообщение от Malleys
|
Одна картинка, одна анимация, два свойства...
<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
|
очень круто, правда сложновато в понимании, все-равно спасибо!
|
|
|
|