پیشنمایش زنده (iframe sandbox)
تمامصفحه
<button class="radikalwp-btn-breathe">گفتگو با پشتیبانی<//button>
.radikalwp-btn-breathe {
padding: 13px 34px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, #22c55e, #16a34a);
border: none;
border-radius: 999px;
cursor: pointer;
box-shadow: 0 6px 16px rgba(34, 197, 94, .35);
animation: radikalwp-breathe 3.2s ease-in-out infinite;
}
@keyframes radikalwp-breathe {
0%, 100% {
transform: scale(1);
box-shadow: 0 6px 16px rgba(34, 197, 94, .3);
}
50% {
transform: scale(1.04);
box-shadow: 0 10px 26px rgba(34, 197, 94, .5);
}
}
درباره این اسنیپت
دکمه با انیمیشن آرام تنفس که بهتناوب کمی بزرگ میشود و سایه سبزش منبسط و جمع میگردد. این ریتم ملایم بدون آزار، چشم را به سمت اقدام اصلی هدایت میکند. برای دکمه شروع چت، تماس پشتیبانی و فراخوانهای مهم صفحه اصلی عالی است. سرعت انیمیشن با یک مقدار در بخش keyframes قابل تنظیم است.
پرسشهای متداول
در animation مقدار 3.2s را کم یا زیاد کنید. برای فضای آرام سرعت پایینتر و برای اعلام فوریت سرعت بالاتر پیشنهاد میشود.
خیر؛ انیمیشن فقط از transform و box-shadow استفاده میکند و برای پردازش گرافیکی سبک است.
کد بهصورت پیشفرض مدیا کوئری ندارد. در صورت نیاز میتوانید یک بلوک کوچک prefers-reduced-motion برای توقف انیمیشن اضافه کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۷ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!