CSS滤镜模糊和对比度以获得粘糊糊的效果

时间:2019-11-03 12:38:57

标签: html css svg css-filters

在此example中,粘滞效应似乎不适用于CSS过滤器。我使用了filter: blur(10px) contrast(30);,但仅显示模糊效果。我希望结果成为一个粘糊糊的东西。

2 个答案:

答案 0 :(得分:2)

这可以通过以下方式完成: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>

请阅读以下文章:The Gooey Effect - Lucas Bebber

答案 1 :(得分:0)

好吧,您链接的页面不再有效,但是如果我猜对了,您应该使用透明的背景色!像background-image: <image>, rgba(<color>, <transparency>);