纯css实现轨道运行loading加载效果-html代码-BFW代码库

纯css实现轨道运行loading加载效果

代码语言：html

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  margin: 0;
  height: 100vh;
  perspective-origin: 50% calc(50% - 2.5em);
  perspective: 35em;
  background: #121212;
}

div, :before {
  position: absolute;
  transform-style: preserve-3d;
}

.system {
  --ax: 10deg;
  top: 50%;
  left: 50%;
  transform: rotatex(calc(-1*var(--ax)));
}

.orbit {
  --r: calc(var(--f)*2em);
  --hsl: calc(var(--i)*360/var(--n)), 100%, 65%;
  --t: calc(3s + var(--i)*.75s);
  animation: rot var(--t) linear infinite;
}
.orbit:before {
  position: absolute;
  border: solid 4px rgba(255, 255, 255, 0.1);
  padding: calc(var(--r) - 1px);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotatex(-90deg);
  content: "";
}

@keyframes rot {
  to {
    transform: rotatey(1turn);
  }
}
.planet {
  --ay: calc(var(--j)/var(--m)*var(--a));
  transform: rotatey(var(--ay)) translatez(var(--r)) rotatey(calc(-1*var(--ay))) rotatex(var(--ax));
}
.planet:before {
  margin: -0.5em;
  padding: 0.5em;
  border-radius: 50%;
  background: radial-gradient(circle at 65% 35%, #fff, HSL(var(--hsl)));
  animation: rot var(--t) linear infinite reverse;
  content: "";
}
</style>

</head>
<body translate="no">
<style>.planet:nth-child(1) { --j: 0 }.planet:nth-child(2) { --j: 1 }.planet:nth-child(3) { --j: 2 }.planet:nth-child(4) { --j: 3 }.planet:nth-child(5) { --j: 4 }.planet:nth-child(6) { --j: 5 }.planet:nth-child(7) { --j: 6 }.planet:nth-child(8) { --j: 7 }.planet:nth-child(9) { --j: 8 }
</style>
<div class="system" style="--n: 6; --a: 90deg;">
<div class="orbit" style="--i: 0; --m: 3; --f: 3.7320508075688776;">
<div class="planet"></div>
<div class="planet"></div>
<div class="planet"></div>
</div>
<div class="orbit" st.........完整代码请登录后点击上方下载按钮下载查看