CSS滤镜模糊和对比度用于创建粘稠效果

Question

在这个示例中，CSS滤镜好像无法产生粘稠效果。我使用了filter: blur(10px) contrast(30);，但只显示模糊效果。我希望结果是糊状的。

- John McLane

Answer 1

您可以通过以下方式实现：filter: blur(10px) contrast(30);。您需要在容器中添加background:white;。此外，你需要在容器的边界和圆之间增加一些额外的空间，所以我已经添加了padding:100px;

body {
  width: 100vw; height: 100vh;
  display: grid;
  place-items: center;
}
.container {
  display: flex;
  flex-direction: column;
  background:white;
  padding:100px;
  filter: blur(15px) contrast(30);  
}

.circle {
  width: 100px; height: 100px;
  background-color: red;
  /* border-radius: 100%;*/
}

.circle-1 {
  border-radius: 50%;
  /* top: 50px;
     border: 5px solid black;*/
  transform: translateY(20px);
}
.circle-2 {
 border-radius: 95% 5% 70% 30% / 52% 30% 70% 48% ;
   transform: rotateY(-180deg);
}

<div class="container">
  <div class="circle circle-1"></div>
<div class="circle circle-2"></div>
</div>

请阅读文章：Gooey效果 - Lucas Bebber

- enxaneta

---

感谢您提供有趣的答案和有用的链接。 - Alexandr_TT

谢谢你的回答。我想我错误地在CodePen上编辑了同一个链接。对此很抱歉 ;) - John McLane

Answer 2

好的，你提供的链接已经失效了，但是如果我猜对了的话，你应该使用透明的背景颜色！类似这样的代码：background-image: <image>, rgba(<color>, <transparency>);

- SoroushOwji