パーツ番号 02-09-06 ・ CSSのみ

ホログラム虹色シフトテキスト

虹色のグラデーションが文字の中を流れ、光の反射のようなグレアが横切ります。WordPressのSF・テック系プロダクトサイトの未来感あるロゴ表現に向いています。

autocss

プレビュー

ソースコード

HTML

<h4 class="d02-09-06-txt">HOLOGRAM</h4>
        <div class="d02-09-06-glare"></div>

CSS

.d02-09-06{background:#05070d}
        .d02-09-06-txt{margin:0;font-size:34px;font-weight:900;letter-spacing:2px;font-family:ui-monospace,Menlo,monospace;
          background:linear-gradient(100deg,#38bdf8,#a78bfa,#f472b6,#34d399,#38bdf8);
          background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
          animation:d1056shift 5s linear infinite;filter:drop-shadow(0 0 10px rgba(56,189,248,.35))}
        .d02-09-06-glare{position:absolute;top:0;bottom:0;width:35%;left:-50%;pointer-events:none;
          background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);
          animation:d1056glare 4s linear infinite;mix-blend-mode:screen}
        @keyframes d1056shift{0%{background-position:0 0}100%{background-position:300% 0}}
        @keyframes d1056glare{0%{left:-50%}100%{left:150%}}
        @media (prefers-reduced-motion: reduce){
          .d02-09-06-txt{animation:none;background-position:0 0}
          .d02-09-06-glare{animation:none;opacity:0}
        }

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