用CSS3來制作倒影(box

2018-06-19 16:43 更新
      有一句話說的好:“橫看成嶺側(cè)成峰,遠(yuǎn)近高低各不同”,有些時(shí)候,我們需要從不同的角度去欣賞mm,如下圖:

在早期,要實(shí)現(xiàn)這種效果,我們只能乖乖的找設(shè)計(jì)去制作,然后在頁面上插入一張圖片,但是隨著CSS3的出現(xiàn),我們可以純代碼實(shí)現(xiàn),如何實(shí)現(xiàn)呢?就是通過CSS3的box-reflect屬性。

兼容性
既然是CSS3的屬性,我們當(dāng)然要來看看兼容性:

上面是通過(http://caniuse.com/)得出,專門用來檢測CSS3在各大瀏覽器中的兼容性。

接下來,我們來了解box-reflect如何使用?
語法如下:

-webkit-box-reflect:none | <direction> <offset>? <mask-box-image>?

box-reflect:none | <direction> <offset>? <mask-box-image>?

屬性說明:
  • none:此值為默認(rèn)值,表示無倒影;
  • <direction>:生成倒影的方向
above:指定倒影在對象的上邊 below:指定倒影在對象的下邊 left:指定倒影在對象的左邊 right:指定倒影在對象的右邊
  • <offset>:圖片與倒影間隔
<length>:用長度值來定義倒影與對象之間的間隔??梢詾樨?fù)值 <percentage>:用百分比來定義倒影與對象之間的間隔??梢詾樨?fù)值
  • <mask-box-image>:用來設(shè)置倒影的遮罩效果;
值可以是:
none:無遮罩圖像 <url>:使用絕對或相對地址指定遮罩圖像。 <linear-gradient>:使用線性漸變創(chuàng)建遮罩圖像。 <radial-gradient>:使用徑向(放射性)漸變創(chuàng)建遮罩圖像。 <repeating-linear-gradient>:使用重復(fù)的線性漸變創(chuàng)建背遮罩像。 <repeating-radial-gradient>:使用重復(fù)的徑向(放射性)漸變創(chuàng)建遮罩圖像。

光是紙上談兵可不行,我們還是要通過實(shí)例來看看效果。

倒影的方向
在這個(gè)例子中,我弄了三個(gè)img:

<div class="box1">   

  <img src="http://7s1r1c.com1.z0.glb.clouddn.com/t_sdfsdfs123.jpg" rel="external nofollow" rel="external nofollow" rel="external nofollow" alt="" />   

</div>   

<div class="box2">   

  <img src="http://7s1r1c.com1.z0.glb.clouddn.com/t_sdfsdfs123.jpg" rel="external nofollow" rel="external nofollow" rel="external nofollow" alt="" />   

</div>   

<div class="box3">   

  <img src="http://7s1r1c.com1.z0.glb.clouddn.com/t_sdfsdfs123.jpg" rel="external nofollow" rel="external nofollow" rel="external nofollow" alt="" />   

</div>

CSS如下:

.box1,.box2,.box3{   

  width:120px;   

  float:left;   

  margin-right:180px;   

}   

img{   

  width:100%;   

}   

.box1 img{   

  -webkit-box-reflect:right;   

  box-reflect:right;   

}   

.box2 img,.box3 img{   

  -webkit-box-reflect: above;   

  box-reflect:above;   

}   

.box3{   

  padding-top:200px;   

}

效果如下:


在這里有一個(gè)疑問,box2和box3中的圖片都設(shè)置了box-reflect:above,都是在頂部生成投影,為什么box2看不到效果呢?原因就是我給box3設(shè)置了padding-top:200px,而box2沒有,初步估計(jì)是因?yàn)闆]有空間讓其顯示生成的倒影。

倒影與對象之間的距離
了解了生成倒影的方向后,我們來看第二個(gè)屬性<offset>,還是看例子:
依舊用三張圖片:

.box1 img{   

  -webkit-box-reflect:below 30px;   

  box-reflect:below 30px;   

}   

.box2 img{   

  -webkit-box-reflect:below -30px;   

  box-reflect:below -30px;   

}   

.box3 img{   

  -webkit-box-reflect:below 5%;   

  box-reflect:below 5%;   

}

效果如下:


接下來我們學(xué)習(xí)最后一個(gè)屬性。
遮罩效果

(1)使用漸變給倒影添加遮罩效果
如果你不熟悉CSS3的漸變,可以看:

言歸正傳,我們來看看如何用漸變:

.box1 img{   

  -webkit-box-reflect:below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3));   

  box-reflect:below 0 linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3));   

}  

效果如下:


使用背景圖給倒影添加遮罩效果
首先我們需要一張五角星的png圖片:

.box2 img{   

  -webkit-box-reflect:below 0 url(http://7s1r1c.com1.z0.glb.clouddn.com/t_star.png);   

  box-reflect:below 0 url(http://7s1r1c.com1.z0.glb.clouddn.com/t_star.png);   

}

效果圖如下:


結(jié)論

到這里,關(guān)于CSS3的box-reflect屬性的語法和使用已經(jīng)介紹完了,如果您有疑問,歡迎在下面評論。



以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號