パーツ番号 02-11-11 ・ CSSのみ

文字ごとブラー・フォーカスモーフィング切り替え

ぼやけた状態からピントが合うようにくっきり浮かび上がりながら単語が切り替わり続けます。WordPressのブランドコンセプトページで、じわりと言葉が像を結ぶような静かな印象を演出できます。

css

プレビュー

ソースコード

HTML

<div class="d02-11-11-wrap">
          <span class="d02-11-11-w" style="animation-delay:0s">ぼやけた景色が、</span>
          <span class="d02-11-11-w" style="animation-delay:2.4s">くっきり見えてくる。</span>
          <span class="d02-11-11-w" style="animation-delay:4.8s">その先の未来へ。</span>
        </div>

CSS

.d02-11-11{background:#0f172a}
        .d02-11-11-wrap{position:relative;height:1.8em;width:260px}
        .d02-11-11-w{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
          text-align:center;font-size:19px;font-weight:800;color:#e2e8f0;opacity:0;filter:blur(10px);
          animation:d1735blur 7.2s ease-in-out infinite}
        @keyframes d1735blur{
          0%{opacity:0;filter:blur(10px)}
          6%{opacity:1;filter:blur(0)}
          27%{opacity:1;filter:blur(0)}
          33%{opacity:0;filter:blur(10px)}
          100%{opacity:0;filter:blur(10px)}
        }
        @media (prefers-reduced-motion: reduce){
          .d02-11-11-w{animation:none;opacity:0;filter:none}
          .d02-11-11-w:first-child{opacity:1}
        }

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