<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 ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۶ از ۳ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!