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

アクセントブリンク見出し

見出し末尾のピリオドだけが心拍のように脈打って点滅し続ける演出。新着情報や限定告知の見出しにさりげない注目ポイントを加えます。

autocss

プレビュー

ソースコード

HTML

<h4 class="d02-01-42-h">NEW ARRIVAL<span class="d02-01-42-dot">.</span></h4>

CSS

.d02-01-42 .d02-01-42-h{
          font-size:28px;
          font-weight:800;
          letter-spacing:.05em;
          color:#1a2333;
        }
        .d02-01-42 .d02-01-42-dot{
          display:inline-block;
          color:#f97316;
          animation:d02-01-42-blink 1.6s ease-in-out infinite;
        }
        @keyframes d02-01-42-blink{
          0%,100%{ opacity:1; transform:scale(1); text-shadow:none; }
          10%{ opacity:.3; transform:scale(1.7); text-shadow:0 0 10px rgba(249,115,22,.8); }
          20%{ opacity:1; transform:scale(1); text-shadow:none; }
          30%{ opacity:.3; transform:scale(1.7); text-shadow:0 0 10px rgba(249,115,22,.8); }
          40%,100%{ opacity:1; transform:scale(1); text-shadow:none; }
        }

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