mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
99 lines
2 KiB
HTML
99 lines
2 KiB
HTML
|
|
|
|
<figure>
|
|
<div style="--i: 1"></div>
|
|
<div style="--i: 2"></div>
|
|
<div style="--i: 3"></div>
|
|
<div style="--i: 4"></div>
|
|
<div style="--i: 5"></div>
|
|
<div style="--i: 6"></div>
|
|
<div style="--i: 7"></div>
|
|
<div style="--i: 8"></div>
|
|
<div style="--i: 9"></div>
|
|
<div style="--i: 10"></div>
|
|
<div style="--i: 11"></div>
|
|
<div style="--i: 12"></div>
|
|
</figure>
|
|
|
|
|
|
<style>
|
|
/* From Uiverse.io by VashonG - Tags: blue, loader, diamond */
|
|
@media (prefers-reduced-motion) {
|
|
}
|
|
|
|
figure {
|
|
--size: 15vmin;
|
|
--duration: 4s;
|
|
--direction: 1;
|
|
--pull: -1.25;
|
|
perspective: 30rem;
|
|
display: grid;
|
|
grid-template-areas: "figure";
|
|
place-items: center;
|
|
inline-size: var(--size);
|
|
aspect-ratio: 1;
|
|
animation: spin var(--duration) ease-in-out infinite;
|
|
}
|
|
|
|
figure > * {
|
|
--radius: calc(var(--size) / 2);
|
|
--deg: calc(var(--i) * (360deg / 12));
|
|
--hs: 225 100%;
|
|
--transform-start: translate3d(
|
|
calc(cos(var(--deg)) * var(--radius)),
|
|
calc(sin(var(--deg)) * var(--radius)),
|
|
0
|
|
)
|
|
rotate(calc(var(--deg)));
|
|
grid-area: figure;
|
|
background-color: hsl(var(--hs) var(--l, 60%));
|
|
inline-size: calc(var(--size) / 4);
|
|
aspect-ratio: 1;
|
|
clip-path: polygon(25% 25%, 100% 50%, 25% 75%, 0% 50%);
|
|
transform: var(--transform-start);
|
|
transform-style: preserve-3d;
|
|
animation: diamonds var(--duration) cubic-bezier(0.87, 0, 0.13, 1) infinite;
|
|
}
|
|
|
|
figure:nth-child(2) {
|
|
--size: 30vmin;
|
|
--direction: -1;
|
|
--l: 70%;
|
|
}
|
|
|
|
figure:nth-child(3) {
|
|
--size: 55vmin;
|
|
--pull: -1.125;
|
|
--l: 80%;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0%,
|
|
25% {
|
|
transform: scaleX(var(--direction)) rotate(0);
|
|
}
|
|
|
|
75%,
|
|
100% {
|
|
transform: scaleX(var(--direction)) rotate(1turn);
|
|
}
|
|
}
|
|
|
|
@keyframes diamonds {
|
|
0%,
|
|
20% {
|
|
transform: var(--transform-start);
|
|
}
|
|
|
|
50% {
|
|
clip-path: polygon(75% 25%, 100% 50%, 75% 75%, 0% 50%);
|
|
transform: translate3d(
|
|
calc(cos(var(--deg)) * var(--radius) * var(--pull)),
|
|
calc(sin(var(--deg)) * var(--radius) * var(--pull)),
|
|
5rem
|
|
)
|
|
rotate(calc(var(--deg) + 90deg));
|
|
}
|
|
}
|
|
|
|
</style>
|