<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 کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۱ از ۹ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!