svg+css实现火热loading加载动画效果代码-html代码-BFW代码库

svg+css实现火热loading加载动画效果代码

代码语言：html

代码描述：svg+css实现火热loading加载动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  
  
  
<style>
* {
  border: 0;
  box-sizing: 0;
  margin: 0;
  padding: 0;
}

:root {
  font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
}

body {
  background: #17181c;
  display: grid;
  place-items: center;
  font: 1em/1.5 sans-serif;
  height: 100vh;
}

.pl {
  width: 8em;
  height: 8em;
}
.pl circle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.pl__ring1 {
  animation: ring1 4s 0s ease-in-out infinite;
}
.pl__ring2 {
  animation: ring2 4s 0.04s ease-in-out infinite;
}
.pl__ring3 {
  animation: ring3 4s 0.08s ease-in-out infinite;
}
.pl__ring4 {
  animation: ring4 4s 0.12s ease-in-out infinite;
}
.pl__ring5 {
  animation: ring5 4s 0.16s ease-in-out infinite;
}
.pl__ring6 {
  animation: ring6 4s 0.2s ease-in-out infinite;
}

/* Animations */
@keyframes ring1 {
  from {
    stroke-dashoffset: -376.237129776;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }
  23% {
    stroke-dashoffset: -94.247778;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }
  46%, 50% {
    stroke-dashoffset: -376.237129776;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }
  73% {
    stroke-dashoffset: -94.247778;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }
  96%, to {
    stroke-dashoffset: -376.237129776;
    transform: rotate(4.75turn);
  }
}
@keyframes ring2 {
  from {
    stroke-dashoffset: -329.207488554;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }
  23% {
    stroke-dashoffset: -82.46680575;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }
  46%, 50% {
    stroke-dashoffset: -329.207488554;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }
  73% {
    stroke-dashoffset: -82.46680575;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }
  96%, to {
    stroke-dashoffset: -329.207488554;
    transform: rotate(4.75turn);
  }
}
@keyframes ring3 {
  from {
    stroke-dashoffset: -288.4484661616;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }
  23% {
    stroke-dashoffset: -72.2566298;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }
  46%, 50% {
    stroke-dashoffset: -288.4484661616;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }
  73% {
    stroke-dashoffset: -72.2566298;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }
  96%, to {
    stroke-dashoffset: -288.4484661616;
    transform: rotate(4.75turn);
  }
}
@keyframes ring4 {
  from {
    stroke-dashoffset: -253.9600625988;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }
  23% {
    stroke-dashoffset: -63.61725015;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }
  46%, 50% {
    stroke-dashoffset: -253.9600625988;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }
  73% {
    stroke-dashoffset: -63.61725015;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }
  96%, to {
    stroke-dashoffset: -253.9600625988;
  .........完整代码请登录后点击上方下载按钮下载查看