iOS 7的CSS模糊叠加效果?

2020/10/28 22:43 · javascript ·  · 0评论

看起来,苹果的叠加层不仅是透明的。关于如何使用CSS和JS实现此效果的任何想法?

不只是透明度

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

您让我想尝试,所以我做了一下,在这里查看示例:

http://codepen.io/Edo_B/pen/cLbrt

使用:

  1. 硬件加速CSS过滤器
  2. JS用于类分配和箭头键事件
  3. 图像CSS剪辑属性

而已。

我还相信,如果使用画布复制当前dom并使其模糊,那么可以在任何屏幕上动态完成此操作。

[编辑]在将来的(移动)Safari 9中,将-webkit-backdrop-filter完全有此功能。看到我制作来展示这支笔。

在过去的四个星期中,我一直在考虑这个问题,并提出了解决方案。

现场演示

[编辑]我在CSS-Tricks上写了一篇更深入的文章

此技术使用的是CSS区域,因此目前对浏览器的支持不是最好的。http://caniuse.com/#feat=css-regions

该技术的关键部分是通过使用CSS区域将内容与布局分开。首先使用定义一个.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+(启用“实验性WebKit功能” /“启用实验性Web平台功能”)
  • Safari 6.1种子6
  • iOS7(缓慢且无滚动

由于元素样式属性,现在使用FireFox可以实现这种效果

此实验属性可让您将任何HTML内容用作背景图像。因此,要创建背景,您需要三个覆盖:

  1. 具有纯色背景的简单叠加(以隐藏真实的叠加内容)。
  2. -moz-element设置内容背景覆盖请注意,FX不支持该filter: blur()属性,因此我们需要一个SVG。
  3. 用非模糊内容覆盖。

所以,放在一起:

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">&nbsp;</div>
<div class="header behind-blur">&nbsp;</div>
<div class="header">
    Header Text, content blurs behind
</div>

然后要移动它,只需设置background-position(jQuery中的示例,但您可以使用任何东西):

$('.behind-blur').css({
    'background-position': '-' + left + 'px -' + top + 'px'
}); 

这是JS Fiddle,仅FX。

查看此演示页面。

本演示使用html2canvas将文档呈现为图像。

http://blurpopup.labs.daum.net/

  1. 单击“显示弹出窗口”链接后,将调用“ makePopup”功能。
  2. “ makePopup”运行html2canvas将文档呈现为图像。
  3. 该图像将转换为data-url字符串,并将其绘制为弹出窗口的背景图像。
  4. 弹出窗口的背景模糊-webkit-filter:blur
  5. 将弹出窗口追加到文档中。
  6. 拖动弹出窗口时,它会更改其自己的背景位置。

前几天我发现这支笔看起来做得很漂亮,只有一点CSS和21行javascript。直到我发现这个命令,我才听说过cloneNode js命令,但是它完全可以满足我确定的需要。

http://codepen.io/rikschennink/pen/zvcgx

详细信息:A.基本上,它会查看您的内容div并在其上调用cloneNode,以便创建一个副本,然后将其放置在页面顶部的overflow:hidden标头对象中。B.然后,它只是侦听滚动,以便两个图像看起来都匹配并且模糊了标题图像……然后是BAM。取得了效果。

直到他们在语言中内置了一点点脚本功能后,它们才可以在CSS中完全实现。

  • 克隆您要模糊的元素
  • 将其附加到要放在顶部的元素上(磨砂窗口)
  • 使用webkit-filter模糊克隆的元素
  • 确保克隆的元素位于绝对位置
  • 滚动原始元素的父级时,捕获scrollTop和scrollLeft
  • 使用requestAnimationFrame,现在将webkit-transform动态地设置为带有x和y值的scroll3d和scrollTop和scrollLeft

示例在这里:

  • 确保在webkit-browser中打开
  • 在手机视图中滚动(最好用苹果鼠标...)
  • 看到行动中的页脚模糊

http://versie1.com/TEST/ios7/

昨天做了一个快速演示,实际上做了您要说的。http://bit.ly/10clOM9
此演示基于加速度计进行视差,因此它在iPhone本身上效果最佳。
我基本上只是将我们叠加的内容复制到一个模糊的固定位置元素中。

注意:向上滑动以查看面板。

(我使用过可怕的CSS ID,但您知道了)

#frost{
 position: fixed; 
 bottom: 0; 
 left:0; 
 width: 100%; 
 height: 100px; 
 overflow: hidden;
 -webkit-transition: all .5s;
}
#background2{
 -webkit-filter: blur(15px) brightness(.2);
}

#content2fixed{
 position: fixed;
 bottom: 9px;
 left: 9px;
 -webkit-filter: blur(10px);
}

我对此不太确定,我认为CSS目前无法执行此操作

然而,克里斯·科耶尔(Chris Coyier)在博客中介绍了一种使用多张图片来实现这种效果的旧技术,网址为http://css-tricks.com/blurry-background-effect/

http://codepen.io/GianlucaGuarini/pen/Hzrhf中检查一下这一
效果,似乎它在不复制元素自身背景图像的情况下就可以起到效果。
在示例中,文本也会模糊。

Vague.js

var vague = $blurred.find('iframe').Vague({
  intensity:5 //blur intensity
});
vague.blur();

好消息

2020年4月11日开始,使用backdrop-filterCSS属性可以轻松实现此功能,现在CSS属性已成为Chrome,Safari和Edge中的稳定功能。

我想要在我们的混合移动应用程序中使用它,因此也可以在Android / Chrome Webview和Safari WebView中使用。

  1. https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter
  2. https://caniuse.com/#search=backdrop-filter

