پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<div class="radikalwp-txt-wavy" aria-label="RADIKAL"><span style="--d:0">R<//span><span style="--d:.1">A<//span><span style="--d:.2">D<//span><span style="--d:.3">I<//span><span style="--d:.4">K<//span><span style="--d:.5">A<//span><span style="--d:.6">L<//span><//div>
.radikalwp-txt-wavy {
  display: flex;
  justify-content: center;
  gap: 2px;
  font-size: 40px;
  font-weight: 900;
  color: #4f46e5;
}
.radikalwp-txt-wavy span {
  display: inline-block;
  animation: radikalwp-txt-wavy-bounce 1.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes radikalwp-txt-wavy-bounce {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-14px); }
  60%      { transform: translateY(3px); }
}

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

حروف که با تاخیر پشت‌سرهم بالا و پایین موج می‌گیرند؛ هر حرف در span جدا است و تاخیر افزایشی رقص منظم می‌سازد. برای لوگوهای متنی، بنرهای شاد و دعوت به بازی مناسب است. حرکت با translateY و منحنی نرم است و توقف کامل ندارد. برای فارسی که حروف چسبان است نسخه کلمه‌ای هم پیشنهاد شده است.

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

حروف چسبان فارسی در span جدا می‌شکنند؛ پس هر کلمه را یک span کنید و تاخیرها را کلمه‌ای بدهید تا موج بین کلمات جریان یابد و اتصال حروف سالم بماند.

متغیر --d هر span تعیین‌کننده است؛ گام 0.1s متعارف است. برای حروف بیشتر ادامه دهید و برای موج سریع‌تر گام را کوچک‌تر کنید.

ویژگی aria-label روی والد گذاشته شده تا اسکرین‌ریدر کلمه کامل را بخواند و حروف جداگانه هجی نشوند.

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

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

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

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

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

کپچا

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

شاید بپسندی

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

متن موج‌دار حروف

متن موج حروف
۳۲
۴.۶ (۵)

CREATIVE

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

متن خط دور توخالی

متن توخالی outline
۱۰۰
۴.۲ (۱۶)

خلاقیت بی‌مرز

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

متن گرادیان جاری

متن گرادیان تیتر
۱۰۰
۴.۲ (۱۶)