← 動的パーツギャラリーへ戻る

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

ストローク→塗り 文字

輪郭だけの文字が左から徐々に塗りつぶされていきます。WordPressのブランド見出しやコンセプト提示で洗練された印象を演出できます。

css

プレビュー

ソースコード

HTML

<h4 class="d02-02-05-txt">OUTLINE</h4>

CSS

.d02-02-05-txt{margin:0;font-size:52px;font-weight:900;letter-spacing:2px;
          -webkit-text-stroke:2px #db2777;color:transparent;
          background:linear-gradient(90deg,#db2777 50%,transparent 50%);
          background-size:200% 100%;background-position:100% 0;
          -webkit-background-clip:text;background-clip:text;
          animation:d185fill 4s ease-in-out infinite}
        @keyframes d185fill{
          0%,15%{background-position:100% 0}
          55%,75%{background-position:0 0}
          100%{background-position:100% 0}
        }

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