پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<div class="radikalwp-ld-hex"><i><//i><//div>
.radikalwp-ld-hex { position: relative; width: 52px; height: 52px; }
.radikalwp-ld-hex::before {
  content: '';
  position: absolute;
  inset: -55%;
  background: conic-gradient(#a855f7, #06b6d4, #a855f7);
  animation: radikalwp-hex-rot 2.3s linear infinite;
}
.radikalwp-ld-hex i {
  position: absolute;
  inset: 0;
  background: #0f172a;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  z-index: 1;
}
.radikalwp-ld-hex::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: #0f172a;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  z-index: 2;
}
@keyframes radikalwp-hex-rot { to { transform: rotate(360deg); } }

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

شش‌ضلعی با حاشیه گرادیانی چرخان و هاله نور؛ ترکیبی از لودر و زینت بصری. برای لودینگ صفحات تیره و محصولات گیمینگ حس فوتوریستی می‌سازد. این لودر برای لحظه‌های انتظار — بارگذاری محتوا، آپلود یا پردازش — ساخته شده است. این المان در ویجت HTML المنتور، فایل قالب استاتیک یا هر پروژه PHP و HTML دیگری بدون تغییر کار می‌کند. برای تغییر حس بصری کافی است متغیرهای رنگ بالای کد را عوض کنید؛ بقیه چیدمان دست‌نخورده می‌ماند.

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

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

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

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

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

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

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

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

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

کپچا

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

شاید بپسندی