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

点滅カーソル見出し

テキストは最初から表示したまま、末尾のカーソルだけが点滅し続けるタイプライター風見出し。予約受付や募集告知の一文にさりげない動きを加えます。

autocss

プレビュー

ソースコード

HTML

<h4 class="d02-01-16-h">先着順で受付中<span class="d02-01-16-cursor">|</span></h4>

CSS

.d02-01-16 .d02-01-16-h{
          font-size:26px;
          font-weight:700;
          color:#1a2333;
          letter-spacing:.03em;
        }
        .d02-01-16 .d02-01-16-cursor{
          display:inline-block;
          margin-left:3px;
          color:#2563eb;
          font-weight:400;
          animation:d02-01-16-blink 1s step-end infinite;
        }
        @keyframes d02-01-16-blink{
          0%,100%{ opacity:1; }
          50%{ opacity:0; }
        }

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