搜尋
首頁web前端css教學CSS3 clip-path屬性實戰:動態區域裁剪

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

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

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

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

CodePen Demo -- Material Design Menu By Bennett Feely

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

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

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

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

這裡我簡單羅列一些可能的方法:

  • 陰影box-shadow

  • 漸層radial-gradient

  • #縮放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;
    }
}

核心就在於:

  • #外層一個設定了

    overflow: hideen 的遮罩

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

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

效果如下:

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

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

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

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

所以,

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

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

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

#使用漸層radial-gradient 實作

下面我們使用徑向漸層

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 的時候,讓原本只是一個小圓背景,變成一個大圓背景,效果如下:

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

emmm,效果確實是還原了,問題也很致命:

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

  • 和第一種

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

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

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

emmm,還有一個方法,透過縮放

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

所以到這裡,想實現上述的效果,核心在於:

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

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

利用clip-path 實作動態區域裁切

所以,這裡,我們其實是需要一個

動態的區域裁切

在我的這篇文章中 --

如何不使用 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 的時候,擴大裁剪圓的半徑到整個矩形範圍即可。

效果如下:

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

这样,我们就能完美的实现题图的效果,并且,内置的 DOM 元素,直接写进这个 div 内部即可。

<div class="g-container">
    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
</div>

效果如下:

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

CodePen Demo -- clip-path zoom in animation

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

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

最后

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

(学习视频分享:css视频教程

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

陳述
本文轉載於:segmentfault。如有侵權,請聯絡admin@php.cn刪除
我如何在兩天內創建一個代碼美化器我如何在兩天內創建一個代碼美化器Apr 19, 2025 am 10:19 AM

最近,我為代碼美化機製作了一條線框。第二天,我決定將其變成真正的工具。整個項目花了不到兩天的時間

在100行代碼中使用React Hook構建聊天應用程序在100行代碼中使用React Hook構建聊天應用程序Apr 19, 2025 am 10:16 AM

我們之前在CSS-Tricks附近看過React Hooks。我也有一篇文章也介紹了它們,該文章說明瞭如何使用它們來創建它們

在JavaScript應用程序中包括CSS的許多方法在JavaScript應用程序中包括CSS的許多方法Apr 19, 2025 am 10:08 AM

歡迎來到前端發展之地中一個引起爭議的話題!我敢肯定,大多數閱讀此書都遇到了您的博覽會

引入NetLify分析引入NetLify分析Apr 19, 2025 am 10:07 AM

您在附帶項目上工作一段時間。您認為它很酷!您決定將其釋放到世界上。然後……順利進行。否則進展不順利。等待,

五星級評分的五種方法五星級評分的五種方法Apr 19, 2025 am 10:04 AM

在喜歡和社會統計的世界中,評論是留下反饋的非常重要的方法。用戶通常喜歡以前知道他人的意見

如果您不知道CSS,哪些CSS很棒,這是最有意義的?如果您不知道CSS,哪些CSS很棒,這是最有意義的?Apr 19, 2025 am 09:56 AM

彼得·保羅(Peter-Paul)發布了這個問題:

用剪貼路徑動畫用剪貼路徑動畫Apr 19, 2025 am 09:52 AM

剪輯路徑是我們通常知道在那裡的CSS屬性之一,但出於任何原因可能不會經常到達。從某種意義上說有點令人生畏

將GraphQL操場與Gatsby一起使用將GraphQL操場與Gatsby一起使用Apr 19, 2025 am 09:51 AM

我假設你們中的大多數人已經聽說過蓋茨比,至少很鬆散地知道,這基本上是一個用於React站點的靜態站點生成器。通常

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱工具

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。