Glitch Text

DEMO

CODE

<div class="demo-stage gl-stage"><div class="gl-text" data-text="GLITCH">GLITCH</div></div>

.gl-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#1A1A1A; }
.gl-text { position:relative; font-family:'Oswald',sans-serif; font-size:clamp(2.6rem,10vw,5.5rem); font-weight:600; color:#fff; letter-spacing:.06em; }
.gl-text::before, .gl-text::after { content:attr(data-text); position:absolute; top:0; left:0; width:100%; height:100%; }
.gl-text::before { color:#E91B89; animation:gl-1 2.4s infinite linear alternate-reverse; }
.gl-text::after { color:#5BAADE; animation:gl-2 3.1s infinite linear alternate-reverse; }
@keyframes gl-1 { 0%{clip-path:inset(20% 0 60% 0);transform:translateX(-3px)} 20%{clip-path:inset(80% 0 5% 0)} 40%{clip-path:inset(43% 0 40% 0);transform:translateX(3px)} 60%{clip-path:inset(10% 0 75% 0)} 80%{clip-path:inset(55% 0 30% 0);transform:translateX(-2px)} 100%{clip-path:inset(70% 0 15% 0)} }
@keyframes gl-2 { 0%{clip-path:inset(15% 0 70% 0);transform:translateX(2px)} 25%{clip-path:inset(62% 0 25% 0)} 50%{clip-path:inset(35% 0 48% 0);transform:translateX(-3px)} 75%{clip-path:inset(78% 0 8% 0)} 100%{clip-path:inset(25% 0 58% 0);transform:translateX(3px)} }

AI PROMPT

文字のグリッチ効果をCSSのみで作って。data-text属性に同じ文字を持たせ、::before（ピンク）と::after（青）にcontent:attr(data-text)で複製。各疑似要素にclip-path:inset()を細かく切り替えるkeyframeとtranslateXのズレを与え、別速度のinfinite alternate-reverseで電子ノイズを表現。背景は黒。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。