整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          css技巧:clip-path一個(gè)隨意剪裁html得

          css技巧:clip-path一個(gè)隨意剪裁html得神器

          么是clip-path

          直譯就是剪裁路徑的意思,使用svg或者形狀定義一個(gè)html元素的可見區(qū)域的方法。

          演示

          截圖來自于clip-path在線神器-http://bennettfeely.com/clippy 網(wǎng)站。

          基礎(chǔ)用法

          使用之前需要注意得幾點(diǎn)

          1 使用clip-path要從同一個(gè)方向繪制,如果順時(shí)針繪制就一律順時(shí)針,逆時(shí)針就一律逆時(shí)針,因?yàn)閜olygon是一個(gè)連續(xù)線段,若線段彼此有交集,裁剪區(qū)域就會(huì)相減得情況發(fā)生,當(dāng)然如果你特意需要這樣的效果除外

          2 如果繪制時(shí)采用比例的方式繪制,長寬就必須要先行設(shè)定,不然有可能繪制出來的長寬和我們想象的就會(huì)有差距,使用像素繪制就不會(huì)有這樣的現(xiàn)象了。

          我們看到 我們是從這四個(gè)點(diǎn)開始剪裁得分別對應(yīng)的是

          x1,y1=50% 0%

          x2,y2=0% 50%

          x3,y3=50% 100%

          x4,y4=100% 50%

          這個(gè)圖形的css就是clip-path:polygon( 50% 0% , 0% 50% , 50% 100% , 100% 50%)

          讓我們看下完整的圖形

          結(jié)語

          當(dāng)然這只是clip-path中多邊形的一種用法,他還包括

          inset() -> 矩形

          circle() -> 圓形

          ellipse() -> 橢圓形

          clip-path的作用不僅僅是如我上面介紹的那般簡單,它還有很多奇妙的用處,尤其配合動(dòng)畫一起使用,感興趣的同學(xué)可以自己慢慢深入。

          希望大家可以關(guān)注我,一起探索前端的知識(shí)。

          者:SbCoco來源:iCSS前端趣聞

          說起 background-clip ,可能很多人都很陌生。Clip 的意思為修剪,那么從字面意思上理解,background-clip 的意思即是背景裁剪。

          我曾經(jīng)在 從條紋邊框的實(shí)現(xiàn)談盒子模型[1] 一文中談到了這個(gè)屬性,感興趣的可以回頭看看。

          簡單而言,background-clip 的作用就是設(shè)置元素的背景(背景圖片或顏色)的填充規(guī)則。

          與 box-sizing 的取值非常類似,通常而言,它有 3 個(gè)取值:

          {     background-clip: border-box;  // 背景延伸到邊框外沿(但是在邊框之下)     background-clip: padding-box; // 邊框下面沒有背景,即背景延伸到內(nèi)邊距外沿。     background-clip: content-box; // 背景裁剪到內(nèi)容區(qū) (content-box) 外沿。 } 

          不過這些都不是本文的主角。本文的主角是 background-clip: text; ,當(dāng)然現(xiàn)在只有 chrome 支持,所以通常想使用它,需要 -webkit-background-clip:text;。

          何為 -webkit-background-clip:text

          使用了這個(gè)屬性的意思是,以區(qū)塊內(nèi)的文字作為裁剪區(qū)域向外裁剪,文字的背景即為區(qū)塊的背景,文字之外的區(qū)域都將被裁剪掉。

          看個(gè)最簡單的 Demo ,沒有使用 -webkit-background-clip:text :

          <div>Clip</div>  <style> div {   font-size: 180px;   font-weight: bold;   color: deeppink;   background: url($img) no-repeat center center;   background-size: cover; } </style> 

          效果如下:



          CodePen Demo - Clip[2]

          使用 -webkit-background-clip:text

          我們稍微改造下上面的代碼,添加 -webkit-background-clip:text:

          div {   font-size: 180px;   font-weight: bold;   color: deeppink;   background: url($img) no-repeat center center;   background-size: cover;   -webkit-background-clip: text; } 

          效果如下:



          CodePen Demo - clip[3]

          看到這里,可能有人就納悶了,



          ,啥玩意呢,這不就是文字設(shè)置 color 屬性嘛。

          將文字設(shè)為透明 color: transparent

          別急!當(dāng)然還有更有意思的,上面由于文字設(shè)置了顏色,擋住了 div 塊的背景,如果將文字設(shè)置為透明呢?文字是可以設(shè)置為透明的 color: transparent 。

          div {   color: transparent;   -webkit-background-clip: text; } 

          效果如下:



          CodePen Demo - clip[4]

          通過將文字設(shè)置為透明,原本 div 的背景就顯現(xiàn)出來了,而文字以為的區(qū)域全部被裁剪了,這就是 -webkit-background-clip:text 的作用。

          嗨起來

          了解了最基本的用法,接下來可以想想如何去運(yùn)用這個(gè)元素制作一些效果。

          大大增強(qiáng)了文字的顏色填充選擇

          文字顏色的動(dòng)畫效果

          配合其他元素,實(shí)現(xiàn)一些其他巧妙的用法

          實(shí)現(xiàn)文字漸變效果

          利用這個(gè)屬性,我們可以十分便捷的實(shí)現(xiàn)文字的漸變色效果。

          <div> background-clip: text</div> 
          div {     font-size: 54px;     color: transparent;     background: linear-gradient(45deg, #ffeb3b, #009688, yellowgreen, pink, #03a9f4, #9c27b0, #8bc34a);     background-clip: text;     animation: huerotate 3s infinite; }  @keyframes huerotate {     100% {         filter: hue-rotate(360deg);     } } 



          CodePen Demo -- background-clip: text 文字漸變色[5];

          背景漸變動(dòng)畫 && 文字裁剪

          因?yàn)橛杏玫?background 屬性,回憶一下,我在上一篇 巧妙地制作背景色漸變動(dòng)畫![6] 利用了漸變 + animation 巧妙的實(shí)現(xiàn)了一些背景的漸變動(dòng)畫??梢院芎玫暮捅疚牡闹R(shí)結(jié)合起來。

          結(jié)合漸變動(dòng)畫,當(dāng)然不一定需要過渡動(dòng)畫,這里我使用的是逐幀動(dòng)畫。配合 -webkit-background-clip:text,實(shí)現(xiàn)了一種,嗯,很紅燈區(qū)的感覺:

          <div class="text">保健沐足按摩</div> 
          .text {     font-size: 80px;     background: linear-gradient(90deg, red 0, orange 15%, yellow 30%, green 45%, teal 60%, blue 75%, purple 90% ,purple 100%);     background-clip: text;     color: transparent;     animation: changeColor .5s linear infinite alternate; }  @keyframes changeColor {     0% {         background-image: linear-gradient(90deg, red 0, orange 15%, yellow 30%, green 45%, teal 60%, blue 75%, purple 90% ,purple 100%);     }     50% {         background-image: linear-gradient(90deg, deeppink 0, yellowgreen 15%, fuchsia 30%, lime 45%, olive 60%, aqua 75%, coral 90% ,brown 100%);     }     100% {         background-image: linear-gradient(-90deg, red 0, orange 15%, yellow 30%, green 45%, teal 60%, blue 75%, purple 90% ,purple 100%);     } } 



          CodePen Demo -- 背景漸變動(dòng)畫 && 文字裁剪[7]

          給文字增加高光動(dòng)畫

          利用 background-clip, 我們還可以輕松的給文字增加高光動(dòng)畫。

          譬如這樣:



          其本質(zhì)也是利用了 background-clip,偽代碼如下:

          <p data-text="Lorem ipsum dolor"> Lorem ipsum dolor </p> 
          p {     position: relative;     color: transparent;     background-color: #E8A95B;     background-clip: text; } p::after {     content: attr(data-text);     position: absolute;     left: 0;     top: 0;     width: 100%;     height: 100%;     background-image: linear-gradient(120deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15rem, transparent 15rem, rgba(255, 255, 255, 0.3) 20rem, transparent 25rem, transparent 27rem, rgba(255, 255, 255, 0.6) 32rem, white 33rem, rgba(255, 255, 255, 0.3) 33.15rem, transparent 38rem, transparent 40rem, rgba(255, 255, 255, 0.3) 45rem, transparent 50rem, transparent 100%);     background-clip: text;     background-size: 150% 100%;     background-repeat: no-repeat;     animation: shine 5s infinite linear; } @keyframes shine {  0% {   background-position: 50% 0;  }  100% {   background-position: -190% 0;  } } 

          去掉偽元素的 background-clip: text,就能看懂原理:



          CodePen Demo -- shine Text && background-clip[8]

          按鈕填充效果

          運(yùn)用這個(gè)屬性,我們可以給按鈕實(shí)現(xiàn)這樣一種遮罩填充動(dòng)畫(主要是用于防止文字閃爍):

          <div class="btn">Btn</div> 
          .btn {     position: relative;     color: deeppink;     background-color: transparent;     border: 3px solid deeppink;          &::after {         content: '';         position: absolute;         z-index: -1;         top: 0;         left: 50%;         height: 100%;         width: 0;         background-color: deeppink;         transition: width .5s, left .5s;     }     &:hover {         color: white;     }     &:hover::after {         top: 0;         left: 0;         width: 100%;         transition: width .5s, left .5s;     } }  .btn {     background-color: deeppink;     background-image: linear-gradient(white, white);     background-repeat: no-repeat;     background-size: 0% 100%;     background-position: center;     -webkit-background-clip: text;     -webkit-text-fill-color: transparent;     transition: background-size .5s;      &:hover {         background-size: 100% 100%;     } } 

          效果如下:



          CodePen Demo -- background-clip:text && 按鈕填充效果[9]

          圖片窺探效果

          再演示其中一個(gè)用法,利用兩個(gè) div 層一起使用,設(shè)置相同的背景圖片,父 div 層設(shè)置圖片模糊,其中子 div 設(shè)置 -webkit-background-clip:text,然后利用 animation 移動(dòng)子 div ,去窺探圖片。簡單的效果示意圖:

          CodePen Demo -- background-clip: text 遮罩圖片[10]

          總結(jié)一下

          其實(shí)還有很多有趣的用法,只有敢想并動(dòng)手實(shí)踐。當(dāng)然很多人會(huì)吐槽這個(gè)屬性的兼容性,到如今(2021-07-12),兼容性已經(jīng)非常好了,主要是在使用的時(shí)候記得加上 -webkit- 前綴:



          更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS[11] ,持續(xù)更新,歡迎點(diǎn)個(gè) star 訂閱收藏。

          如果還有什么疑問或者建議,可以多多交流,原創(chuàng)文章,文筆有限,才疏學(xué)淺,文中若有不正之處,萬望告知。

          參考資料

          [1]從條紋邊框的實(shí)現(xiàn)談盒子模型:

          http://www.cnblogs.com/coco1s/p/5895764.html

          [2]CodePen Demo - Clip:

          https://codepen.io/Chokcoco/pen/WjOBzB

          [3]CodePen Demo - clip:

          https://codepen.io/Chokcoco/pen/eWRaVJ

          [4]CodePen Demo - clip:

          https://codepen.io/Chokcoco/pen/oWwRmE

          [5]CodePen Demo -- background-clip: text 文字漸變色:

          https://codepen.io/Chokcoco/pen/PmjMwz

          [6]巧妙地制作背景色漸變動(dòng)畫!:

          http://www.cnblogs.com/coco1s/p/6603403.html

          [7]CodePen Demo -- 背景漸變動(dòng)畫 && 文字裁剪:

          https://codepen.io/Chokcoco/pen/xdroGp

          [8]CodePen Demo -- shine Text && background-clip:

          https://codepen.io/Chokcoco/pen/OJbEOmb

          [9]CodePen Demo -- background-clip:text && 按鈕填充效果:

          https://codepen.io/Chokcoco/pen/MmoNoq

          [10]CodePen Demo -- background-clip: text 遮罩圖片:

          https://codepen.io/Chokcoco/pen/LyNmQv

          [11]Github -- iCSS:

          https://github.com/chokcoco/iCSS


          主站蜘蛛池模板: 国产激情一区二区三区| 一区二区三区免费视频播放器| 国产精品主播一区二区| 国产一区二区在线看| 亚洲男人的天堂一区二区| 成人久久精品一区二区三区| 蜜臀AV一区二区| 国产免费伦精品一区二区三区| 成人免费视频一区二区三区| 人妻av无码一区二区三区| 亚洲色大成网站www永久一区| 老鸭窝毛片一区二区三区| 国产精品成人免费一区二区| 极品尤物一区二区三区| 麻豆一区二区在我观看| 奇米精品视频一区二区三区| 国99精品无码一区二区三区| 亚洲一区无码中文字幕| 日韩精品成人一区二区三区| 波多野结衣一区二区三区aV高清| 黑人一区二区三区中文字幕| 精品一区二区三区在线观看l | 久久久久人妻精品一区三寸蜜桃| 国产日韩精品一区二区三区| 正在播放国产一区| 精品国产AV无码一区二区三区 | 国产在线观看91精品一区| 国产福利在线观看一区二区| 美女视频一区二区| 亚洲性日韩精品一区二区三区| 亚洲国产一区视频| 久久久综合亚洲色一区二区三区| 一区二区三区日韩| 精品国产一区二区三区久久久狼 | 无码乱码av天堂一区二区| 人妻av综合天堂一区| 日本精品3d动漫一区二区| 一区二区三区美女视频| 国模吧一区二区三区| 97一区二区三区四区久久 | 最新中文字幕一区|