xiaozi 2025-01-12 01:26:54
梅花形状的 loading 动画
css 
html .rotating-element {
animation: rotate 3s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
to {
transform: rotate(1turn);
}
}<div class="w-4 h-4 rounded-full flex items-center justify-center rotating-element">
<div class="w-2.5 h-2.5 rounded-full relative" style="scale: 0.8">
<div class="absolute rounded-full bg-primary dark:bg-gray-200 h-full w-full"></div>
<div
class="top-[-3.8px] absolute h-full w-full rounded-full bg-primary dark:bg-gray-200 transition-[top] duration-300 ease-linear"
></div>
<div
class="right-[-3.8px] top-[-1px] absolute h-full w-full rounded-full bg-primary dark:bg-gray-200 transition-[right] duration-30ease-linear"
></div>
<div
class="left-[-3.8px] top-[-1px] absolute h-full w-full rounded-full bg-primary dark:bg-gray-200 transition-[left] duration-30ease-linear"
></div>
<div
class="right-[-2.3px] top-[3px] absolute h-full w-full rounded-full bg-primary dark:bg-gray-200 transition-[right] duration-30ease-linear"
></div>
<div
class="left-[-2.5px] top-[3.3px] absolute h-full w-full rounded-full bg-primary dark:bg-gray-200 transition-[left] duration-30ease-linear"
></div>
</div>
</div>
