您現在的位置是:電腦技術吧?>? 組裝維修 ??>??clip path,clip??>??正文詳情

clip path,clip

祁秋露2019-11-27 12:31:46 人圍觀
簡介path根據她過去的經驗,這個網站的HTML和CSS完全在她的能力范圍內,所以我幫她完成了這個效果。顯示導航被修剪的效果不是一件簡單的事情。我在圖片中看到的第一個反應是Octopath

根據她的以往經驗,這個網站的HTML和CSS是完全在她的能力范圍以內,于是我幫助她完成了這個效果。

顯示nav被裁減的效果是一個不簡單的任務,我看到圖片的第一反應是創建一個相匹配的背景被部分裁剪的圖像,然后把它設置為一個after元素。

問題是,至少要解決響應式問題,并且響應式并不完全可控的。

  了解CSS屬性:clip-path  clip-path 是工作草案的一部分,它是一個通過屏蔽和裁減來隱藏元素的一部分的工具。

盡管clip-path沒有被主流的瀏覽器支持(包括IE和Firefox),但在webkit瀏覽器中,它仍然是一個實現時尚效果的小工具。

  注意,在現代瀏覽器中需要使用-webkit-前綴。

  clip-path 簡單的工作原理是提供一系列的X和Y值來創建路徑。

當使用這些值創建一條完整路徑時,就會把圖像按照路徑內部的尺寸進行裁剪。

  利用clip-path,我們可以創建圓形、橢圓和多邊形等不同的形狀,創造力是唯一的限制。

  一個簡單的三角形裁減

  View the code on codepen  對元素簡單地運用clip-path就能實現上面的效果:  CSS Code復制內容到剪貼板  .clipClass {  -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);  }  逐步分析  很像定位屬性,我們需要考慮X值和Y值。

X:0和Y:0表示從元素的左上角開始,并從左上角開始移動。

X:100%指的是元素右邊,Y:100%指的是元素底部。

  對于上面創建的路徑,實際是創建了如下的點:  CSS Code復制內容到剪貼板  x: 0, y:100%  x: 50%, y: 0  x: 100%, y: 100%  這個簡單路徑開始于左下角,水平移動50%,并到達頂部位置,然后又水平移動到100%的位置,垂直向下回到底部,到達第三個坐標點。

三角形就出來了。

  形狀  在上面的示例中,我們使用polygon來創建一個圖形,并通過多對用逗號(,)分開的X值和Y值定義了一個路徑。

然后,我們可以通過取不同的值來創建不同的圖形。

  圓

  View the code on codepen  為了創建圓形,需要給circle傳入三個值:圓心的坐標(X值和Y值)以及半徑。

當定義圓的半徑時,我們可以用at關鍵字來定義圓心坐標。

  CSS Code復制內容到剪貼板  .clipClass {  -webkit-clip-path: circle(50% at 50% 50%);  }  橢圓

  View this code on codepen  很多時候,你不需要一個簡單的圓,而是一個橢圓。

  為了實現橢圓,需要給ellipse提供4個值:橢圓的x軸半徑、y軸半徑、定位橢圓位置的x坐標和y坐標,后面兩個值用at關鍵字和前面兩個值分開。

  CSS Code復制內容到剪貼板  .clipClass {  -webkit-clip-path: ellipse(30% 20% at 50% 50%);  }  插圖  (在老版本的chrome中有錯誤)

  View the code on codepen  因為多邊形邊緣銳利,所以它可能不是你想要的東西,你想創建的是圓角矩形,所以我們來看看Inset的值。

Inset使用四個值(對應上 右 下 左的順序)來設置圓角半徑。

  CSS Code復制內容到剪貼板  .clipClass {  -webkit-clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);  }  上面的各個值分別對應為:  CSS Code復制內容到剪貼板  inset( round )  其簡寫形式:  CSS Code復制內容到剪貼板  .clipClass {  -webkit-clip-path: inset(25% 0 round 0 25%);  }  快速參考  CSS Code復制內容到剪貼板  Circle: circle(radius at x-axis y-axis)  Ellipse: ellipse(x-rad y-rad at x-axis y-axis)  Polygon: polygon(x-axis y-axis, x-axis y-axis, )  Inset: inset(top rightright bottombottom left round top-radius rightright-radius bottombottom-radius left-radius)  創建形狀  正如你看到的,原型和圓角圖形被少數幾個值限制了,因而Polygons是創建復雜圖形的最好選擇。

