<h2 class="radikalwp-txt-gradient">خلاقیت بیمرز<//h2>
.radikalwp-txt-gradient {
margin: 0;
font-size: 42px;
font-weight: 900;
text-align: center;
background: linear-gradient(110deg, #6366f1, #ec4899, #f59e0b, #6366f1);
background-size: 250% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: radikalwp-txt-gradient-flow 6s ease infinite;
}
@keyframes radikalwp-txt-gradient-flow {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
درباره این اسنیپت
تیتری با گرادیان چندرنگ که آهسته داخل حروف جابهجا میشود و حس نور جاری میدهد. متن با background-clip به گرادیان بریده شده و انیمیشن فقط موقعیت پسزمینه را حرکت میدهد. برای هیروهای لندینگ، تیترهای فروشگاه و بخشهای خلاقانه مناسب است. با هر پسزمینهای چون خود متن رنگ است هماهنگ میشود.
پرسشهای متداول
چون گرادیان پسزمینه با background-clip: text فقط داخل شکل حروف نمایش داده میشود؛ اگر رنگ متن رنگی بماند روی گرادیان مینشیند و افکت از بین میرود.
مرورگرهایی که background-clip: text ندارند متن شفاف میبینند؛ برای احتیاط میتوانید رنگ را داخل @supports بگذارید و fallback رنگی تعیین کنید.
کافی است دو مقدار درصد در کیفریم جابهجا شود؛ جهت حرکت برعکس میشود و سرعت همان میماند.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۱۶ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!