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: transl.........完整代码请登录后点击上方下载按钮下载查看