Polygons能定義多組點,允許我們用各種方式去裁圖形。

  Comic Textbox

  View the code on codepen  CSS Code復制內容到剪貼板  .clipClass {  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);  }  Star

  View the code on codepen  CSS Code復制內容到剪貼板  .clipClass {  -webkit-clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%);  }  動畫  現在我們已經了解了各種圖形和怎么創建它們,那怎么利用這些圖形創建我們想要的效果呢?  給形狀應用一個hover,并用過渡屬性來創建平滑的效果。

但是需要記住,我們創建的初始默認狀態,必須同所有的hover狀態都使用相同的坐標系。

  View the code on codepen  CSS Code復制內容到剪貼板  .animateClass {  -webkit-clip-path: polygon(20% 0%, 0% 0%, 0% 50%, 0% 80%, 0% 100%, 50% 100%, 80% 100%, 100% 100%, 100% 50%, 100% 0, 80% 0, 50% 0);  }  .animateClass:hover {  -webkit-clip-path: polygon(50% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);  }

版權聲明:本文由 祁秋露 整理編輯。

原標題:clip 16us,clippathcss3

轉載注明出處:http://www.dn9ww09s.icu/assemble/14582.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 0x8024402f,0x80071a90

    0x8024402f,0x80071a90 相關圖片win10 0x8024402c在上一個教程中,超人已經教過您如何解決win10升級失敗提示中的錯誤0xc190101-0x30018。這一次,超人教你如何在win10更新失敗提示中解決錯誤0錯誤0x800f0986...

  • media怎么用,media

    media怎么用,media 相關圖片mediabox怎么使用語法:CSS代碼將內容復制到剪貼板@media:{srules}值::指定設備名{srules}:樣式表定義注意:判斷媒體(對象)類型以實現不同的表示。此功能允media coverage...

  • 怎么才能連上wifi,一鍵連接wifi

    怎么才能連上wifi,一鍵連接wifi 相關圖片wifi不知道密碼怎么連接由于手機流量收費的問題,WiFi是每個人用手機上網的最佳選擇。即使在購物和選擇餐館時,他們也會選擇有WiFi的商店。但如果有庫蓮WiFi軟件,就不需要選擇WiF如...

  • 大于等于號怎么打電腦,小于等于號電腦怎么打

    大于等于號怎么打電腦,小于等于號電腦怎么打 相關圖片手機上大于等于號怎么打出來大于或等于號是數學中常用的符號之一。日常書寫很簡單。然而,在計算機或其他移動設備上,許多人不知道如何輸入大于或等于號。讓我們向超人軟件站...

  • jexl2使用詳解,tinyxml2使用詳解

    jexl2使用詳解,tinyxml2使用詳解 相關圖片protobuf使用詳解RGB顏色模型來解釋RGB顏色模型是一種描述紅色、綠色和藍色原色在一定顏色中的量,就像混合水彩畫或油畫得到一種真正的顏色,我們想想象一下,如果你想與純藍色相匹...

  • 去哪兒app怎么刪除訂單,去哪兒如何刪除訂單記錄

    去哪兒app怎么刪除訂單,去哪兒如何刪除訂單記錄 相關圖片去哪網刪除訂單信息作為一款非常優秀的旅游軟件,我相信很多小伙伴都會通過去哪兒預訂酒店、機票等。那么在哪里刪除訂單呢?接下來,超人軟件編輯想向大家介紹一下在哪里刪除...

  • win版本,win10用哪個版本

    win版本,win10用哪個版本 相關圖片win10什么版本好今天,超人編輯將詳細解釋win10系統的七個主要版本是指什么,以及版本的內容包含什么。Win10將包含7個不同的版本,即home、pro和enterprisewin系統哪個版本好用...

  • 輸入類型,判斷輸入的字符的類型

    輸入類型,判斷輸入的字符的類型 相關圖片double類型輸入現有的輸入類型HTML代碼示例:代碼如下:文本字段輸入類型=文本單選按鈕輸入類型=無線電復選框輸入類型=復選框下拉列表選擇字段密碼輸入類型=通行證html5表單輸入類型...

  • 安全守護2手表時間設置,安全守護手表如何重置

    安全守護2手表時間設置,安全守護手表如何重置 相關圖片安全守護手表怎么聯網安全手表是一種安全手表定位軟件,它可以保護用戶的安全,進行實時定位。安全值班具有安全監控、健康管理等多種功能。實時在線系統定位,讓您實時掌握家...

  • 流量卡好做嗎,如何做好私域流量

    流量卡好做嗎,如何做好私域流量 相關圖片做直播用什么流量卡好這與其說是一個HTML5推廣的問題,不如說是一個如何獲得品牌移動流量的問題這是雙11期間(11.10-11.16)從第三方數據統計公司獲得的H5頁面流量分布圖:流量微商好...

