這篇文章主要介紹“CSS3 clip-path怎么使用”，在日常操作中，相信很多人在CSS3 clip-path怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS3 clip-path怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

創(chuàng)新互聯(lián)公司于2013年開始，先為確山等服務(wù)建站，確山等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為確山企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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

CodePen Demo -- Material Design Menu By Bennett Feely

網(wǎng)址：https://codepen.io/bennettfeely/pen/fHdFb

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

如何實現(xiàn)這樣一個類似的效果？

首先，想一想，如果讓你去實現(xiàn)上面的效果，你會怎么做呢？

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

• 陰影 box-shadow

• 漸變 radial-gradient

• 縮放 transform: scale()

快速的一個一個過一下。

使用 box-shadow 實現(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;
    }
}

核心就在于：

• 外層一個設(shè)置了 overflow: hideen 的遮罩

• 內(nèi)層元素 hover 的時候，實現(xiàn)一個 box-shadow: 0 0 0 0 #fff 到 box-shadow: 0 0 0 420px #fff 的變化

效果如下：

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

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

• 隱藏在動畫展開后的矩形內(nèi)的元素，不容易放置

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

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

網(wǎng)址：https://codepen.io/Chokcoco/pen/jOLRQNy

使用漸變 radial-gradient 實現(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;
    }
}

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

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

• 由于是背景的變化，所以鼠標不需要 hover 到小圓上，只需要進入 div 的范圍，動畫就會開始，這顯然是不對的

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

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

網(wǎng)址：https://codepen.io/Chokcoco/pen/RwZOqWb

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

所以到這里，想實現(xiàn)上述的效果，核心在于：

• 鼠標要 hover 到圓上，才能開始動畫，并且，鼠標可以在展開后的范圍內(nèi)自由移動，且不會收回動畫效果

• 動畫展開后，里面的 DOM 的放置，不能太麻煩，能不借助 Javascript 去控制里面內(nèi)容的顯示隱藏最好

利用 clip-path 實現(xiàn)動態(tài)區(qū)域裁剪

所以，這里，我們其實是需要一個動態(tài)的區(qū)域裁剪。

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

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

<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 的時候，擴大裁剪圓的半徑到整個矩形范圍即可。

效果如下：

這樣，我們就能完美的實現(xiàn)題圖的效果，并且，內(nèi)置的 DOM 元素，直接寫進這個 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

網(wǎng)址：https://codepen.io/Chokcoco/pen/yLorrRm

到此，關(guān)于“CSS3 clip-path怎么使用”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

本文題目：CSS3clip-path怎么使用
轉(zhuǎn)載來源：http://www.rwnh.cn/article30/jdjipo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、網(wǎng)站導航、靜態(tài)網(wǎng)站、定制網(wǎng)站、微信公眾號、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)