پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<div class="radikalwp-loader-coin" role="status" aria-label="در حال پردازش پرداخت"><span class="radikalwp-loader-coin-face">₪<//span><//div>
.radikalwp-loader-coin {
  perspective: 400px;
}
.radikalwp-loader-coin-face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 900;
  color: #854d0e;
  background: linear-gradient(135deg, #fde047, #f59e0b);
  box-shadow: inset 0 0 0 3px rgba(146, 64, 14, .25), 0 6px 16px rgba(245, 158, 11, .35);
  animation: radikalwp-loader-coin-flip 1.5s ease-in-out infinite;
}
@keyframes radikalwp-loader-coin-flip {
  0%   { transform: rotateY(0); }
  50%  { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

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

دیسکی که حول محور عمودی می‌چرخد و در نیم‌گردش، رنگ پشتش تیره‌تر دیده می‌شود؛ حس سه‌بعدی بدون حتی یک خط جاوااسکریپت. برای صفحات پرداخت، کیف پول و هر جایی که موضوع «پول» هست، لودری گویاست. چرخش با rotateY و perspective ساخته شده و روی موبایل هم روان است. رنگ طلایی پیش‌فرض را می‌توان به برند عوض کرد.

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

محتوای span را با علامت ارز دلخواه (تومان، دلار، تتر) یا لوگوی کوچک خودتان جایگزین کنید؛ اندازه فونت با 22px تنظیم شده است.

ویژگی perspective روی والد، عمق صحنه می‌سازد و rotateY باعث می‌شود سکه در نیم‌گردش از پهنا دیده شود؛ ترکیب این دو، برجستگی واقعی می‌دهد.

timing فعلی ease-in-out است تا مثل پرتاب سکه شتاب بگیرد و بایستد؛ برای چرخش مکانیکی ثابت، timing را linear کنید.

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

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

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

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

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

کپچا

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

شاید بپسندی

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

لودر مکعب سه‌بعدی چرخان

لودر مکعب سه‌بعدی
۸۰
۴.۵ (۱۲)
پیش‌نمایش زنده اسنیپت

لودر حلقه دولپره

لودر حلقه چرخش دوگانه
۱۵
۴.۶ (۳)
پیش‌نمایش زنده اسنیپت

لودر شش‌ضلعی چرخان

لودر شش‌ضلعی هندسی
۱۰۰
۴.۲ (۱۶)