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