پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<div class="radikalwp-ld-flip"><//div>
.radikalwp-ld-flip {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  animation: radikalwp-flip-rot 1.9s cubic-bezier(.6, .1, .3, .9) infinite;
}
@keyframes radikalwp-flip-rot {
  0% { transform: perspective(140px) rotateX(0) rotateY(0); }
  50% { transform: perspective(140px) rotateX(-180deg) rotateY(0); background: linear-gradient(135deg, #06b6d4, #3b82f6); }
  100% { transform: perspective(140px) rotateX(-180deg) rotateY(-180deg); }
}

درباره این اسنیپت

مربعی که با چرخش ۲۷۰ درجه و تغییر رنگ، حس وارونه شدن جاذبه می‌دهد؛ لودری متمایز و مدرن. برای لودینگ بین تب‌ها و نمایش‌های خلاقانه مناسب است.

پرسش‌های متداول

بله، اندازه‌ها با واحدهای نسبی و flex/grid ساخته شده‌اند و در نمایشگرهای کوچک هم درست نمایش داده می‌شوند. اگر عرض ثابت دیدید، می‌توانید آن را با max-width برای موبایل تنظیم کنید.

خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشن‌ها روی GPU اجرا می‌شوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.

بله، این کد به‌صورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه می‌شود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.

امتیاز شما به این محتوا

میانگین امتیاز کاربران: ۴.۴ از ۳ رأی — برای امتیازدهی وارد شوید

دیدگاه‌ها (۰)

هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!

دیدگاه خود را بنویسید

کپچا

دیدگاه شما پس از تأیید مدیر نمایش داده می‌شود.

شاید بپسندی

پیش‌نمایش زنده اسنیپت

لودر چشمک زدن صفحه

لودر مربع جابه‌جایی
۶۰
۴.۱ (۹)
پیش‌نمایش زنده اسنیپت

لودر مربع لبه‌نما

لودر مربع هندسی
۴۵
۴.۷ (۷)
پیش‌نمایش زنده اسنیپت

لودر مدار چرخان

لودر چرخش نقطه
۴۵
۴.۷ (۷)