国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

CSS3倒影實例教程

來源:懂視網 責編:小采 時間:2020-11-27 15:30:59
文檔

CSS3倒影實例教程

CSS3倒影實例教程:分享示例圖片在CSS3之前,想要實現示例圖片這樣的一個倒影效果一般只能通過處理圖片的方式,而CSS3問世之后,想要實現這樣的效果變得非常簡單,只需一個CSS3屬性就可以輕松實現了。這就是今天所要提到的box-reflect屬性。咱們先看看W3C給出的box-ref
推薦度:
導讀CSS3倒影實例教程:分享示例圖片在CSS3之前,想要實現示例圖片這樣的一個倒影效果一般只能通過處理圖片的方式,而CSS3問世之后,想要實現這樣的效果變得非常簡單,只需一個CSS3屬性就可以輕松實現了。這就是今天所要提到的box-reflect屬性。咱們先看看W3C給出的box-ref

box-reflect可給兩種屬性值,一種是none,為默認值,也就是沒有任何倒影效果,另一種才是我們今天所要講的,它可以同時賦予三個屬性值,它們依次代表倒影方向、元素與倒影之間的距離以及加在倒影上的遮罩圖像,其中后兩個屬性值可以缺省,但如果<mask-box-image>存在,則<offset>必填。

說了那么多干巴巴的解釋,還是聯系一下示例應該更好理解些吧。

我們現在來一步步地實現文章開頭示例圖片的投影效果:

①只給一個屬性值below。

<!--HTML代碼-->< img class="img" src="imgs/cat.jpg" />
/*CSS代碼*/.img{ -webkit-box-reflect: below; box-reflect: below;}

實現效果:

②再加個5px的間距。

/*CSS代碼*/.img{ -webkit-box-reflect: below 5px; box-reflect: below 5px;}

實現效果:

③最后加個圖片遮罩吧。

/*CSS代碼*/.img{ -webkit-box-reflect: below 5px -webkit-linear-gradient(transparent 60%,rgba(0,0,0,.3));box-reflect: below 5px linear-gradient(transparent 60%,rgba(0,0,0,.3));}

這里的圖片遮罩沒有用圖片,而是用了CSS3中的linear-gradient屬性值,它就是用于線性漸變,具體用法這里就不提了,可以直接看這里( ),寫得很詳細。

實現效果:

這就是文章開頭示例圖片的最終效果。

接下來,再說說徑向漸變創建圖片遮罩和直接使用圖片遮罩。

徑向漸變的話其實跟線性漸變類似,只需要你掌握CSS3中基本的徑向漸變方法,給個簡單示例吧:

/*CSS代碼*/.img{ -webkit-box-reflect: left 0 -webkit-radial-gradient(#000 30%,transparent); box-reflect: left 0 radial-gradient(#000 30%,transparent);}

實現效果:

效果很棒!好像貓咪真的在照鏡子一樣~~

那如果直接使用圖片遮罩呢?比如說我用這樣一張圖片作為遮罩:

/*CSS代碼*/.img{ -webkit-box-reflect: right 0 url(imgs/mask.png); box-reflect: right 0 url(imgs/mask.png);}

實現效果:


mask.png

可以看出,遮罩圖片會完全拉伸填充倒影圖片,并且效果是完全透明部分不會顯示出來(其實CSS3漸變圖片遮罩原理也跟這個是一樣的)。

需要注意的是,以上講的所有效果不僅僅可以用在圖片上,用在其他元素上也是完全可以的,比如說文字。

兼容性: box-reflect雖然看起來效果很不錯,但是遺憾的是,目前只有webkit內核瀏覽器兼容,不過移動端基本已經沒有任何問題啦~~

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

CSS3倒影實例教程

CSS3倒影實例教程:分享示例圖片在CSS3之前,想要實現示例圖片這樣的一個倒影效果一般只能通過處理圖片的方式,而CSS3問世之后,想要實現這樣的效果變得非常簡單,只需一個CSS3屬性就可以輕松實現了。這就是今天所要提到的box-reflect屬性。咱們先看看W3C給出的box-ref
推薦度:
標簽: 教程 示例 實例
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top 主站蜘蛛池模板: 亚洲视频五区 | 免费观看国产一区二区三区 | 国产欧美又粗又猛又爽老 | 91精品一区二区三区在线观看 | 亚洲欧美日韩中文字幕一区二区三区 | 水蜜桃网 | 日本国产在线观看 | 伊人久久精品成人网 | 一级毛片视频免费 | 欧美日韩精品一区二区三区高清视频 | 欧美 日韩 中文字幕 | 亚洲国产精品免费观看 | 2022国产精品福利在线观看 | 国产午夜视频在线 | 欧美精品在线观看视频 | 免费在线观看一区二区 | 欧美日韩在线观看免费 | 国产一级一片免费播放视频 | 欧美野外多人交3 | 国内免费视频成人精品 | 国产精品久久久久国产精品 | 久久精品无码一区二区日韩av | 亚洲一区 中文字幕 久久 | 国内精品伊人久久久久 | 在线中文字幕第一页 | 日韩午夜在线视频 | 精品日韩欧美一区二区三区 | 精品久久久久久中文字幕 | 成年全黄大色大黄 | 91精品一区二区三区久久久久 | 国产成人亚洲综合一区 | 在线色 | 一级毛片免费下载 | 日韩一区二区三区精品 | 欧美综合视频 | 亚洲欧美网址 | 亚洲国产成人久久综合碰 | 精品国内自产拍在线视频 | 欧美成人国产 | 欧美夜夜爽 | 久久精品123|