使用CSS+SVG实现加载动画

效果展示

CSS知识点

• SVG元素使用
• SVG相关CSS属性运用

整体页面布局

<section>
 <div class="box">
    <div class="loader">
      <svg>
        <circle cx="40" cy="40" r="40"></circle>
      </svg>
    </div>
  </div>
  <div class="box">
    <div class="loader">
      <svg>
        <circle cx="40" cy="40" r="40"></circle>
      </svg>
    </div>
  </div>
  <div class="box">
    <div class="loader">
      <svg>
        <circle cx="40" cy="40" r="40"></circle>
      </svg>
    </div>
  </div>
</section>

说明：这里定义了三个 box 元素，其中两个 box 主要是实现阴影效果。

定义场景样式和相关动画

section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #072631;
  animation: animateBg 10s linear infinite;
}
/* 背景颜色改变动画 */
@keyframes animateBg {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

定义 svg 和 circle 元素样式

svg {
  position: relative;
  width: 90px;
  height: 90px;
  z-index: 1000;
}
svg circle {
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 10;
  stroke: #25e6ff;
  stroke-linecap: round;
  transform: translate(5px, 5px);
  stroke-dasharray: 250;
  stroke-dashoffset: 249;
}

完成上述代码后效果如下：

为 svg 和 circle 元素添加动画

svg {
  animation: fixAnimation 2s ease-in-out infinite;
}
/* SVG元素主要是负责 */
@keyframes fixAnimation {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(0deg);
  }
  50.00000001%,
  100% {
    transform: rotateY(181deg);
  }
}
svg circle {
  animation: animate 2s ease-in-out infinite;
}
/* 实现加载动画，动画实现的时候开始和结束进度设置为对称，这样动画执行的时候会比较平滑 */
@keyframes animate {
  0%,
  2% {
    stroke-dashoffset: 249;
  }
  50% {
    stroke-dashoffset: 125;
  }
  99%,
  100% {
    stroke-dashoffset: 249;
  }
}

实现上述效果后如下：

对三个 box 元素进行样式处理

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  display: flex;
  justify-content: center;
  /* 倒影效果 */
  -webkit-box-reflect: below -80px linear-gradient(transparent, #0004);
}
.box:nth-child(2) {
  filter: blur(10px);
}

.box:nth-child(3) {
  filter: blur(20px);
}

实现上述效果后，基本可以考到最终效果动画，但是后续还有一些动画需要处理。

加载动画进行旋转

.loader {
  animation: positionX 2s linear infinite;
}

@keyframes positionX {
  0% {
    transform: rotate(180deg) translateX(-40px);
  }
  100% {
    transform: rotate(180deg) translateX(40px);
  }
}

完整代码下载

完整代码下载