CSS 中的形状 Blob

我们 刚刚介绍了 SVG 中的形状 *变形*，其中形状从一种变化为另一种。让我们来看看形状如何彼此 Blob！您知道，像 表面上的水银液滴 一样的粘糊糊的 Blob 效果。

我不确定是谁最先发现这在网络上是可能的，但我第一次看到它是在 Lucas Bebber 的演示中。

查看 Pen Gooey Pagination by Lucas Bebber (@lbebber) on CodePen.

然后再次由 Felix Hornoiu （针对网络实用性的低帧率 GIF）

技巧很简单，使用 filter 为元素添加模糊和对比度

模糊显然使元素变得模糊，对比度对抗模糊，更倾向于颜色之间的明显变化。如果您对比度足够高，您将再次获得一个（相当）清晰的形状。

有趣的部分来自这样一个事实：当两个模糊（但被强制看起来不模糊）的元素彼此靠近时，它们的模糊会产生足够的模糊颜色对比度，使形状看起来实际上连接在一起。

我发现，如果模糊形状但为整个区域添加对比度，则更容易使用。喜欢

.stage {
  /* must be explicit, for contrast to work */
  background: white;
  
  /* weirdness happens when edges hit, also consider hiding overflow */
  padding: 30px;
  
  -webkit-filter: contrast(20);
  filter: contrast(20);
}
.dot {
  border-radius: 50%;
  width: 50px;
  height: 50px;

  /* needs to be very contrasty color. E.g. light gray on white won't work */
  background: black;

  -webkit-filter: blur(15px);
  filter: blur(15px);
}

然后，当您添加动画来 blob 这些吸盘时，就会发生乐趣。这是一个您可以使用值进行操作的演示，包括影响模糊度的亮度

查看 Pen Blobbing Playground by Chris Coyier (@chriscoyier) on CodePen.

浏览器支持

不再只是 WebKit/Blink！Firefox 35 将支持过滤器，无需任何标志或其他任何东西。Aurora，他们的 beta-beta，目前处于 v35 版本，我在其中打开它，效果很好。

所以……当前的 Chrome / Safari / Opera / Firefox / iOS / Android。还不错。只是没有 IE。

对惊叹之事的预测

不实用！！！去睡觉吧。

它让我的风扇疯狂旋转！！！是的，我的演示中有大量的元素在交互，也让我的 CPU 非常繁忙。但是，只有两个圆圈互相碰撞的更轻松的演示就很好。使用决策技能。

有更好的方法来做这个！！！很棒。