熱評文章

  • 摩拜隱形貼紙,摩拜618貼紙

    摩拜隱形貼紙,摩拜618貼紙 相關圖片摩拜成立摩比自行車最近推出了收集貼紙發送紅包的活動。許多小合伙人對此表示懷疑。這兩張貼紙有收藏嗎?這可不像支付寶的奉獻精神那樣是個噱頭。今天,超人小版將為大家介紹...

  • DNF吧,DNF

    DNF吧,DNF 相關圖片dnf鬼泣H5正處于風暴的尖端。很多學生想從這一次開始。具體的演奏方法并不簡單。看看騰訊飛牛學生總結的全過程。從早期的規劃到實施,彩色字體動畫的加載都不能掉下來。有反省、...

  • win7沒有藍牙圖標,win7藍牙圖標

    win7沒有藍牙圖標,win7藍牙圖標 相關圖片win7連接藍牙很多時候我忘了帶U盤或數據線,如果我想傳輸文件該怎么辦?事實上,電腦通過藍牙傳輸文件非常方便,但我想使用藍牙時找不到藍牙圖標?今天,我要教你如何設置win7系...

  • 關于選項卡的切換,切換選項卡在哪里

    關于選項卡的切換,切換選項卡在哪里 相關圖片網頁選項卡切換效果:目標是什么?MDN描述如下::target:target偽類表示唯一元素(如果有的話),其ID與frag匹配tab選項卡切換...

  • tomcat9環境變量配置,tomcat8配置環境變量

    tomcat9環境變量配置,tomcat8配置環境變量 相關圖片maven環境變量配置Tomcat是Jakarta項目的核心項目,它是一個開源的、免費的輕量級應用服務器,是開發和調試JSP程序的首選。盡管Tomcat處理靜態html的能力不如Apmysql環境變量配置...

  • 瀏覽器卡慢怎么解決,瀏覽器打開慢什么原因

    瀏覽器卡慢怎么解決,瀏覽器打開慢什么原因 相關圖片ie瀏覽器閃退怎么解決在使用win7系統時,當打開IE時沒有響應時,您會選擇終止進程,然后重新打開IE。但是如果再次發生這種情況,您會怎么做?你不能一直重新開始,是嗎?下面的超...

  • 什么是響應式編程,響應式編程

    什么是響應式編程,響應式編程 相關圖片spring5響應式編程如今,響應式網頁設計無疑非常流行。對于新人來說,響應式設計聽起來有點復雜,但事實上,它比你想象的要簡單得多。為了幫助您開始響應式web設計,我編寫了一個...

  • 視頻怎么剪輯,如何剪輯視頻中的一段

    視頻怎么剪輯,如何剪輯視頻中的一段 相關圖片卡點視頻怎么剪輯有兩種方法可以使用love clip自由剪輯視頻片段。首先,單擊主界面右上角預覽框時間進度條上的向下箭頭(快捷鍵Ctrl e),打開創新的時間線面板,將音頻波形手機怎...

  • 實現了三個效果,實現了效果

    實現了三個效果,實現了效果 相關圖片價值實現的效果show()/hide()show()/hide()的實現主要控制元素的display屬性。HTML:XML/HTML代碼復制內容到剪貼板DIVID= BOX輸將目的實現效果...

  • 切換輸入法,如何切換輸入法

    切換輸入法,如何切換輸入法 相關圖片輸入法切換快捷鍵您是否遇到win10系統的輸入方法無法切換的情況?如果是,我們該怎么辦?我相信很多朋友都遇到過這個問題。別擔心。超人編輯將為你分享Win10的解決方案輸入法怎么...

關注微信

变脸官网查询