<h2 class="radikalwp-txt-glitch" data-text="GLITCH">GLITCH<//h2>
.radikalwp-txt-glitch {
position: relative;
margin: 0;
font-size: 50px;
font-weight: 900;
letter-spacing: 4px;
text-align: center;
color: #e2e8f0;
}
.radikalwp-txt-glitch::before,
.radikalwp-txt-glitch::after {
content: attr(data-text);
position: absolute;
inset: 0;
opacity: .75;
}
.radikalwp-txt-glitch::before {
color: #22d3ee;
animation: radikalwp-txt-glitch-a 3.2s infinite linear alternate-reverse;
}
.radikalwp-txt-glitch::after {
color: #f43f5e;
animation: radikalwp-txt-glitch-b 2.7s infinite linear alternate-reverse;
}
@keyframes radikalwp-txt-glitch-a {
0%, 92% { clip-path: inset(0 0 100% 0); transform: translateX(0); }
94% { clip-path: inset(15% 0 55% 0); transform: translateX(-3px); }
96% { clip-path: inset(60% 0 10% 0); transform: translateX(3px); }
98%, 100% { clip-path: inset(0 0 100% 0); transform: translateX(0); }
}
@keyframes radikalwp-txt-glitch-b {
0%, 88% { clip-path: inset(0 0 100% 0); transform: translateX(0); }
90% { clip-path: inset(45% 0 30% 0); transform: translateX(3px); }
93% { clip-path: inset(10% 0 70% 0); transform: translateX(-3px); }
96%, 100% { clip-path: inset(0 0 100% 0); transform: translateX(0); }
}
درباره این اسنیپت
افکت گلیچ با دو نسخه کپی از متن در رنگهای قرمز و فیروزهای که هنگام تریگرها کمی جابهجا میشوند؛ حس اختلال دیجیتال و فضای سایبری میدهد. با شبهعنصرها و انیمیشن کوتاه دورهای ساخته شده و برای برندهای گیمینگ و رویدادهای تکنولوژی مناسب است. در حالت ساکن، متن کاملاً خوانا میماند.
پرسشهای متداول
چون شبهعنصرها نمیتوانند متن والد را کپی کنند؛ با attr(data-text) هر دو لایه هممتن میشوند. اگر متن اصلی را عوض کردید، همان را در data-text هم بگذارید.
بله؛ لایهها با clip-path کامل بستهاند و فقط چند درصد از هر چرخه باز میشوند تا افکت لحظهای و خوانا بماند.
مقادیر translateX داخل کیفریمها را افزایش دهید (مثلاً 6px)؛ حرکت بیشتر و پرانرژیتر میشود ولی متن کوتاه بهتر از بلند تحملش میکند.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۷ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!