iOS 7使用CSS模糊叠加效果？
Lum*_*mpy 160 javascript css user-interface blur
苹果的叠加层似乎不仅仅是透明度.关于如何用CSS和可能的JS实现这种效果的任何想法？
Can*_*ana 146
CSS3可以:
#myDiv {
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-o-filter: blur(20px);
-ms-filter: blur(20px);
filter: blur(20px);
opacity: 0.4;
}
这里的例子=> jsfiddle
- 这没有达到iOS7中的效果,其中元素模糊背景的一部分. (118认同)
- 正如阿德里安所指出的那样,过滤器只会模糊一个元素,它就是孩子.它不能用于叠加来模糊父元素或相邻元素,因此CSS无法实现iOS 7效果. (34认同)
- 如果你认为实现这种效果只是模糊,你就错了.我正在开发一个简单的开源存储库,使用JS和CSS 3实现这种效果,请继续关注:) (10认同)
- 我编辑了我的jsfiddle,现在它就像IOS7一样;)=> [CSS3 IOS7效果](http://jsfiddle.net/SvH6w/6/) (9认同)
- 这在FX中不起作用 - 它们不支持`-moz-filter:blur()`.相反,您必须使用SVG过滤器,请参阅我的答案以获取详细信息. (5认同)
- 这个答案有点误导.链接的小提琴表明模糊是一个叠加的元素,模糊了它下面的内容,但事实并非如此.它使用了一些巧妙的技巧,涉及两个不同高度的div和相同的背景图像.足够的利基使用,但绝对不同于iOS7效果.它还提出了一个更大的问题,如果你愿意使用具有设置背景图像的重叠div,为什么不让顶部div的背景图像成为永久模糊的图像并节省处理能力...... (2认同)
Edo*_*rit 47
你让我想尝试,所以我做了,看看这里的例子:
http://codepen.io/Edo_B/pen/cLbrt
使用:
- HW Accelerated CSS过滤器
- JS用于类分配和箭头键事件
- 图像CSS剪辑属性
而已.
我也相信如果使用画布来复制当前的dom并使其模糊,这可以针对任何屏幕动态完成.
FWe*_*inb 39
[编辑]未来(移动)Safari 9 -webkit-backdrop-filter就是这样的.看到我制作的这支笔来展示它.
在过去的4周里我想到了这一点,并提出了这个解决方案.
[编辑]我在CSS-Tricks上写了一篇更深入的帖子
此技术使用CSS区域,因此此时浏览器支持不是最好的.(http://caniuse.com/#feat=css-regions)
该技术的关键部分是使用CSS Region将内容从布局中分离出来.首先定义一个.content元素,flow-into:content然后使用适当的结构来模糊标题.
布局结构:
<div class="phone">
<div class="phone__display">
<div class="header">
<div class="header__text">Header</div>
<div class="header__background"></div>
</div>
<div class="phone__content">
</div>
</div>
</div>
此布局的两个重要组成部分是.header__background和.phone__content-这是其中内容应流虽然容器.
使用CSS区域很简单flow-from:content(.content流入命名区域content)
现在是棘手的部分.我们希望始终通过内容流动内容,.header__background因为这是内容将被模糊的部分.(使用webkit-filter:blur(10px);)
这是通过transfrom:translateY(-$HeightOfTheHeader)的.content,以确保内容总是会流向虽然.header__background.此转换同时始终隐藏标题下方的某些内容.修复此问题很容易添加
.header__background:before{
display:inline-block;
content:'';
height:$HeightOfTheHEader
}
适应变革.
目前正在从事:
- Chrome 29+(启用'experimental-webkit-features'/'enable-experimental-web-platform-features')
- Safari 6.1种子6
- iOS7(缓慢且无滚动)
Kei*_*ith 16
由于元素样式属性,现在可以使用FireFox .
此实验属性允许您将任何HTML内容用作背景图像.因此,要创建背景,您需要三个叠加层:
- 具有纯背景的简单叠加(隐藏真实的叠加内容).
- 使用
-moz-element设置内容的背景叠加.请注意,FX不支持该filter: blur()属性,因此我们需要一个SVG. - 覆盖非模糊内容.
所以,放在一起:
SVG模糊过滤器(适用于FX,其他浏览器可以使用filter:blur()):
<svg>
<defs>
<filter id="svgBlur">
<feGaussianBlur stdDeviation="10"/>
</filter>
</defs>
</svg>
CSS模糊风格:
.behind-blur
{
filter : url(#svgBlur);
opacity: .4;
background: -moz-element(#content);
background-repeat: no-repeat;
}
最后3层:
<div class="header" style="background-color: #fff"> </div>
<div class="header behind-blur"> </div>
<div class="header">
Header Text, content blurs behind
</div>
然后移动它只是设置background-position(jQuery中的示例,但你可以使用任何东西):
$('.behind-blur').css({
'background-position': '-' + left + 'px -' + top + 'px'
});
Gyu*_* Jo 14
看看这个演示页面.
此演示使用html2canvas将文档渲染为图像.
http://blurpopup.labs.daum.net/
- 单击"显示弹出窗口"链接时,将调用"makePopup"函数.
- 'makePopup'运行html2canvas以将文档渲染为图像.
- 图像将转换为data-url字符串,并将其绘制为弹出窗口的背景图像.
- Popup的bg被-webkit-filter模糊了
- 将弹出窗口附加到文档中.
- 当您拖动弹出窗口时,它会更改自己的背景位置.
- 像你预测的那样,@ JoeathanDrapeau. (5认同)
Lux*_*tor 10
我前几天找到的这支笔似乎做得很漂亮,只需要一点点css和21行javascript.在我发现这个之前我没有听说过cloneNode js命令,但它完全适用于我需要的东西.
http://codepen.io/rikschennink/pen/zvcgx
细节:A.基本上它会查看你的内容div并在其上调用cloneNode,因此它会创建一个副本,然后将它放在页面顶部的overflow:hidden标头对象中.B.然后它只是听取滚动,这样两个图像似乎匹配并模糊标题图像... annnnd BAM.效果达到了.
在他们获得语言中内置的少量脚本功能之前,CSS中的功能并不完全可行.
小智 5
- 克隆要模糊的元素
- 将它附加到您想要位于顶部的元素(磨砂窗口)
- 模糊克隆元素与webkit过滤器
- 确保克隆元素定位于绝对位置
- 滚动原始元素的父元素时,请捕获scrollTop和scrollLeft
- 使用requestAnimationFrame,现在将webkit-transform动态设置为translate3d,其中x和y值为scrollTop和scrollLeft
示例在这里:
- 确保在webkit浏览器中打开
- 在手机视图内滚动(最好用苹果鼠标...)
- 看到模糊的页脚在行动
| 归档时间： |
|
| 查看次数： |
157552 次 |
| 最近记录： |