利用 Clip-path 實(shí)現(xiàn)動(dòng)態(tài)區(qū)域裁剪
背景
今天逛 CodePen，看到了這樣一個(gè)非常有意思的效果：
CodePen Demo -- Material Design Menu By Bennett Feely[1]
這個(gè)效果還是有一些值得探討學(xué)習(xí)的點(diǎn)，下面我們一起來(lái)看看。
如何實(shí)現(xiàn)這樣一個(gè)類(lèi)似的效果?
首先，想一想，如果讓你去實(shí)現(xiàn)上面的效果，你會(huì)怎么做呢?
這里我簡(jiǎn)單羅列一些可能的辦法：
- 陰影 box-shadow
- 漸變 radial-gradient
- 縮放 transform: scale()
快速的一個(gè)一個(gè)過(guò)一下。
使用 box-shadow 實(shí)現(xiàn)
如果使用 box-shadow，代碼大致如下：
- <div class="g-container">
- <div class="g-item"></div>
- </div>
- .g-container {
- position: relative;
- width: 400px;
- height: 300px;
- overflow: hidden;
- }
- .g-item {
- position: absolute;
- width: 48px;
- height: 48px;
- border-radius: 50%;
- background: #fff;
- top: 20px;
- left: 20px;
- box-shadow: 0 0 0 0 #fff;
- transition: box-shadow .3s linear;
- &:hover {
- box-shadow: 0 0 0 420px #fff;
- }
- }
核心就在于：
- 外層一個(gè)設(shè)置了 overflow: hideen 的遮罩
- 內(nèi)層元素 hover 的時(shí)候，實(shí)現(xiàn)一個(gè) box-shadow: 0 0 0 0 #fff 到 box-shadow: 0 0 0 420px #fff 的變化
效果如下：
整體的動(dòng)畫(huà)是模擬出來(lái)了，但是它最致命的問(wèn)題有兩個(gè)：
- 當(dāng)我們的鼠標(biāo)離開(kāi)圓形的時(shí)候，整個(gè)動(dòng)畫(huà)就開(kāi)始反向進(jìn)行了，白色區(qū)域開(kāi)始消失，如果我們要進(jìn)行按鈕操作，是無(wú)法完成的
- 隱藏在動(dòng)畫(huà)展開(kāi)后的矩形內(nèi)的元素，不容易放置
所以，box-shadow 看著雖好，但是只能放棄。上述 Demo 的代碼 -- CodePen Demo -- box-shadow zoom in animation[2]
使用漸變 radial-gradient 實(shí)現(xiàn)
下面我們使用徑向漸變 radial-gradient 加上 CSS @property，也可以還原上述效果：
- <div class="g-container"></div>
- @property --size {
- syntax: '<length>';
- inherits: false;
- initial-value: 24px;
- }
- .g-container {
- position: relative;
- width: 400px;
- height: 300px;
- overflow: hidden;
- background: radial-gradient(circle at 44px 44px, #fff 0, #fff var(--size), transparent var(--size), transparent 0);
- transition: --size .3s linear;
- &:hover {
- --size: 450px;
- }
- }
我們通過(guò)控制徑向漸變的動(dòng)畫(huà)效果，在 hover 的時(shí)候，讓原本只是一個(gè)小圓背景，變成一個(gè)大圓背景，效果如下：
emmm，效果確實(shí)是還原了，問(wèn)題也很致命：
- 由于是背景的變化，所以鼠標(biāo)不需要 hover 到小圓上，只需要進(jìn)入 div 的范圍，動(dòng)畫(huà)就會(huì)開(kāi)始，這顯然是不對(duì)的
- 和第一種 box-shadow 的方法類(lèi)似，隱藏在白色之下的導(dǎo)航元素的 DOM 不好放置
上述 Demo 的代碼 -- CodePen Demo -- radial-gradient zoom in animation[3]
emmm，還有一種方法，通過(guò)縮放 transform: scale()，也會(huì)存一定問(wèn)題，這里不繼續(xù)展開(kāi)。
所以到這里，想實(shí)現(xiàn)上述的效果，核心在于：
- 鼠標(biāo)要 hover 到圓上，才能開(kāi)始動(dòng)畫(huà)，并且，鼠標(biāo)可以在展開(kāi)后的范圍內(nèi)自由移動(dòng)，且不會(huì)收回動(dòng)畫(huà)效果
- 動(dòng)畫(huà)展開(kāi)后，里面的 DOM 的放置，不能太麻煩，能不借助 Javascript 去控制里面內(nèi)容的顯示隱藏最好
利用 clip-path 實(shí)現(xiàn)動(dòng)態(tài)區(qū)域裁剪
所以，這里，我們其實(shí)是需要一個(gè)動(dòng)態(tài)的區(qū)域裁剪。
在我的這篇文章中 -- 如何不使用 overflow: hidden 實(shí)現(xiàn) overflow: hidden?[4]，介紹了 CSS 中幾種裁剪元素的方式，而其中，最適合利用在這個(gè)效果的，就是 -- clip-path。
利用 clip-path，可以非常好的實(shí)現(xiàn)，動(dòng)態(tài)裁剪的功能，并且，代碼也非常簡(jiǎn)單：
- <div class="g-container"></div>
- .g-container {
- position: relative;
- width: 400px;
- height: 300px;
- overflow: hidden;
- transition: clip-path .3s linear;
- clip-path: circle(20px at 44px 44px);
- background: #fff;
- &:hover {
- clip-path: circle(460px at 44px 44px);
- }
- }
我們只需要利用 clip-path，在最開(kāi)始的時(shí)候，將一個(gè)矩形 div，利用 clip-path: circle(20px at 44px 44px) 裁剪成一個(gè)圓，當(dāng) hover 的時(shí)候，擴(kuò)大裁剪圓的半徑到整個(gè)矩形范圍即可。
效果如下：
這樣，我們就能完美的實(shí)現(xiàn)題圖的效果，并且，內(nèi)置的 DOM 元素，直接寫(xiě)進(jìn)這個(gè) div 內(nèi)部即可。
- <div class="g-container">
- <ul>
- <li>11111</li>
- <li>22222</li>
- <li>33333</li>
- <li>44444</li>
- </ul>
- </div>
效果如下：
CodePen Demo -- clip-path zoom in animation[5]
很有意思的一個(gè)技巧，利用 clip-path 實(shí)現(xiàn)動(dòng)態(tài)區(qū)域裁剪，希望大家能夠掌握。
最后
好了，本文到此結(jié)束，希望本文對(duì)你有所幫助 :)
參考資料
[1]CodePen Demo -- Material Design Menu By Bennett Feely:
https://codepen.io/bennettfeely/pen/fHdFb
[2]CodePen Demo -- box-shadow zoom in animation:
https://codepen.io/Chokcoco/pen/jOLRQNy
[3]CodePen Demo -- radial-gradient zoom in animation:
https://codepen.io/Chokcoco/pen/RwZOqWb
[4]如何不使用 overflow: hidden 實(shí)現(xiàn) overflow: hidden?:
https://github.com/chokcoco/iCSS/issues/90
[5]CodePen Demo -- clip-path zoom in animation:
https://codepen.io/Chokcoco/pen/yLorrRm
