<div class="radikalwp-ld-blob"><//div>
.radikalwp-ld-blob {
width: 44px;
height: 44px;
background: linear-gradient(135deg, #ec4899, #8b5cf6);
animation: radikalwp-blob-morph 3.2s ease-in-out infinite;
}
@keyframes radikalwp-blob-morph {
0%, 100% { border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%; transform: rotate(0); }
33% { border-radius: 42% 58% 40% 60% / 58% 42% 58% 42%; transform: rotate(120deg); }
66% { border-radius: 60% 40% 62% 38% / 44% 60% 40% 56%; transform: rotate(240deg); }
}
درباره این اسنیپت
بلابی که با border-radius متغیر مدام شکل عوض میکند و میچرخد؛ لودری ارگانیک و آرامشبخش. برای برندهای خلاق و صفحات هنری شخصیت میسازد. این لودر برای لحظههای انتظار — بارگذاری محتوا، آپلود یا پردازش — ساخته شده است. ساختار HTML حداقلی دارد و افزودن یا حذف تکرار المانها بدون بههمریختگی انجام میشود. رنگها و اندازهها با متغیرهای ساده CSS قابل تغییرند و میتوانید آنها را با پالت برند خودتان هماهنگ کنید.
پرسشهای متداول
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۰ از ۶ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!