這篇文章帶大家了解CSS3 clip-path(裁剪路徑),介紹一下如何利用 clip-path 實現動態區域裁剪,希望對大家有所幫助!
今天逛CodePen,看到了這樣一個很有意思的效果:
##這個效果還是有一些值得探討學習的點,下面我們一起來看看。 如何實現這樣一個類似的效果? 首先,想一想,如果讓你去實現上面的效果,你會怎麼做呢? 這裡我簡單羅列一些可能的方法:CodePen Demo -- Material Design Menu By Bennett Feely
網址:https://codepen.io/bennettfeely/pen/fHdFb
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 的遮罩
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 實作下面我們使用徑向漸層
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,效果確實是還原了,問題也很致命:
box-shadow 的方法類似,隱藏在白色之下的導航元素的DOM 不好放置
上述Demo 的程式碼-- CodePen Demo -- radial-gradient zoom in animation網址:https://codepen.io/Chokcoco/pen/RwZOqWbemmm,還有一個方法,透過縮放
transform: scale(),也會存一定問題,這裡不繼續展開。
動態的區域裁切。
在我的這篇文章中 --如何不使用 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中文網其他相關文章!