パーツ番号 02-01-04 ・ CSSのみ

グリッチ見出し

疑似要素2枚を色ずれさせてチラつかせるデジタルグリッチ演出。ゲーム・テック系サイトのタイトルまわりにインパクトを出せます。

css

プレビュー

ソースコード

HTML

<h4 data-text="GLITCH EFFECT" class="d02-01-04-h">GLITCH EFFECT</h4>

CSS

.prev.d02-01-04{ background:#0b0e14; }
        .d02-01-04 .d02-01-04-h{
          position:relative;
          font-size:30px;
          font-weight:800;
          letter-spacing:.08em;
          color:#f1f5f9;
        }
        .d02-01-04 .d02-01-04-h::before,
        .d02-01-04 .d02-01-04-h::after{
          content:attr(data-text);
          position:absolute;
          inset:0;
          opacity:.8;
        }
        .d02-01-04 .d02-01-04-h::before{
          color:#ff2d78;
          animation:d02-01-04-g1 2.4s steps(2,end) infinite;
        }
        .d02-01-04 .d02-01-04-h::after{
          color:#22d3ee;
          animation:d02-01-04-g2 2.4s steps(2,end) infinite;
        }
        @keyframes d02-01-04-g1{
          0%,88%,100%{ transform:translate(0,0); clip-path:inset(0 0 0 0); opacity:0; }
          90%{ transform:translate(-3px,1px); clip-path:inset(10% 0 55% 0); opacity:.9; }
          93%{ transform:translate(3px,-2px); clip-path:inset(60% 0 8% 0); opacity:.9; }
          96%{ transform:translate(-2px,2px); clip-path:inset(30% 0 35% 0); opacity:.9; }
        }
        @keyframes d02-01-04-g2{
          0%,88%,100%{ transform:translate(0,0); clip-path:inset(0 0 0 0); opacity:0; }
          89%{ transform:translate(3px,-1px); clip-path:inset(48% 0 20% 0); opacity:.9; }
          92%{ transform:translate(-3px,2px); clip-path:inset(5% 0 70% 0); opacity:.9; }
          95%{ transform:translate(2px,1px); clip-path:inset(70% 0 5% 0); opacity:.9; }
        }

クラス名 .d02-01-04 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。