目錄
最后
首頁 web前端 css教學 CSS3 clip-path屬性實戰:動態區域裁剪

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

Dec 20, 2021 am 10:30 AM
css3

這篇文章帶大家了解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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

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

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

純CSS3怎麼實現波浪效果? (程式碼範例) 純CSS3怎麼實現波浪效果? (程式碼範例) Jun 28, 2022 pm 01:39 PM

純CSS3怎麼實現波浪效果?這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法,希望對大家有幫助!

巧用CSS實現各種奇形怪狀按鈕(附代碼) 巧用CSS實現各種奇形怪狀按鈕(附代碼) Jul 19, 2022 am 11:28 AM

這篇文章帶大家看看怎麼使用 CSS 輕鬆實現高頻出現的各類奇形怪狀按鈕,希望對大家有幫助!

css怎麼隱藏元素但不佔空間 css怎麼隱藏元素但不佔空間 Jun 01, 2022 pm 07:15 PM

兩種方法:1、利用display屬性,只要為元素加上「display:none;」樣式即可。 2.利用position和top屬性設定元素絕對定位來隱藏元素,只需為元素加上「position:absolute;top:-9999px;」樣式。

css3怎麼實現花邊邊框 css3怎麼實現花邊邊框 Sep 16, 2022 pm 07:11 PM

在css中,可以利用border-image屬性來實作花邊邊框。 border-image屬性可以使用圖片來建立邊框,即給邊框加上背景圖片,只需要將背景圖片指定為花邊樣式即可;語法「border-image: url(圖片路徑) 向內偏移值圖像邊界寬度outset 是否重複;」。

css3如何實現滑鼠點擊圖片放大 css3如何實現滑鼠點擊圖片放大 Apr 25, 2022 pm 04:52 PM

實作方法:1、使用「:active」選擇器選取滑鼠點擊圖片的狀態;2、使用transform屬性和scale()函數實現圖片放大效果,語法「img:active {transform: scale(x軸放大倍率,y軸放大倍率);}」。

原來利用純CSS也能實現文字輪播與圖片輪播! 原來利用純CSS也能實現文字輪播與圖片輪播! Jun 10, 2022 pm 01:00 PM

怎麼製作文字輪播與圖片輪播?大家第一想到的是利用js,其實利用純CSS也能實現文字輪播與圖片輪播,下面來看看實作方法,希望對大家有幫助!

css3怎麼設定動畫旋轉速度 css3怎麼設定動畫旋轉速度 Apr 28, 2022 pm 04:32 PM

在css3中,可以利用「animation-timing-function」屬性來設定動畫旋轉速度,該屬性用於指定動畫將如何完成一個週期,設定動畫的速度曲線,語法為「元素{animation-timing-function:速度屬性值;}」。

css3動畫效果有變形嗎 css3動畫效果有變形嗎 Apr 28, 2022 pm 02:20 PM

css3中的動畫效果有變形;可以利用「animation:動畫屬性@keyframes ..{..{transform:變形屬性}}」實現變形動畫效果,animation屬性用於設定動畫樣式,transform屬性用於設定變形樣式。

See all articles