日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
酷炫！巧用-webkit-box-reflect倒影實(shí)現(xiàn)各類動(dòng)效

 今天的文章非常有趣，簡單的一行代碼，讓 CSS 動(dòng)效的 Level 提升不少。

創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、閬中網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、商城開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為閬中等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

正文從這里開始~

在很久之前的一篇文章，有講到 -webkit-box-reflect 這個(gè)屬性 -- 從倒影說起，談?wù)?CSS 繼承 inherit[1]

`-webkit-box-reflect`[2] 是一個(gè)非常有意思的屬性，它讓 CSS 有能力像鏡子一樣，反射我們元素原本繪制的內(nèi)容。

上一次寫它，它的兼容性還非常非常的慘淡，但是到今天，雖然還是一個(gè) Non-standard 的語法，但是兼容性已經(jīng)大有改觀，并且利用它，我們可以實(shí)現(xiàn)非常多有意思的效果。

截止至 2021-02-19，它的兼容性已經(jīng)達(dá)到了 91.02%，看看 CANIUSE -webkit-box-reflect[3]：

-webkit-box-reflect 基本用法

-webkit-box-reflect 的語法非常簡單，最基本的用法像是這樣:

 
 
 
 
    
  
  
  
  
  1. div { 
    2. 
  
  
  
  
  2.     -webkit-box-reflect: below; 
    3. 
  
  
  
  
  3. } 
    4.

其中，below 可以是 below | above | left | right 代表下上左右，也就是有 4 個(gè)方向可以選。

假設(shè)我們有如下一張圖片：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
 
 
 
 

 
 
 
 
    
  
  
  
  
  1. div { 
    2. 
  
  
  
  
  2.     background-image: url('https://images.pokemontcg.io/xy2/12_hires.png'); 
    3. 
  
  
  
  
  3. } 
    4.

加上 -webkit-box-reflect: right，也就是右側(cè)的倒影：

 
 
 
 
    
  
  
  
  
  1. div { 
    2. 
  
  
  
  
  2.     background-image: url('https://images.pokemontcg.io/xy2/12_hires.png'); 
    3. 
  
  
  
  
  3.     -webkit-box-reflect: right; 
    4. 
  
  
  
  
  4. } 
    5.

效果如下，生成了一個(gè)元素右側(cè)的鏡像元素：

設(shè)置倒影距離

在方向后面，還可以接一個(gè)具體的數(shù)值大小，表示倒影與原元素間的距離。

 
 
 
 
    
  
  
  
  
  1. div { 
    2. 
  
  
  
  
  2.     background-image: url('https://images.pokemontcg.io/xy2/12_hires.png'); 
    3. 
  
  
  
  
  3.     -webkit-box-reflect: right 10px; 
    4. 
  
  
  
  
  4. } 
    5.

加上 10px 之后，倒影與原元素間將間隔 10px：

設(shè)置倒影虛實(shí)

還有一個(gè)非常重要的功能，就是方位后面，還能再設(shè)置一個(gè)漸變值，利用這個(gè)漸變值，可以實(shí)現(xiàn)倒影的一個(gè)虛化效果，這一點(diǎn)非常重要。

 
 
 
 
    
  
  
  
  
  1. div { 
    2. 
  
  
  
  
  2.     background-image: url('https://images.pokemontcg.io/xy2/12_hires.png'); 
    3. 
  
  
  
  
  3.     -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, .5)); 
    4. 
  
  
  
  
  4. } 
    5.

看看效果，有了虛實(shí)變化之后，這樣就更像是一個(gè)倒影.

其實(shí)，這里的漸變就是給倒影的圖片添加了一個(gè) MASK 屬性，MASK 屬性的 transparent 部分，圖片將變得透明，而實(shí)色部分，則保持原圖。

  • 關(guān)于 CSS MASK 屬性，如果你還有什么疑問，建議看看這篇文章：奇妙的 CSS MASK[4]

CodePen Demo -- -webkit-box-reflect Demo[5]

使用 -webkit-box-reflect 實(shí)現(xiàn)一些有意思的動(dòng)效

掌握了基本的語法后，我們就可以利用其實(shí)現(xiàn)一些有意思的動(dòng)效，下面簡單羅列一下。

我發(fā)現(xiàn)這個(gè)屬性特別適合運(yùn)用在一些暗黑系風(fēng)格的頁面中。能夠讓很多動(dòng)效看起來高大上很多。(個(gè)人審美)

在按鈕中運(yùn)用 -webkit-box-reflect

配合一些動(dòng)態(tài)邊框動(dòng)畫的按鈕，能夠營造一種很科幻的效果:

感興趣的可以自行戳源碼了解了解：

CodePen demo -webkit-box-reflect Neon Button Hover Effect[6]

在文字中運(yùn)用 -webkit-box-reflect

在暗黑系的標(biāo)題文字中，運(yùn)用上 -webkit-box-reflect ，瞬間高大上了不少。

CodePen demo - Font & -webkit-box-reflect[7]

在 3D 中運(yùn)用 -webkit-box-reflect

嘿嘿，接下來，我們甚至可以把 -webkit-box-reflect 運(yùn)用中 3D 效果中，完全不一樣的觀感體驗(yàn)。

我們給一個(gè) 3D 照片墻，加上倒影效果：

CodePen demo - 3DView & -webkit-box-reflect[8]

使用 -webkit-box-reflect 創(chuàng)造藝術(shù)圖案

有趣的 CSS 藝術(shù)，它又來了。

