پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<div class="radikalwp-card-holo"><div class="radikalwp-card-holo-inner"><div class="radikalwp-card-holo-avatar">👩‍💻<//div><h3 class="radikalwp-card-holo-name">سارا محمدی<//h3><p class="radikalwp-card-holo-role">طراح تجربه کاربری<//p><div class="radikalwp-card-holo-tags"><span>UI<//span><span>UX<//span><span>فیگما<//span><//div><//div><//div>
.radikalwp-card-holo {
  position: relative;
  width: 280px;
  padding: 2px;
  border-radius: 22px;
  background: conic-gradient(#f472b6, #facc15, #4ade80, #38bdf8, #a78bfa, #f472b6);
  animation: radikalwp-card-holo-spin 5s linear infinite;
}
.radikalwp-card-holo-inner {
  background: #fff;
  border-radius: 20px;
  padding: 30px 24px;
  text-align: center;
}
.radikalwp-card-holo-avatar {
  width: 84px;
  height: 84px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  background: linear-gradient(135deg, #e0e7ff, #fce7f3);
  border-radius: 50%;
}
.radikalwp-card-holo-name {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 800;
  color: #1e293b;
}
.radikalwp-card-holo-role {
  margin: 0 0 16px;
  font-size: 12.5px;
  color: #64748b;
}
.radikalwp-card-holo-tags { display: flex; justify-content: center; gap: 6px; }
.radikalwp-card-holo-tags span {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #4f46e5;
  background: #eef2ff;
  border-radius: 999px;
}
@keyframes radikalwp-card-holo-spin {
  to { transform: rotate(1turn); }
}

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

کارت معرفی با قاب هولوگرافیک که در هاور، گرادیان رنگین‌کمانی دور کارت می‌چرخد و حس سطح تمام‌نگار می‌دهد. آواتار دایره‌ای، نام، شغل و برچسب‌های مهارت در چیدمانی تمیز وسط‌چین شده‌اند. مناسب پروفایل اعضای تیم، صفحات درباره ما و کارت معرفی سخنران است. قاب متحرک با لایه conic-gradient و ماسک داخلی ساخته شده است.

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

بله؛ خط animation را به حالت :hover منتقل کنید (.radikalwp-card-holo:hover) تا چرخش فقط هنگام تعامل اجرا شود و صفحه ساکن‌تر بماند.

کلاس avatar را روی <img> بگذارید و object-fit:cover اضافه کنید؛ گردی حاشیه از border-radius: 50% حفظ می‌شود.

مدت 5s در انیمیشن را تغییر دهید؛ اعداد بزرگ‌تر چرخش آرام‌تر و لوکس‌تری می‌سازند.

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

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

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

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

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

کپچا

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

شاید بپسندی

س.م

سارا محمدی

طراح تجربه کاربری و علاقه‌مند به رابط‌های تمیز و مینیمال.

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

کارت پروفایل شناور

کارت پروفایل آواتار حروف
۱۳
۴.۶ (۳)
م.ر

محمد رضایی

توسعه‌دهنده فرانت‌اند

مقاله‌ها: ۳۲دنبال‌کننده: ۱۲۰۰
پیش‌نمایش زنده اسنیپت

کارت پروفایل گرادیانی

کارت پروفایل گرادیان
۱۰۰
۴.۲ (۱۶)
عکس همکار

امیر رضایی

توسعه‌دهنده ارشد فرانت‌اند

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

کارت عضو تیم با اورلی گرادیان

کارت تیم تصویر
۸۰
۴.۵ (۱۲)