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

ボックスリビール見出し

色付きボックスが左から右へ横切った後に文字が現れる映画的な演出。事例紹介や実績セクションのタイトルにおすすめ。

css

プレビュー

ソースコード

HTML

<span class="d02-01-06-wrap io-reveal"><span class="d02-01-06-txt">新サービス、始動。</span></span>

CSS

.d02-01-06 .d02-01-06-wrap{
          position:relative;
          display:inline-block;
          padding:8px 14px;
          overflow:hidden;
        }
        .d02-01-06 .d02-01-06-txt{
          display:inline-block;
          font-size:26px;
          font-weight:800;
          color:#1a2333;
          letter-spacing:.05em;
          opacity:0;
        }
        .d02-01-06 .d02-01-06-wrap::after{
          content:"";
          position:absolute;
          inset:0;
          background:#2563eb;
          transform:scaleX(0);
          transform-origin:left center;
        }
        .d02-01-06 .d02-01-06-wrap.is-in .d02-01-06-txt{
          animation:d02-01-06-show .01s linear .55s forwards;
        }
        .d02-01-06 .d02-01-06-wrap.is-in::after{
          animation:d02-01-06-sweep 1.1s cubic-bezier(.65,0,.35,1) forwards;
        }
        @keyframes d02-01-06-sweep{
          0%{ transform:scaleX(0); transform-origin:left center; }
          45%,55%{ transform:scaleX(1); transform-origin:left center; }
          56%{ transform:scaleX(1); transform-origin:right center; }
          100%{ transform:scaleX(0); transform-origin:right center; }
        }
        @keyframes d02-01-06-show{
          to{ opacity:1; }
        }

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