پیشنمایش زنده (iframe sandbox)
تمامصفحه
<span class="radikalwp-stripe-text">فروش ویژه امروز<//span>
.radikalwp-stripe-text {
display: inline-block;
font-size: 42px;
font-weight: 900;
letter-spacing: 1px;
line-height: 1.6;
background: repeating-linear-gradient(-45deg, #1e1b4b 0 10px, #6366f1 10px 20px, #a5b4fc 20px 22px);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: radikalwp-stripe-move 3s linear infinite;
transition: letter-spacing .3s ease;
}
.radikalwp-stripe-text:hover { letter-spacing: 4px; }
@keyframes radikalwp-stripe-move {
to { background-position: 31px 0; }
}
درباره این اسنیپت
متن توپر با بافت راهراه مورب سهرنگ که داخل حروف بهآرامی جابهجا میشود. تکنیک background-clip بافت را دقیقاً داخل شکل حروف حبس میکند. برای تیتر بنر فروش، بخش تخفیف و هدرهای پرانرژی مناسب است. زاویه و ضخامت راهها با مقادیر repeating-linear-gradient قابل تنظیم است.
پرسشهای متداول
اعداد داخل repeating-linear-gradient ضخامت هر نوار را تعیین میکنند. آنها را متناسب کوچک کنید تا بافت ریزتر شود.
بله؛ هم پیشوند -webkit-background-clip و هم نسخه استاندارد در کد قرار دارد تا همه مرورگرهای مدرن درست رندر کنند.
بله؛ خط animation را حذف کنید تا بافت ثابت بماند. باز شدن فاصله حروف در هاور همچنان فعال میماند.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۸ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!