[[436815]]

背景

今天逛 CodePen，看到了這樣一個非常有意思的效果：

CodePen Demo -- Material Design Menu By Bennett Feely[1]

這個效果還是有一些值得探討學習的點，下面我們一起來看看。

如何實現這樣一個類似的效果?

首先，想一想，如果讓你去實現上面的效果，你會怎么做呢?

這里我簡單羅列一些可能的辦法：

1. 陰影 box-shadow
2. 漸變 radial-gradient
3. 縮放 transform: scale()

快速的一個一個過一下。

使用 box-shadow 實現

如果使用 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; 
    } 
} 

核心就在于：

1. 外層一個設置了 overflow: hideen 的遮罩
2. 內層元素 hover 的時候，實現一個 box-shadow: 0 0 0 0 #fff 到 box-shadow: 0 0 0 420px #fff 的變化

效果如下：

整體的動畫是模擬出來了，但是它最致命的問題有兩個：

1. 當我們的鼠標離開圓形的時候，整個動畫就開始反向進行了，白色區域開始消失，如果我們要進行按鈕操作，是無法完成的
2. 隱藏在動畫展開后的矩形內的元素，不容易放置

所以，box-shadow 看著雖好，但是只能放棄。上述 Demo 的代碼 -- CodePen Demo -- box-shadow zoom in animation[2]

使用漸變 radial-gradient 實現

下面我們使用徑向漸變 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; 
    } 
} 

我們通過控制徑向漸變的動畫效果，在 hover 的時候，讓原本只是一個小圓背景，變成一個大圓背景，效果如下：

emmm，效果確實是還原了，問題也很致命：

1. 由于是背景的變化，所以鼠標不需要 hover 到小圓上，只需要進入 div 的范圍，動畫就會開始，這顯然是不對的
2. 和第一種 box-shadow 的方法類似，隱藏在白色之下的導航元素的 DOM 不好放置

上述 Demo 的代碼 -- CodePen Demo -- radial-gradient zoom in animation[3]

emmm，還有一種方法，通過縮放 transform: scale()，也會存一定問題，這里不繼續展開。

所以到這里，想實現上述的效果，核心在于：

1. 鼠標要 hover 到圓上，才能開始動畫，并且，鼠標可以在展開后的范圍內自由移動，且不會收回動畫效果
2. 動畫展開后，里面的 DOM 的放置，不能太麻煩，能不借助 Javascript 去控制里面內容的顯示隱藏最好

利用 clip-path 實現動態區域裁剪

所以，這里，我們其實是需要一個動態的區域裁剪。

在我的這篇文章中 -- 如何不使用 overflow: hidden 實現 overflow: hidden?[4]，介紹了 CSS 中幾種裁剪元素的方式，而其中，最適合利用在這個效果的，就是 -- clip-path。

利用 clip-path，可以非常好的實現，動態裁剪的功能，并且，代碼也非常簡單：

<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，在最開始的時候，將一個矩形 div，利用 clip-path: circle(20px at 44px 44px) 裁剪成一個圓，當 hover 的時候，擴大裁剪圓的半徑到整個矩形范圍即可。

效果如下：

這樣，我們就能完美的實現題圖的效果，并且，內置的 DOM 元素，直接寫進這個 div 內部即可。

<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]

很有意思的一個技巧，利用 clip-path 實現動態區域裁剪，希望大家能夠掌握。

最后

好了，本文到此結束，希望本文對你有所幫助 :)

參考資料

[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 實現 overflow: hidden?:

https://github.com/chokcoco/iCSS/issues/90

[5]CodePen Demo -- clip-path zoom in animation:

https://codepen.io/Chokcoco/pen/yLorrRm