css+html<粘性气泡小球效果>

知识点：

1.sass @for样式遍历简写方式

@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}

//实际编译后
.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

2.sass random()获取随机数，定义随机的宽，高，左偏移量，上偏移量。

.item{
    $width: random(200) + px;
    left: #{(random(100)) + "%"};
    top: #{(random(100))}px;
    width: $width;
    height: $width;
}

3.svg 滤镜效果，喜欢的可自行百度去深入了解，这里直接给大家提供现成的

• shadowed-goo 是携带阴影的
• goo 是不携带阴影的

//使用引入
.item{ filter: url("#goo"); }

    <svg style="width: 0; height: 0">
      <defs>
       <filter id="shadowed-goo">
          <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
          <feColorMatrix
            in="blur"
            mode="matrix"
            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
            result="goo"
          />
          <feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
          <feColorMatrix
            in="shadow"
            mode="matrix"
            values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 -0.2"
            result="shadow"
          />
          <feOffset in="shadow" dx="1" dy="1" result="shadow" />
          <feBlend in2="shadow" in="goo" result="goo" />
          <feBlend in2="goo" in="SourceGraphic" result="mix" />
        </filter>
        <filter id="goo">
          <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="8" />
          <feColorMatrix
            in="blur"
            mode="matrix"
            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
            result="goo"
          />
          <feBlend in2="goo" in="SourceGraphic" result="mix" />
        </filter>
      </defs>
    </svg>

在线代码

对你有帮助的文章

使用纯 CSS 实现超酷炫的粘性气泡效果