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

Question

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

我查看了源代码，但无法弄清楚这种模糊效果是如何实现的。我立即怀疑CSS filter property，但我在CSS中找不到它。此外，这适用于Firefox，according to MDN, it should not。

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

澄清

Apple的解决方案是独一无二的，原因如下：

• 适用于Firefox。
• 它不依赖于预先生成的背景图像。
• 可以动画（大概使用transition）。
• 它似乎没有使用<svg>（页面上没有<svg>个标签。）

Answer 1

它使用（对于每个图像）隐藏的<img/>与模糊，隐藏的<img/>与图标，以及一个可见的画布，在其中绘制它们。

查看（生成，然后使用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="#mail" tabindex="0" role="button" aria-labelledby="sc2301-label">

你会发现它（在底部）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==">

然后是图标图片：

<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;">

最后是画布：

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

将图片上的display: none;更改为display: block;以显示它们。

您可能想参观HTML5 Canvas Tutorial

Answer 2

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

Effect with CSS blur＆lt; =我做了一个小提琴来展示CSS Blur的效果如何起作用。

<强>的jQuery

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

<强> CSS

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

此行：$('.max, .mainContainer').toggleClass('blur');定位除标题/导航之外的所有内容，以添加模糊效果。

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

Port

SVG过滤器

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

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

SVG Blur

SVG Gray scale for each browser