IT兄弟連 HTML5教程 CSS3屬性特效 倒影

 

5f16a58a57bc47108e1c532aebeafd05.jpg

在Web製做中,有些時候須要實現一些倒影的效果。在傳統網頁中,咱們只能使用photoshop事先將倒影設計好,而後導入到網頁中,這樣不但耗費資源,也阻礙了開發效率。而CSS新增了Reflections板塊,CSS Reflections容許設計倒影,目前,CSS Reflections僅得到webkit引擎的支持,咱們只可以在Chrome和Safari瀏覽器中測試。CSS3的box-reflect屬性,使咱們能夠對圖片、文字等進行倒影設計,具體語法:css

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

因爲此屬性並非W3C標準屬性,在具體使用之時,仍是須要添加瀏覽器的私有屬性,根據瀏覽器的兼容性,使用box-reflect是須要添加-webkit的前綴。瀏覽器

 

1.direction佈局

direction定義方向,取值包括above、below、left、right。具體含義如表1:測試

表1  box-reflect屬性的direction參數值取值說明spa

 

image/20191115/9253074d737746c4ea3fa2f6b6e43460

   

2.offset設計

offset定義反射偏移的距離,取值包括數值或百分比,其中百分比根據對象的尺寸進行肯定,默認爲0。用長度值來定義倒影與對象之間的間隔,能夠爲負值。用百分比來定義倒影與對象之間的間隔,能夠爲負值。3d

 

3.mask-box-image視頻

mask-box-image定義遮罩圖像,該圖像將覆蓋投影區域。遮罩圖像能夠是背景圖片,也能夠是漸變生成的背景圖像。若是省略該值,則默認無遮罩圖像。該參數有以下取值能夠選擇:對象

(1)none:無遮罩

(2)使用絕對或相對地址指定遮罩圖像

(3)使用線性漸變建立遮罩圖像

(4)使用徑向(放射性)漸變建立遮罩圖像

(5)使用重複的線性漸變建立遮罩圖像

(6)使用重複的徑向(放射性)漸變建立遮罩圖像

 

說明

設置或檢索對象倒影

對應的腳本特性爲boxReflect

 

下面的實例定義一個簡單的倒影樣式,若咱們想要爲下面一幅圖增長一個在水中的倒影,咱們就須要簡單的利用CSS3的box-reflect特性添加倒影,原圖以下:

image/20191115/4c4afb8edae62687fbb0fd872c803682

經咱們使用CSS爲其添加box-reflect屬性後就造成了這兩座山的倒影,效果以下:

image/20191115/5342a0841749fde86712851d613d4c9c

 

該實例的代碼以下:

image/20191115/fc18bf5d63a29a45e0bf5b4873601017

 

使用瀏覽器直接打開這個文件,就能夠看到瀏覽器對這個網頁文件解釋後的結果,圖片被加上了倒影,如圖1所示。

image/20191115/772a5206d7804a5bf23a9af9293086f1

圖1  倒影

 

咱們在上例倒影基礎上繼續改進,爲倒影設置距離,向下偏移2像素,倒影效果如圖2所示:

image/20191115/67a09c57279c1d877b5cea02fda51db0

圖2  倒影向下偏移2px

 

修改的CSS代碼以下:

image/20191115/d80d8a6d0dc0bdb434965293636801e5

 

接下來繼續進行改進,設計css漸變倒影,經過漸變遮罩逐漸蓋住下面的倒影,製做出漸隱效果。效果圖如圖3所示:

 

image/20191115/a92086be86e8131f826faf08fb3e50b2

圖3  倒影漸隱效果

 

css代碼以下:

image/20191115/56e29f8b64b277fbb37c3aaa18e1ceca

 

另外,咱們除了能夠爲圖片咱們設計倒影外,網頁上的任何對象均可以設計css倒影效果,下面的實例是將文本設計爲倒影效果。效果如圖1.30所示:

image/20191115/8e3b3a86966569e50f0ee14ae87a0e36

圖1.30  文本倒影效果

 

文本倒影的HTML代碼以下:

image/20191115/80897cc55513ffe828175d27092bbf73

 

倒影效果不會對其它元素產生影響,不會影響頁面佈局。固然,頁面上的任何元素均可以用CSS3製做成倒影的形式,視頻也不例外。

相關文章
相關標籤/搜索