14

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

模糊的 icloud.com 应用程序图标

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

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

澄清

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

  • 它适用于火狐。
  • 它不依赖于预先生成的背景图像。
  • 它可以是动画的（transition大概使用 ）。
  • 它看起来没有使用<svg>（页面上没有<svg>标签）。
4

2 回答 2

10

它使用（对于每个图像）隐藏<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 教程

于 2013-10-23T15:56:32.923 回答
9

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

使用 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 模糊

每个浏览器的 SVG 灰度

于 2013-10-23T15:32:07.697 回答