在袁川老師的這篇文章中 -- Chinese Window Lattice And CSS[9]，介紹了利用 -webkit-box-reflect 生成剪紙藝術(shù)這樣一種思路。

由于 -webkit-box-reflect 可以生成倒影，那么我們利用它進(jìn)行不斷的套娃，一層疊一層，那么只需要生成一個(gè)基本的元素，就可以利用倒影產(chǎn)生出各種不同的效果。

假設(shè)，我們有如下結(jié)構(gòu)：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.      
    3. 
  
  
  
  
  3.          
    4. 
  
  
  
  
  4.             
 
  •         
    •  
  •     
    •  
  •  

    我們只需要給 .g-wrap4 實(shí)現(xiàn)一個(gè)圖形，例如這樣：

     
 
 
 
      
  
  
  
  
    1. .g-wrap4 { 
      2. 
  
  
  
  
    2.     background:  
      3. 
  
  
  
  
    3.         radial-gradient(circle at 0 0, #000 30%, transparent 30%, transparent 40%, #000 40%, #000 50%, transparent 50%), 
      4. 
  
  
  
  
    4.         radial-gradient(circle at 100% 100%, #000 10%, transparent 10%, transparent 30%, #000 30%, #000 40%, transparent 40%); 
      5. 
  
  
  
  
    5. } 
      6.

    然后就是 4 層套娃， 首先給 .g-wrap4 加上一層倒影 -webkit-box-reflect：

     
 
 
 
      
  
  
  
  
    1. .g-wrap4 { 
      2. 
  
  
  
  
    2.     -webkit-box-reflect: right 0px; 
      3. 
  
  
  
  
    3. } 
      4.

    得到：

    繼續(xù)套娃，給 .g-wrap3 加上一層倒影 -webkit-box-reflect：

     
 
 
 
      
  
  
  
  
    1. .g-wrap4 { 
      2. 
  
  
  
  
    2.     -webkit-box-reflect: right 0px; 
      3. 
  
  
  
  
    3. } 
      4. 
  
  
  
  
    4. .g-wrap3 { 
      5. 
  
  
  
  
    5.     -webkit-box-reflect: below 0px; 
      6. 
  
  
  
  
    6. } 
      7.

    繼續(xù)，給 .g-wrap2 加上一層倒影 -webkit-box-reflect：

     
 
 
 
      
  
  
  
  
    1. .g-wrap4 { 
      2. 
  
  
  
  
    2.     -webkit-box-reflect: right 0px; 
      3. 
  
  
  
  
    3. } 
      4. 
  
  
  
  
    4. .g-wrap3 { 
      5. 
  
  
  
  
    5.     -webkit-box-reflect: below 0px; 
      6. 
  
  
  
  
    6. } 
      7. 
  
  
  
  
    7. .g-wrap2 { 
      8. 
  
  
  
  
    8.     -webkit-box-reflect: left 0px; 
      9. 
  
  
  
  
    9. } 
      10.

    最后，給 .g-wrap1 加上一層倒影 -webkit-box-reflect：

     
 
 
 
      
  
  
  
  
    1. .g-wrap4 { 
      2. 
  
  
  
  
    2.     -webkit-box-reflect: right 0px; 
      3. 
  
  
  
  
    3. } 
      4. 
  
  
  
  
    4. .g-wrap3 { 
      5. 
  
  
  
  
    5.     -webkit-box-reflect: below 0px; 
      6. 
  
  
  
  
    6. } 
      7. 
  
  
  
  
    7. .g-wrap2 { 
      8. 
  
  
  
  
    8.     -webkit-box-reflect: left 0px; 
      9. 
  
  
  
  
    9. } 
      10. 
  
  
  
  
    10. .g-wrap1 { 
      11. 
  
  
  
  
    11.     -webkit-box-reflect: above 0px; 
      12. 
  
  
  
  
    12. } 
      13.

    就可以得到一個(gè)通過 4 層倒影得到的圖形：

    這樣，通過不同的基礎(chǔ)圖形，發(fā)揮我們的想象力，就可以生成各式各樣的剪紙對稱圖形：

    完整的代碼，可以戳這里：

    CodePen Demo -- -webkit-box-reflect artist[10]

    最后

    本文到此結(jié)束，希望對你有幫助 :)，本文介紹了 webkit-box-reflect 的一些有意思的用法，可能業(yè)務(wù)中不太實(shí)用，但是非常有趣。

    參考資料
    [1]從倒影說起，談?wù)?CSS 繼承 inherit:

    https://github.com/chokcoco/iCSS/issues/49

    [2]-webkit-box-reflect:

    https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect

    [3]CANIUSE -webkit-box-reflect:

    https://caniuse.com/?search=-webkit-box-reflect

    [4]奇妙的 CSS MASK:

    https://github.com/chokcoco/iCSS/issues/80

    [5]CodePen Demo -- -webkit-box-reflect Demo:

    http://codepen.io/Chokcoco/pen/ORbvxJ

    [6]CodePen demo -webkit-box-reflect Neon Button Hover Effect:

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

    [7]CodePen demo - Font & -webkit-box-reflect:

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

    [8]CodePen demo - 3DView & -webkit-box-reflect:

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

    [9]Chinese Window Lattice And CSS:

    https://yuanchuan.dev/2019/05/15/window-lattice-and-css.html

    [10]CodePen Demo -- -webkit-box-reflect artist:

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


    文章題目：酷炫！巧用-webkit-box-reflect倒影實(shí)現(xiàn)各類動(dòng)效
    文章源于：http://m.5511xx.com/article/cosssoh.html