• home > webfront > style > css3 >

    CSS3 实现iOS7毛玻璃模糊效果 (iOS7 live blur)

    Author:zhoulujun@live.cn Date:

    CSS3 实现iOS7毛玻璃模糊效果 (iOS7 live blur)iOS live blur 实时毛玻璃模糊随着iOS 7的正式放出,很多人感慨道,苹果终于去尝试

    CSS3 实现iOS7毛玻璃模糊效果 (iOS7 live blur)

    iOS live blur 实时毛玻璃模糊

    随着iOS 7的正式放出,很多人感慨道,苹果终于去尝试修那几百年不变的UI了,暂且不说这种改变是好还是坏,毕竟这是仁者见仁的事情。今天我们关注的焦点是iOS 7 中的一个特殊的设计效果——毛玻璃效果。

    关于IOS7 live blur的其他方面的讨论,已经有很多了。比如:

    iOS 7 的实时毛玻璃模糊 (live blur) 效果渲染需要多大的系统开销?

    今天我想说的是如何使用 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模糊会造成边缘变得很淡,影响我们的效果,所以我们用裁减将其边缘部分减去,这样看起来效果就很好了。

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

    ###实例

    HTML 代码

        <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 
    }
    

    javascript 代码

    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 DEMO传送门

    在demo中我们可以通过键盘的上下按钮来看效果(该DMEO仅在webkit内核浏览器中有效)。

    本文地址http://www.zhuwenlong.com/blog/5242d5fc9ab354383d000001

    转载出处朱文龙的自留地



    转载本站文章《CSS3 实现iOS7毛玻璃模糊效果 (iOS7 live blur)》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/style/css3/2016_0107_391.html