代码示例:

只需添加CSS属性:

.my-class {
    backdrop-filter: blur(30px);
    background: transparent;     // Make sure there is not backgorund
}

UI示例1

看到它在这支笔上工作,或尝试演示:

#main-wrapper {
  width: 300px;
  height: 300px;
  background: url("https://i.picsum.photos/id/1001/500/500.jpg") no-repeat center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.my-effect {
  position: absolute;
  top: 300px;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  transition: top 700ms;
}

#main-wrapper:hover .my-effect {
  top: 0;
}
<h4>Hover over the image to see the effect</h4>

<div id="main-wrapper">
  <div class="my-effect">
    Glossy effect worked!
  </div>
</div>

UI示例2

让我们以麦当劳的应用程序为例,因为它色彩丰富。我获取了其屏幕截图,并将其作为背景添加到body了我的应用中。

我想在其顶部显示具有光泽效果的文本。backdrop-filter: blur(20px);在上面的覆盖上使用,我可以看到:

主屏幕截图
在此处输入图片说明

我一直在使用svg滤镜来实现精灵的类似效果

<svg id="gray_calendar" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 48 48 48">
  <filter id="greyscale">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
  <image width="48" height="10224" xlink:href="tango48i.png" filter="url(#greyscale)"/>
</svg>
  • viewBox属性将仅选择想要的包含图像的一部分。
  • 只需将过滤器更改为所需的任何过滤器即可,例如Keith的<feGaussianBlur stdDeviation="10"/>示例。
  • 使用<image ...>标签将其应用于任何图像,甚至使用多幅图像。
  • 您可以使用js进行构建,并将其用作图像或在CSS中使用id。

这可能对您有帮助!

这会动态更改IOS所做的背景

.myBox {
  width: 750px;
  height: 500px;
  border: rgba(0, 0, 0, 0.5) 1px solid;
  background-color: #ffffff;
}

.blurBg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.blurBg img {
  -webkit-filter: blur(50px);
  margin-top: -150px;
  margin-left: -150px;
  width: 150%;
  opacity: 0.6;
}

这是我对jQuery的看法。解决方案不是通用的,这意味着必须根据实际设计调整一些位置和内容。

基本上,我所做的是:在触发器上克隆/将整个背景(应该模糊的内容)移到内容不模糊的容器中(如果不是全角,则可以选择隐藏隐藏的溢出),并正确定位。需要注意的是,在窗口调整大小时,模糊div的位置将与原始值不匹配,但这可以通过某些窗口调整大小功能来解决(老实说,我现在不能对此感到烦恼)。

非常感谢您对这个解决方案的意见!

谢谢

这是小提琴,未经IE测试。

的HTML

<div class="slide-up">
<div class="slide-wrapper">
    <div class="slide-background"></div>
    <div class="blured"></div>
    <div class="slide-content">
         <h2>Pop up title</h2>

        <p>Pretty neat!</p>
    </div>
</div>
</div>
<div class="wrapper">
<div class="content">
     <h1>Some title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie magna elit, quis pulvinar lectus gravida sit amet. Phasellus lacinia massa et metus blandit fermentum. Cras euismod gravida scelerisque. Fusce molestie ligula diam, non porta ipsum faucibus sed. Nam interdum dui at fringilla laoreet. Donec sit amet est eu eros suscipit commodo eget vitae velit.</p>
</div> <a class="trigger" href="#">trigger slide</a>

</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
    <feGaussianBlur stdDeviation="3" />
</filter>
</svg>

的CSS

body {
margin: 0;
padding: 0;
font-family:'Verdana', sans-serif;
color: #fff;
}
.wrapper {
position: relative;
height: 100%;
overflow: hidden;
z-index: 100;
background: #CD535B;
}
img {
width: 100%;
height: auto;
}
.blured {
top: 0;
height: 0;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
filter: url(#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
position: absolute;
z-index: 1000;
}
.blured .wrapper {
position: absolute;
width: inherit;
}
.content {
width: 300px;
margin: 0 auto;
}
.slide-up {
top:10px;
position: absolute;
width: 100%;
z-index: 2000;
display: none;
height: auto;
overflow: hidden;
}
.slide-wrapper {
width: 200px;
margin: 0 auto;
position: relative;
border: 1px solid #fff;
overflow: hidden;
}
.slide-content {
z-index: 2222;
position: relative;
text-align: center;
color: #333333;
}
.slide-background {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 1500;
opacity: 0.5;
}

jQuery的

// first just grab some pixels we will use to correctly position the blured element
var height = $('.slide-up').outerHeight();
var slide_top = parseInt($('.slide-up').css('top'), 10);
$wrapper_width = $('body > .wrapper').css("width");
$('.blured').css("width", $wrapper_width);

$('.trigger').click(function () {
    if ($(this).hasClass('triggered')) { // sliding up
        $('.blured').animate({
            height: '0px',
            background: background
        }, 1000, function () {
            $('.blured .wrapper').remove();
        });
        $('.slide-up').slideUp(700);
        $(this).removeClass('triggered');
    } else { // sliding down
        $('.wrapper').clone().appendTo('.blured');
        $('.slide-up').slideDown(1000);
        $offset = $('.slide-wrapper').offset();
        $('.blured').animate({
            height: $offset.top + height + slide_top + 'px'
        }, 700);
        $('.blured .wrapper').animate({
            left: -$offset.left,
            top: -$offset.top
        }, 100);
        $(this).addClass('triggered');
    }
});
本文地址:http://javascript.askforanswer.com/ios-7decssmohudiejiaxiaoguo.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!