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

Question

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

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

我唯一的领先是它可能应用于#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

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

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

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,因为我没有;没有设置调整大小.

港口

SVG过滤器

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

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

SVG Blur

每个浏览器的SVG灰度