拟液态加载器

效果展示

CSS 知识点

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

整体页面结构

<div class="container">
  <h2>Milkh2>
  
  <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>
  <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);
  }
}

完整代码下载

完整代码下载