这个设计可以只用 CSS 做吗？ [关闭]

Posted 2023-03-06

【中文标题】这个设计可以只用 CSS 做吗？ [关闭]

【英文标题】：Can this design be made with just CSS? [closed]

【发布时间】：2019-08-12 02:26:47

【问题描述】：

https://i.imgur.com/D69glPV.png - 我正在尝试使用 CSS/html 创建这个设计。我最初的想法是创建一个白色的“波浪”容器，用 SVG 形状包裹图标，但我想知道你是否真的可以只用 CSS 来制作它？你们将如何处理这个问题？ :)

【问题讨论】：

***.com/questions/55276941/…的可能重复

【参考方案1】：

你这样做的方式是使用 SVG 过滤器： SVG goo on Codepen

您也可能想阅读此The Gooey Effect

最重要的是定义一个goo 过滤器。接下来绘制几个圆圈 (border-radius:50%;) 并应用 svg 过滤器。

SVG 元素的大小无关紧要，您可以将其隐藏起来。

bodybackground:skyBlue;
svgposition:absolute;left:-10em;
.wrap 
  
  display: block;
  margin:0 auto;
  width: 300px;
  height: 260px;
  position: relative;
  filter:url(#goo);

.wrap div 
  
  position: absolute;
  left: 0px;
  top: 90px;
  height: 80px;
  width: 80px;
  border-radius:50%;
  background-color: white;
  color:red;
  text-align:center;
  line-height:80px;


.wrap div:nth-child(2)
  left: 90px;

.wrap div:nth-child(3)
  left: 180px;

<svg   >
<defs>
<filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" 
                     values="1 0 0  0   0  
                             0 1 0  0   0  
                             0 0 1  0   0  
                             0 0 0 40  -10" result="goo"/>
      <feBlend in="SourceGraphic" in2="goo" />
    </filter> 
  </defs>
</svg>


<div class ="wrap">
<div>A</div>
<div>B</div> 
<div>C</div> 
</div>

【讨论】：

谢谢，这正是我所需要的。但是，在项目/元素之间留出更多空间的正确方法是什么 - 我需要在过滤器中还是使用 CSS 来指定？ :)

在这种情况下，您可能希望增加feGaussianBlur 的stdDeviation 并增加feColorMatrix 的alpha alpha 值（本例中为40）。但是，如果您需要这些项目彼此远离，则需要考虑将其绘制为 SVG 形状