CSS3 clip-path屬性實戰：動態區域裁剪

這篇文章帶大家了解CS​​S3 clip-path（裁剪路徑），介紹一下如何利用 clip-path 實現動態區域裁剪，希望對大家有所幫助！

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

CodePen Demo -- Material Design Menu By Bennett Feely

網址：https://codepen.io/bennettfeely/pen/fHdFb

• 陰影box-shadow

• 漸層radial-gradient

• #縮放transform: scale()

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

• #外層一個設定了

  overflow: hideen 的遮罩

• 內層元素hover 的時候，實作一個

  box-shadow : 0 0 0 0 #fff 到box-shadow: 0 0 0 420px #fff 的變化

• 當我們的滑鼠離開圓形的時候，整個動畫就開始反向進行了，白色區域開始消失，如果我們要進行按鈕操作，是無法完成的

• #隱藏在動畫展開後的矩形內的元素，不容易放置

box-shadow 看著雖好，但是只能放棄。

上述Demo 的程式碼-- CodePen Demo -- box-shadow zoom in animation

網址：https://codepen.io/Chokcoco/pen/jOLRQNy

radial-gradient 加CSS @property，也可以還原上述效果：

<div class="g-container"></div>

@property --size {
  syntax: &#39;<length>&#39;;
  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 到小圓上，只需要進入div 的範圍，動畫就會開始，這顯然是不對的

• 和第一種

  box-shadow 的方法類似，隱藏在白色之下的導航元素的DOM 不好放置

上述Demo 的程式碼-- CodePen Demo -- radial-gradient zoom in animation

網址：https://codepen.io/Chokcoco/pen/RwZOqWb

transform: scale()，也會存一定問題，這裡不繼續展開。

• 滑鼠要hover 到圓上，才能開始動畫，並且，滑鼠可以在展開後的範圍內自由移動，且不會收回動畫效果

• 動畫展開後，裡面的DOM 的放置，不能太麻煩，能不借助Javascript 去控制裡面內容的顯示隱藏最好

動態的區域裁切。

如何不使用 overflow: hidden 實作 overflow: hidden？ ，介紹了 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

网址：https://codepen.io/Chokcoco/pen/yLorrRm

很有意思的一个技巧，利用 clip-path 实现动态区域裁剪，希望大家能够掌握。

最后

好了，本文到此结束，希望本文对你有所帮助 :)

（学习视频分享：css视频教程）

以上是CSS3 clip-path屬性實戰：動態區域裁剪的詳細內容。更多資訊請關注PHP中文網其他相關文章！