css实现炫酷loading加载动画效果代码-html代码-BFW代码库

css实现炫酷loading加载动画效果代码

代码语言：html

代码描述：css实现炫酷loading加载动画效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
    body {
  background: #000;
}

div {
  position: absolute;
}

.a {
  top: 50%;
  left: 50%;
  animation: r 2s linear infinite;
}

@keyframes r {
  to {
    transform: rotate(1turn);
  }
}
.dir {
  transform: rotate(calc(var(--i)*1turn/var(--n)));
}

.spark {
  overflow: hidden;
  position: absolute;
  margin: -0.25em;
  width: 10em;
  height: 0.5em;
  border-radius: 0.25em;
  animation: mov-out 1s ease-out calc((var(--i)*var(--j))*-1s/(var(--n)*var(--m))) infinite alternate;
  mix-blend-mode: color-burn;
}
.spark:before {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 0.25em;
  background: var(--c);
  animation: inherit;
  animation-name: mov-in;
  animation-duration: 0.5s;
  content: "";
}

@keyframes mov-out {
  0%, 10% {
    transform: translate(-9.5em);
  }
  90%, 100% {
    transform: none;
  }
}
@keyframes mov-in {
  0%, 20% {
    transform: translate(9.5em);
  }
  80%, 100% {
    transform: translate(8.55em);
  }
}
</style>
</head>


<body style="--n: 12; --m: 5;">
    <style>
        .spark:nth-child(1){--j:0;--c:#85A29E;}.spark:nth-child(2){--j:1;--c:#FFEBBF;}.spark:nth-child(3){--j:2;--c:#F0D442;}.spark:nth-child(4){--j:3;--c:#F59330;}.spark:nth-child(5){--j:4;--c:#B22148;}
    </style>
    <div class="a">
        <div class="dir" style="--i: 11;">
            <div class="spark"></div>
            <div class="spark"></div>
            <div class="spark"></div>
            <div class="spark"></div>
            <div class="spark"></div>
        </div>
        <div class="dir" style="--i: 10;">
            <div class="spark"></div>
            <div class="spark"></div>
            <div class="spark"></div>
            <div class="spark"></div>
            <div class="spark"></div>
        </div>
        <div class="dir" style="--i: 9;">
            <div class="spark"></div>
            <div class="spark"></div>
            <div class="spark"></div>
            <div class="spark"></div>
            <div class="spark"></div>
        </div>
        <div class="dir" style="--i: 8;">
            <div class="spark"></div>
            <div class="spark"></div>
            <div class="spark"></div>
            <div class="spark"></div>
            <div class="spark"></div>
        </div>
        <div class="dir" style="--i: 7;">
     .........完整代码请登录后点击上方下载按钮下载查看