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

ブラー→シャープ見出し

ぼやけた状態からピントが合うように鮮明になる見出し。写真・映像・カメラ関連サイトや、コンセプトページの導入見出しに向いています。

css

プレビュー

ソースコード

HTML

<h4 class="d02-01-19-h io-reveal">クリアな未来へ。</h4>

CSS

.d02-01-19 .d02-01-19-h{
          font-size:28px;
          font-weight:800;
          color:#1a2333;
          letter-spacing:.04em;
          filter:blur(10px);
          opacity:0;
          transform:scale(1.04);
          transition:filter 1s cubic-bezier(.22,1,.36,1), opacity 1s ease, transform 1s cubic-bezier(.22,1,.36,1);
        }
        .d02-01-19 .d02-01-19-h.is-in{
          filter:blur(0);
          opacity:1;
          transform:scale(1);
        }

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