建站
咨詢
售后
建站咨詢
新聞中心
現(xiàn)在看到不少網(wǎng)站都用上了html5、css3的新特性，用這些新特性給頁面確實豐富了不少效果，圓角投影漸變啥的對工作的效率也超級給力，像過去都得用圖片來實現(xiàn)的效果現(xiàn)在簡單的代碼即可輕松實現(xiàn)，讓復雜的工作一下變的快捷了許多，并且有些看上去的效果猶如是flash動畫做出來的般，看了都讓人激發(fā)下好奇心馬上看看源代碼學習下這是怎么實現(xiàn)的，下面也就聊聊用CSS3做的倒影效果。
創(chuàng)新互聯(lián)主營吳橋網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,APP應用開發(fā),吳橋h5小程序定制開發(fā)搭建,吳橋網(wǎng)站營銷推廣歡迎吳橋等地區(qū)企業(yè)咨詢先上兩張截圖：
不曉得大家看出這兩個圖有啥共同點，沒錯，這聊的是倒影自然就是標題都有用倒影的效果。（貌似設計師都愛這效果，哪里都愛加這個）。
用常規(guī)方法自然是一塊圖片沒說的，現(xiàn)在有CSS3可以看看有沒有現(xiàn)成的屬性可以挖掘的。
box-reflect 就是它了。
來看看這張蜂鳥的圖片，你能分辨哪個是倒影麼？哈哈，這完全就是像照鏡子一樣
來看看它的寫法box-reflect: left，一個倒影就出來了，當然這樣簡單的效果離我們想要的效果還差許多，現(xiàn)實的例子沒可能就個很直板的倒過來，就是做出來設計師那邊也會好好的批一頓，那我們再好好優(yōu)化它。下面的例子都是基于webkit核心的瀏覽器來測試效果。
代碼如下：
-webkit-box-reflect: left 1px -webkit-gradient(linear, 0% 100%,100% 100%, from(transparent), to(white));
第一個屬性 left 是倒影的方向，共有四個屬性：above, below, left, right （上下左右）
第二個單位值是元素的倒影離元素的距離，可以為負值，不過其負值的效果倒影是在元素的下面層級的，不會覆蓋本元素。
后面這個-webkit-gradient 熟悉css3漸變屬性的同學一定很了解它了，這里簡單介紹下
linear 是線性漸變，后面的兩組數(shù)字是顏色漸變的方向，這和我們寫背景定位的值很像，它是指由哪往哪開始做漸變效果，數(shù)字也可以用英文方位的單純如：0% 100%,100% 100%, = left bottom, right bottom,后面的 from (…) to (…) 比較好理解，既剛才定了方向上顏色的取值。
來看看效果：
Safari 5.0：
Chorme 12.0：
好像Chorme 12.0對 ‘transparent’ 透明值 的表現(xiàn)不同了，記得之前的Chorme的版本是和Safari 5.0是一樣的。先不理版本的問題，至少現(xiàn)在我們有了個倒影的思路，把倒影改個方向，漸變也按照倒影的邏輯改個漸變方向，來看看效果：
代碼：-webkit-box-reflect: below -16px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(white));
below：倒影方向在元素的下面，-16px 的單位值是把倒影和元素的距離近些，
漸變方向上的值：0 0, 0 100%,= left top, left bottom, 既方向由上往下，
倒影漸變還不是很滿意所以得再稍微優(yōu)化下：
這和預期的就差不多了，來看看剛才優(yōu)化的代碼：
-webkit-box-reflect: below -16px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.5, transparent), to(white));
加了color-stop(.5, transparent) ，調整了下漸變的終止位置，效果明顯好多了。
除了圖片可以做倒影，文字也是可以同樣應用這個屬性的，來看看文章開頭的那截圖：
這標題用的效果用剛才介紹的方法可以很快的實現(xiàn)這效果。
來看看代碼：（代碼省略了字體等別的樣式）
-webkit-box-reflect: below 6px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.5, transparent), to(rgba(3,3,3,.2)));
這倒影倒是有模有樣的，就是字體還得加個漸變，來繼續(xù)優(yōu)化：
這個效果基本是可以接受的，不過字體大小的問題和ps里的字還是有些區(qū)別，把字體改小些露出鋸齒型還真丑，先不考慮這個，先看看代碼：
-webkit-box-reflect: below 6px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.5, transparent), to(rgba(3,3,3,.2)));
background: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(170,170,170, .9)), to(rgba(20,22,21, 1)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
這效果基本和設計稿一樣了，代碼一大堆，先別暈，對文字漸變的原理和倒影倒影差不多，有興趣的同學可以狗狗或百一下。
當頁面上的標題都用這倒影效果時就是件很省心的事情了，無需再切成圖片又合并又定位了，給網(wǎng)站性能的提升、后期維護的便捷帶來有大的幫助。不過對于大多數(shù)低版本IE瀏覽器的用戶而言這些都是浮云般的效果，不過隨著瀏覽器的發(fā)展，大家都按共同標準來整合自家產(chǎn)品的話，浮云終會有散開的一天。
轉自：http://guaiyutou.diandian.com/post/2012-01-08/21208090
文章名稱：css3倒影-創(chuàng)新互聯(lián)
本文來源：http://www.ef60e0e.cn/article/cddogj.html
