DEMO
CODE
<div class="demo-stage nft-stage"><h2 class="nft-text">NEON</h2></div>
.nft-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.nft-text { font-family:'Oswald',sans-serif; font-size:clamp(3rem,12vw,5rem); letter-spacing:.15em; color:#fff; animation:nft 3s infinite; }
@keyframes nft {
0%,19%,21%,23%,80%,100% { text-shadow:0 0 6px #E91B89,0 0 14px #E91B89,0 0 28px #E91B89,0 0 48px #7B37A8; color:#fff; }
20%,22%,55% { text-shadow:none; color:#5a5a5a; }
}
AI PROMPT
ネオンサインのように不規則に明滅する見出しをCSSだけで作って。text-shadowを多重（0 0 6px / 14px / 28px / 48px と色違い）にしてネオンの光を表現。@keyframesで大半のキーで点灯（光あり・白文字）、20%/22%/55%など一部キーで text-shadow:none + 暗い文字色にして「チカッ」と消える。バー・レトロ系ブランドのヒーローに。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
ネオンサインのように不規則に明滅する見出し。バー・ナイト系・レトロなブランドのヒーローに。CSSのみ。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。
ヒーローの見出し・キャッチコピー・セクションタイトルなど、視線を集めたいテキストに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。