先上結果，滑鼠移入可以看效果：
See the Pen
hover-clip-path by Dean (@hcd1983)
on CodePen.0
來看看 css 的 clip-path 屬性。 Mozilla 有一些介紹 https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path
主要的功能就是做物件的裁切遮罩，提供了幾個基本的方法。
- circle(50px) : 裡面的值，代表圓圈的半徑
- ellipse(30px 75px at 30% 50%): 其中 30 代表寬，75 代表高， at 30% 50% 代表中心點對於物件的位置。
- polygon(50% 0, 100% 50%, 50% 100%, 0 50%) : 每一個座標用逗號隔開，進行裁切。
- path(‘M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z’) : 類似 svg 的 path
- inset(10px 20px 30px 40px) : 依序裁切 上右下左
做動畫的時候必須注意，除了 circle 和 ellipse 每一個數值都要依照對應上一個狀態的初始數值，否則就會造成動畫直接失敗。 以 polygon 為例：
/* 這邊定義了四個點 */
.clip-me {
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
transition: clip-path .5s ease;
}
/* 結束狀態也要定義四個點才會成功 */
.clip-me:hover {
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}
