CSSだけで作るモーフィング

これは何

• タイトル通りですが、あくまで「なんちゃってモーフィング」です
  • こんなものが作れます

そもそもモーフィングとは？

Wikipediaより引用。

モーフィング（morphing）とは、映画やアニメーションの中で使用されるSFXの1つで、コンピュータグラフィックスの手法の1つでもある。

ある物体から別の物体へと自然に変形する映像をみせる。これはオーバーラップを使った映像のすり替えとは異なり、変形していく間の映像をコンピュータによって補完して作成する。変身・変化を意味する単語「メタモルフォルシス(metamorphosis)」の中間部分から命名されたという説と、move(移動)+morphology(形態) の合成語であるとする説がある。

要は、ある形状からある形状へ、なめらかに変化していくイメージです。

実際のコード

今回の例に必要なコードはこれだけです。

<div class="wrapper">
  <div class="mark"></div>
</div>

`css:style.css
.wrapper {
background-color: #eee;
display: grid;
place-items: center;
height: 400px;
width: 400px;
}

.mark {
background-color: #55c500;
clip-path: polygon(0 100%, 50% 0, 50% 0, 50% 0, 50% 0, 100% 100%, 100% 100%, 100% 100%, 85% 100%, 15% 100%, 0 100%, 0 100%);
display: inline-block;
height: 300px;
transition: all 0.2s ease-in-out;
width: 300px;
}

.wrapper:hover > .mark {
clip-path: polygon(33% 0, 33% 41%, 60% 0, 100% 0, 59% 51%, 100% 100%, 60% 100%, 41% 67%, 33% 67%, 33% 100%, 0 100%, 0 0);
}
`

clip-pathを使う

CSSのclip-pathを使うのがポイントです。

あまり馴染みがないかもしれないのでMDNより引用。

clip-path は CSS のプロパティで、要素のどの部分を表示するかを設定するクリッピング領域を作ります。具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。

デザイナー相手なら「クリッピングマスクと同じです」といえばだいたい想像つくと思います。

これと:hoverとtransitionを組み合わせると、マウスカーソルを乗せた瞬間にパスの形が変わるのでモーフィングっぽく見えます。

ポイントは、カーソルを乗せる前後でパスの頂点の数を変えないことです。
そのため三角形を作るパスでも頂点を12個用意しています。

最後にもう一度