阅读背景:

如何在icloud.com上实现退出模糊效果?

来源:互联网 

When the user is signed out of icloud.com it shows the "app" icons blurred behind the modal sign in box. If you resize the browser the icons will move around behind the blur filter. When you sign it, the blur animates away.

当用户退出icloud.com时,它会显示模式登录框后面的“app”图标。如果您调整浏览器的大小,图标将在模糊过滤器后面移动。当您签名时,模糊会消失。

I've looked through the source but cannot figure out how this blur effect is achieved. Immediately, I suspected the CSS filter property but I can't find it in the CSS. Also, this works in Firefox which, according to MDN, it should not.

我查看了源代码,但无法弄清楚这种模糊效果是如何实现的。我立即怀疑CSS过滤器属性,但我无法在CSS中找到它。此外,这适用于Firefox,根据MDN,它不应该。

The only lead I have is that the effect it's likely applied to the #sc1095 element, the parent of the icons.

我唯一的领先是它可能应用于#sc1095元素的效果,即图标的父元素。

Clarification

Apple's solution is unique for the following reasons:

Apple的解决方案是独一无二的,原因如下:

  • It works in Firefox.
  • 它适用于Firefox。
  • It doesn't rely on a pre-generated background image.
  • 它不依赖于预先生成的背景图像。
  • It can be animated (using transition, presumably).
  • 它可以是动画的(使用转换,大概)。
  • It doesn't look to be using <svg> (there are no <svg> tags on the page).
  • 它看起来不是使用 (页面上没有 标签)。

2 个解决方案

#1


10  

It uses (for each image) an hidden <img/> with the blur, an hidden <img/> with the icon, and a visible canvas in which they're drawn.

它使用(对于每个图像)隐藏的带有模糊的,带有图标的隐藏,以及用于绘制它们的可见画布。

Look in the (generated, then with FireBug) source for

查看(生成,然后使用FireBug)源代码

<a style="left: 140px; width: 142px; top: 129px; height: 142px; z-index: 15; -moz-transform: scale(1)" class="atv4 sc-view springboard-button-view escapes-gpu-disabled" id="sc2301" href="/go.html?url=#mail" tabindex="0" role="button" aria-labelledby="sc2301-label">

and you will find inside it (at bottom) the base64 blurred image:

你会发现它(在底部)base64模糊图像:

<img class="sb-shadow sb-el" style="height: 204px; width: 204px; left: -31px; top: -17px; opacity: 0; display: none;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAABzElEQVR42u3a3Y6DIBCG4f6IUpEF3b3/a10OTD7DaKYMtc5uNXnPNuk+AdIKXCqe627t/FwVtBvittK9ohuNR8kR/D/eSOOAchSPaFJmUfvCzKKGQ0kg9wzRvjGgUqUgOiKAtKnugFqA6AhVQ/SDtiHmUAgyWyBmVAjEKoiC6OjQUckWu1VUCxAZHYIh60QVhq4fHpONykNPGB0Gs7pWHtraXjv8FOsVYuzWVOOmWK8uYAyLyaaYUwZxmGoCjMJ4DF38+jFYNx+IGbQlwVjlGCvFeC2dmAzzpaUT858xQUsnJsNELUkxnXJMV4MZFVSNccowjsGQ9xm1GPnLGV6bQ2pSUMBrMzClewBeCcZL9gCwO4OpFlLfBxYwxZiNQIKh68an4kGQOH++e2bfjJ9q+I0WU9ObEFMq4jcZN8Xw8FMNoJAaF6iflwXEmArz53lmihWfAvQroAhUqnYUgIgrkJ47BSg6n8lGyGcoVPjdgQhiwIiUnc9c2CNAgPolCrDqfIboAWGOAgvPNM0KCjA0CHJzAFCE4c40RSCgZhhwtVkAZoQUwt8DAIrAaJYPf78OAAIBgmpvaCCzQw1ibmh80N0Z/beazvtmf/Em4C+GnVIq6T5d5wAAAABJRU5ErkJggg==">

then the icon image:

那么图标图片:

<img src="/system/cloudos/1T.111208/en-us/source/resources/images/mail_icon.png" class="sb-icon sb-el" style="height: 142px; width: 142px; display: none;">

and finally the canvas:

最后画布:

<canvas height="54" width="54" style="height: 216px; position: absolute; top: -37px; left: -37px; width: 216px;" aria-hidden="true"></canvas>

Change display: none; to display: block; on the images to show them.

更改显示:无;显示:块;在图像上显示它们。

You may wanna take a tour on HTML5 Canvas Tutorial

您可能想参观HTML5 Canvas Tutorial

#2


9  

This is what I did on my portfolio for the mobile nav view.

这就是我在移动导航视图的投资组合中所做的。

Effect with CSS blur <= I made a fiddle to show how the effect of a CSS Blur could work.

CSS模糊效果<=我做了一个小提示,以显示CSS模糊效果如何起作用。

jQuery

jQuery的

$('.yourBtn').on('click', function() {
   $('#yourID').toggleClass('blur');
});

CSS

CSS

.blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

This line: $('.max, .mainContainer').toggleClass('blur'); is targeting everything but the header/nav to add the blur effect.

这一行:$('。max,.mainContainer')。toggleClass('blur');除了标题/导航以外,所有内容都会定位,以添加模糊效果。

If you go to my portfolio, change the browser width to make it change and then refresh for the jQuery since I don;t have it set up on resize.

如果你去我的投资组合,更改浏览器宽度以使其更改,然后刷新jQuery,因为我没有;没有设置调整大小。

Port

港口

SVG filters

SVG过滤器

Here is a website on how to use the SVG blur effect in Firefox and all browsers.

这是一个关于如何在Firefox和所有浏览器中使用SVG模糊效果的网站。

I also have this fiddle I saved with a grayscale filter to show how each browser needs to display it.

我还用灰度过滤器保存了这个小提琴,以显示每个浏览器需要如何显示它。

SVG Blur

SVG Blur

SVG Gray scale for each browser

每个浏览器的SVG灰度


分享到: