拟液态加载器

news2024/9/22 9:51:16

效果展示

在这里插入图片描述

CSS 知识点

SVG 的 feGaussianBlur、feColorMatrix 属性运用
animation 属性运用
filter 联合 SVG 使用

整体页面结构

<div class="container">
  <h2>Milk</h2>
  <!-- 加载器的圆点部分 -->
  <div class="loader">
    <span style="--i: 0"></span>
    <span style="--i: 1"></span>
    <span style="--i: 2"></span>
    <span style="--i: 3"></span>
    <span style="--i: 4"></span>
    <span style="--i: 5"></span>
    <span style="--i: 6"></span>
    <span style="--i: 7"></span>
  </div>
</div>
<!-- SVG 链接各个圆点，形成拟液态部分的样式 -->
<svg>
  <filter id="Gooey">
    <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
    <feColorMatrix
      Values="
        1 0 0 0 0
        0 1 0 0 0
        0 0 1 0 0
        0 0 0 20 -10
      "
    />
  </filter>
</svg>

编写容器的样式

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container h2 {
  position: absolute;
  color: #fff;
  font-size: 1.75em;
  font-weight: 500;
}

编写加载器的圆点和圆点动画

.loader {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.25);
  filter: url(#Gooey);
}

.loader span {
  position: absolute;
  left: 0;
  transform-origin: 150px;
  width: 100px;
  height: 100px;
  background: #fff;
  border-radius: 50%;
  animation: animate 5s ease-in-out infinite;
  animation-delay: calc(0.15s * var(--i));
}

@keyframes animate {
  0%,
  10% {
    width: 100px;
    height: 100px;
    transform: rotate(0deg) translateX(120px);
  }
  40%,
  70% {
    width: 40px;
    height: 40px;
    transform: rotate(calc(360deg / 8 * var(--i)));
    box-shadow: 0 0 0 10px #fff;
  }
  90%,
  100% {
    width: 100px;
    height: 100px;
    transform: rotate(0deg) translateX(120px);
  }
}