2018年01月6日(土)

ノイズが走っているようなエフェクトのテキスト

• 0
• 19
• 17
• 35

Result

See the Pen CSS Glitched Text by kachibito (@kachibito) on CodePen.

CSSのみでノイズなテキストエフェクトを実装しています。
clipとkeyframesを応用しているようです。

css

.glitch {/*基本設定*/ color: white; font-size: 40px; position: relative; width: 400px; margin: 0 auto; } @keyframes noise-anim {/*細かい動きを設定してノイズが走っているかのように動かす*/ 0% { clip: rect(77px, 9999px, 6px, 0); } 5% { clip: rect(65px, 9999px, 70px, 0); } 10% { clip: rect(82px, 9999px, 82px, 0); } 15% { clip: rect(32px, 9999px, 35px, 0); } 20% { clip: rect(31px, 99...