欣迪

先上結果,滑鼠移入可以看效果:

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);
}

訂閱 IT-Monk

訂閱最新文章的發布消息! 😚😚😚
Loading

作者介紹 - 欣迪

欣迪

從設計到寫程式,發現自己有追求前端技巧的自虐傾向。不斷的踩坑,再從坑裡爬出來,慢慢對攀岩有點心得。 目前在多間公司擔任網站設計顧問。 同時也是網站架設公司負責人。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。