【轉】css3實現ios7「毛玻璃」模糊效果

-webkit-filter

該屬性是咱們此次實現該功能的主要屬性

目前該屬性還屬於草案階段，只有chrome 18+、Safari 瀏覽器支持，不過相信隨着時間的推移，很快會被大規模應用的。

具體的filter用法我會另外寫一篇文章和你們分享的，這裏主要介紹它的 blur()、brightness()、contrast() 3個屬性。

blur()

用來設置相應的dom的模糊程度，用法很簡單

filter: blur(5px) 

brightness()

用來設置相應dom的明度，對應的值越大越亮

filter: brightness(0.5) 

contrast()

對比度值越大越強烈

filter: contrast(200%) 

---

clip: rect(205px 572px 516px 351px);

用來裁減DOM，至關於遮罩的概念，因爲css模糊會形成邊緣變得很淡，影響咱們的效果，因此咱們用裁減將其邊緣部分減去，這樣看起來效果就很好了。

###實例
html：clip: rect(205px 572px 516px 351px); 

<div class="ios7">
        <div class="ios7_f">
            <img src="ios7_icon_redesign_by_ida_swarczewskaja.jpg" width="700px" height="525px" />
        </div>
        <div class="ios7_b">
            <img src="ios7_icon_redesign_by_ida_swarczewskaja.jpg" width="700px" height="525px" />
        </div>
        <div class="ios7_i">
            <img src="Control-Center-btns.png" width="222px" height="331px"/>
        </div>
</div>

css：

.ios7 {  
    width: 700px;  
    height: 525px; 
    overflow: hidden;  
    position: relative;  
    margin: 0 auto; 
}
.ios7_f, .ios7_b { 
    position: absolute;  
    top: 0;  
    left: 0;
}
.ios7_f img, .ios7_b img{  
    width:700px; 
    height:525px; 
}
.ios7_b { 
    -webkit-filter: blur(8px) contrast(0.4) brightness(1.4); 
    clip: rect(205px 572px 516px 351px);
     z-index: 50;    transition: all 0.5s ease-in-out;    
}
.ios7_b_on { 
    clip: rect(516px 572px 516px 351px); 
}
.ios7_i { 
    position: absolute; 
    clip: rect(205px 572px 516px 351px); 
}
.ios7_i img { 
    z-index: 100; 
    width: 222px;    
    height:301px;  
    top: 215px; 
    left: 350px; 
    position: absolute; 
    transition: all 0.5s ease-in-out; 
}
.ios7_i_on img { 
    top: 516px 
}

js：

var img = document.querySelector('.ios7_i');
var back = document.querySelector('.ios7_b');
document.onkeydown = function(e) {
    if (e.keyCode == '38') {
        img.className = 'ios7_i';
        back.className = 'ios7_b';
        return false;
    } else if (e.keyCode == '40') {
        img.className += ' ios7_i_on';
        back.className += ' ios7_b_on';
        return false;
   }
};

demo：https://www.zhuwenlong.com/demo/ios7/ios7.html

轉自：https://www.zhuwenlong.com/blog/5242d5fc9ab354383d000001