css球形立体圈旋转效果-html代码-BFW代码库

css球形立体圈旋转效果

代码语言：html

所属分类：动画

代码描述：css球形立体圈旋转效果

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

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

<style>
body {
  overflow: hidden;
  background: #5c5757;
}

div {
  position: absolute;
}

.a3d {
  --ay: 0deg;
  --az: 0deg;
  --lim: calc(.5*(var(--p) - 1));
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: rotatey(var(--ay)) rotate(var(--az));
  animation: az 9s linear infinite, ay 9s cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite;
}

.dot {
  --abs-idx: max(calc(var(--lim) - var(--idx)), calc(var(--idx) - var(--lim)));
  --sgn-idx: calc(var(--abs-idx)/(var(--idx) - var(--lim)));
  --d: calc(3px + var(--abs-idx)/var(--p)*2em);
  --a: calc(var(--k)*1turn/var(--m));
  --x: calc(var(--abs-idx)*2*2em/var(--m));
  --z: calc((var(--idx) - var(--lim))*2*2em/var(--m));
  margin: calc(-.5*var(--d));
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  transform: scalex(var(--sgn-idx)) rotate(var(--a)) translate3d(var(--x), 0, var(--z)) rotate(calc(-1*var(--a))) scalex(var(--sgn-idx)) rotate(calc(-1*var(--az))) rotatey(calc(-1*var(--ay)));
  background: radial-gradient(circle at 35% 35%, #fff, hsl(calc((1 - calc(var(--idx)/var(--p)))*37 + calc(var(--idx)/var(--p))*221), calc((1 - calc(var(--idx)/var(--p)))*100% + calc(var(--idx)/var(--p))*79%), calc((1 - calc(var(--idx)/var(--p)))*42% + calc(var(--idx)/var(--p))*63%)) 65%);
}

@keyframes ay {
  0%, 15% {
    --ay: 1turn ;
  }
  50%, 65% {
    --ay: .5turn ;
  }
}
@keyframes az {
  to {
    --az: 1turn ;
  }
}
</style>

</head>
<body translate="no">
<style>.a3d { --m: 24; --p: 241 }.dot:nth-child(24n + 1) { --k: 0 }.dot:nth-child(24n + 2) { --k: 1 }.dot:nth-child(24n + 3) { --k: 2 }.dot:nth-child(24n + 4) { --k: 3 }.dot:nth-child(24n + 5) { --k: 4 }.dot:nth-child(24n + 6) { --k: 5 }.dot:nth-child(24n + 7) { --k: 6 }.dot:nth-child(24n + 8) { --k: 7 }.dot:nth-child(24n + 9) { --k: 8 }.dot:nth-child(24n + 10) { --k: 9 }.dot:nth-child(24n + 11) { --k: 10 }.dot:nth-child(24n + 12) { --k: 11 }.dot:nth-child(24n + 13) { --k: 12 }.dot:nth-child(24n + 14) { --k: 13 }.dot:nth-child(24n + 15) { --k: 14 }.dot:nth-child(24n + 16) { --k: 15 }.dot:nth-child(24n + 17) { --k: 16 }.dot:nth-child(24n + 18) { --k: 17 }.dot:nth-child(24n + 19) { --k: 18 }.dot:nth-child(24n + 20) { --k: 19 }.dot:nth-child(24n + 21) { --k: 20 }.dot:nth-child(24n + 22) { --k: 21 }.dot:nth-child(24n + 23) { --k: 22 }.dot:nth-child(24n + 24) { --k: 23 }
</style>
<div class="a3d">
<div class="dot" style="--idx: 240"></div>
<div class="dot" style="--idx: 239"></div>
<div class="dot" style="--idx: 238"></div>
<div class="dot" style="--idx: 237"></div>
<div class="dot" style="--idx: 236"></div>
<div class="dot" style="--idx: 235"></div>
<div class="dot" style="--idx: 234"></div>
<div class="dot" style="--idx: 233"></div>
<div class="dot" style="--idx: 232"></div>
<div class="dot" style="--idx: 231"></div>
<div class="dot" style="--idx: 230"></div>
<div class="dot" style="--idx: 229"></div>
<div class="dot" st.........完整代码请登录后点击上方下载按钮下载查看