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

液体マスク見出し

波形にゆがんだclip-pathがホバーで平らな形へ戻る液体のような見出し。水・飲料・アクアリウムなど液体イメージを扱うサイトの見出しに。

hovercss

プレビュー

ソースコード

HTML

<h4 class="d02-01-27-h">LIQUID</h4>

CSS

.prev.d02-01-27{ background:#0c1a2e; }
        .d02-01-27 .d02-01-27-h{
          font-size:36px;
          font-weight:900;
          letter-spacing:.05em;
          color:#5eead4;
          clip-path:polygon(0% 20%, 10% 35%, 20% 15%, 30% 40%, 40% 10%, 50% 30%, 60% 5%, 70% 35%, 80% 15%, 90% 40%, 100% 20%, 100% 100%, 0% 100%);
          transition:clip-path .9s cubic-bezier(.22,1,.36,1);
        }
        .d02-01-27 .d02-01-27-h:hover{
          clip-path:polygon(0% 0%, 10% 0%, 20% 0%, 30% 0%, 40% 0%, 50% 0%, 60% 0%, 70% 0%, 80% 0%, 90% 0%, 100% 0%, 100% 100%, 0% 100%);
        }

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