css3實現的毛玻璃效果程式碼例項
毛玻璃大家自然都知道怎麼回事。
用css3也可以模擬實現此效果,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .container { width: 287px; height: 285px; background-image: url(demo/CSS/img/glass.jpg); background-repeat: no-repeat; background-attachment: fixed; overflow: hidden; } .frosted-glass { width: 287px; height: 285px; background: inherit; -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false); } .weather { width: 80px; height: 80px; margin-top: -200px; margin-left: 100px; position: relative; display: block; } </style> </head> <body> <div class="container"> <div class="frosted-glass"></div> <img class='weather' src="demo/CSS/img/wether.jpg" /> </div> </body> </html>
相關文章
- css3實現的折角效果程式碼例項CSSS3
- css3實現的打折卡效果程式碼例項CSSS3
- CSS3 實現的鐘表效果程式碼例項CSSS3
- css3實現的打字機效果程式碼例項CSSS3
- css3實現的圓角效果程式碼例項CSSS3
- css3實現的氣泡效果程式碼例項CSSS3
- css3實現的文字下滑出現效果程式碼例項CSSS3
- css3實現的斑馬紋效果程式碼例項CSSS3
- CSS3實現的div圓角效果程式碼例項CSSS3
- CSS3實現的div陰影效果程式碼例項CSSS3
- css3實現的旋轉魔方效果程式碼例項CSSS3
- css3實現的動態大白效果程式碼例項CSSS3
- css3實現的文字陰影效果程式碼例項CSSS3
- css3實現的多啦a夢效果程式碼例項CSSS3
- jQuery和css3實現的開關效果程式碼例項jQueryCSSS3
- css3實現的邊框陰影效果程式碼例項CSSS3
- css3實現的動物頭像效果程式碼例項CSSS3
- css3實現的皮球上下彈動效果程式碼例項CSSS3
- css3實現button按鈕美化效果程式碼例項CSSS3
- css3實現網狀球體效果程式碼例項CSSS3
- css3程式碼實現的滑鼠懸浮按鈕效果程式碼例項CSSS3
- css3實現旋轉的太極圖效果程式碼例項CSSS3
- css3實現div邊框陰影效果程式碼例項CSSS3
- css3星空效果程式碼例項CSSS3
- css3水滴效果程式碼例項CSSS3
- CSS3 名片效果程式碼例項CSSS3
- css3實現的書本立體翻頁效果程式碼例項CSSS3
- css3和js實現的圓形鐘錶效果程式碼例項CSSS3JS
- css3實現的div上下左右翻轉效果程式碼例項CSSS3
- css3實現的立體導航選單效果程式碼例項CSSS3
- CSS3文字漸現效果程式碼例項CSSS3
- jquery實現的選項卡效果例項程式碼jQuery
- CSS3小黃人效果程式碼例項CSSS3
- css3晃動效果程式碼例項CSSS3
- CSS3心形效果程式碼例項CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- CSS3彈球效果程式碼例項CSSS3
- CSS3實現的立方體3D滾動效果程式碼例項CSSS33D