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内核浏览器中有效)。


Write a response...
Mofei Zhu
publish
匿名
2015-07-13 11:02
0
 Replay
@  
Replay
Mofei
2014-11-14 22:51
@ 谢谢提醒,已经修复
0
 Replay
@Mofei  
Replay
匿名
2014-11-06 22:29
貌似demo中的图片看不到了
0
 Replay
@  
Replay
Mofei
2014-05-17 14:22
@剧中人 计数问题,已经修复,多谢
0
 Replay
@Mofei  
Replay
剧中人
2014-05-17 11:41
又来学习了
0
 Replay
@剧中人  
Replay
Mofei
2014-04-08 13:59
@ Welkin 可以用clip裁减掉
0
 Replay
@Mofei  
Replay
Welkin
2014-04-02 08:48
模糊造成的边缘透明一直不知道如何解决
0
 Replay
@Welkin  
Replay
mogu
2014-02-24 13:21
领教了,多谢!
0
 Replay
@mogu  
Replay
canon
2013-10-30 19:58
温馨提示:demo请按键盘上下键预览。。。。。
0
 Replay
@canon  
Replay
剧中人
2013-10-30 19:55
你好,你的评论数怎么变成-7了,好奇怪!
0
 Replay
@剧中人  
Replay