DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> 關於CSS >> css3的過濾效果簡單實例
css3的過濾效果簡單實例
編輯：關於CSS     

上面的圖片就是css3新特性的濾鏡效果，學會了這些那麼我們這群愛美愛帥的大web是不是就可以完美的用代碼實現照片美化了捏~~

好，咱們先把照片後面的白框實現，

XML/HTML Code復制內容到剪貼板
  1. <style>　    
  2. #div1{   
  3.   
  4. 　　　　　　　　　　/*給div定義寬高和顏色*/   
  5.   
  6.   
  7. 　　　　　　　　　　width: 200px;   
  8. 　　　　　　　　　　height: 250px;   
  9. 　　　　　　　　　　background: white;    
  10.   
  11. 　　　　　　　　　/* 內填充距離照片為15px ，文字居中*/   
  12. 　　　　　　　　　　padding: 15px;   
  13.   
  14. 　　　　　　　　　　text-align: center;   
  15.   
  16. 　　　　　　/*　　把白色背景旋轉-10deg  */   
  17.   
  18. 　　　　　　　　　　-webkit-transform: rotate(-10deg);   
  19.   
  20. 　　　　　　/*給背景一個陰影的效果*/   
  21. 　　　　　　　　　　box-shadow: 4px 4px 4px #666;   
  22. 　　　　　　　　　　float: left;   
  23. 　　　　　　　　　　}   
  24.   
  25.     
  26.   
  27. </style>　　　　　　　   
  28. <BR>　　　　　　   
  29. <body><BR>　　　　　　　　　   
  30. <div id="div1">    
  31. <img src="img/001V28Mwty6Fww02IiNad&690.jpg">    
  32. <p>灰色濾鏡</p>    
  33. </div>  
  34. <BR>  
  35. </body>   

把白色的背景框寫好之後，接下來就該到濾鏡了

首先來第一張，藝術的黑白色

XML/HTML Code復制內容到剪貼板
  1. #div1 img{   
  2.   
  3. /*把div1裡面的圖片百分百，等同於相對於在div1裡面百分比放大填充*/   
  4. width: 100%;　　　　　　　   
  5. /*把圖片變成黑白色括號裡跟顏色變化的值，只能取0~1之間*/　   
  6. -webkit-filter: grayscale(1); 　　}   
  7.   

第二張照片，額...老照片.

XML/HTML Code復制內容到剪貼板
  1. #div1 img{   
  2.             width: 100%;   
  3.             -webkit-filter: sepia(1);   
  4.         }  

第三張照片，反色？我也不太清楚啥顏色

XML/HTML Code復制內容到剪貼板
  1. #div1 img{   
  2.             width: 100%;   
  3.             -webkit-filter: hue-rotate(200deg);   
  4.         }  

第四張照片，仿佛罩了一層白霧

XML/HTML Code復制內容到剪貼板
  1. #div1 img{   
  2.             width: 100%;   
  3.             -webkit-filter: opacity(0.5);   
  4.         }   

還有一張照片的效果圖上沒有，是模糊效果代碼如下

XML/HTML Code復制內容到剪貼板
  1. #div4 img{   
  2.             width: 100%;   
  3.             -webkit-filter: opacity(0.5);   
  4.         }  

好了，我的濾鏡分享完畢，接下來美圖去了

以上這篇css3的過濾效果簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。

關於CSS
CSS：使DIV 在浏覽器窗口中水平垂直居中
<div style=position:absolute; top:50%; left:50%
常用的 css 命名規則(推薦)
常用的 css 命名規則(推薦)頭：header內容：content/container尾：foot
利用CSS3實現進度條的兩種姿勢詳解
效果圖如下：  第一種姿勢如下 先上代碼<div id=&quo

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
CSS基礎教程:CSS的Text 文本 CSS基礎教程:Borders 邊框 a標簽有小手狀和無小手狀css的屬性介紹 CSS布局需要掌握的8個你技巧 css3類選擇器之結合元素選擇器和多類選擇器用法 Flexbox制作CSS布局實現水平垂直居中的簡單實例 關於css旋轉動畫效果的簡單實現 css3 盒模型以及box-sizing屬性全面了解 CSS3 2D模擬實現摩天輪旋轉效果 text-algin:justify實現文本兩端對齊方法小結
熱門推薦
淺談css的四種書寫方式(必看篇) IE6下兼容性常見的幾個問題與解決方法 css3動畫效果小結(推薦) 網頁頭部css代碼優化實例 學用CSS之HTML結構化 CSS基礎教程:CSS的Pseudo Classes 偽類 邊框(border)邊距(margin)和間隙(padding)屬性的區別 CSS樣式覆蓋規則全面了解 利用CSS3把圖片變成灰色模式的實例代碼
大家都在看
Web標准不僅僅是不用表格的站點 cookie.js 加載順序問題怎麼才有效 Jquery圖形報表插件 jqplot簡介及參數詳解 javascript小實例，移動端頁面中的拖拽 Java編程中應用dom4j輕松地處理XML文檔 js在浏覽器兼容教程:函數和方法差異 JavaScript的函數式編程基礎指南 ASP.NET jQuery 實例9 通過控件hyperlink實現返回頂部效果
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved