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

ジグル見出し

見出しの一部の単語だけが常時ゆっくりと左右に揺れ続ける演出。子ども向けサービスやポップなキャンペーンページの見出しに遊び心を添えます。

autocssoverlay

プレビュー

ソースコード

HTML

<h4 class="d02-01-32-h">はねる、<span class="d02-01-32-jiggle">文字</span>たち。</h4>

CSS

.d02-01-32 .d02-01-32-h{
          font-size:26px;
          font-weight:700;
          color:#1a2333;
          letter-spacing:.03em;
        }
        .d02-01-32 .d02-01-32-jiggle{
          display:inline-block;
          color:#f472b6;
          animation:d02-01-32-jiggle 1.8s ease-in-out infinite;
        }
        @keyframes d02-01-32-jiggle{
          0%,100%{ transform:rotate(0deg) translateX(0); }
          25%{ transform:rotate(-4deg) translateX(-2px); }
          75%{ transform:rotate(4deg) translateX(2px); }
        }

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