div+css实现圆环螺旋旋转动画效果代码-html代码-BFW代码库

div+css实现圆环螺旋旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现圆环螺旋旋转动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
:root {
  --delay-offset: -1s;
}

.ac {
  --l: 10;
  --clr: hsl(calc(var(--a) * 360deg / var(--t) ) 75% calc(var(--l) * 6% + 15%));
  background-color: var(--clr);
  box-shadow: 0 0 0.5em var(--clr);
}

.cont {
  position: relative;
  width: 50vmin;
  height: 50vmin;
  border-radius: 100vmax;
  box-shadowa: 0 0 1em 0.5em #fff5, inset 0 0 1em 0.5em #fff5;
  animation: rot-cont infinite forwards linear 10s;
}

div {
  box-sizing: border-box;
  transform-style: preserve-3d;
}

.ac {
  --dist: 25vmin;
  position: absolute;
  width: 0.3em;
  height: 0.3em;
  top: 25vmin;
  left: 25vmin;
  border-radius: 100%;
  --x: calc(cos(calc(var(--a) * 360deg / var(--t))) * var(--dist));
  --y: calc(sin(calc(var(--a) * 360deg / var(--t))) * var(--dist));
  --z: 5em;
  opacity: 0;
  animation: rot linear 5s infinite forwards calc(var(--a) * var(--delay-offset));
}

@keyframes rot {
  from {
    opacity: 1;
    transform: rotatex(360deg) rotatey(360deg) rotatez(360deg) translatex(var(--x)) translatey(var(--y)) translatez(var(--z));
  }
  to {
    opacity: 1;
    transform: rotatex(0deg) rotatey(0deg) rotatez(0deg) translatex(var(--x)) translatey(var(--y)) translatez(var(--z));
  }
}
@keyframes rot-cont {
  from {
    transform: rotatex(0) rotatey(0) rotatez(0);
  }
  to {
    transform: rotatex(360) rotatey(-360) rotatez(720);
  }
}
body {
  display: grid;
  place-content: center;
  place-items: center;
  min-height: 100vh;
  margin: 0;
  perspective: 30em;
  background-image: radial-gradient(circle at center, #2E4755, #1f2020);
  color: #fefefe50;
}
</style>

  
</head>

<body translate="no">
  <div class="cont" style="--t:360">
  <div class="ac" style="--a:1"></div>
  <div class="ac" style="--a:2"></div>
  <div class="ac" style="--a:3"></div>
  <div class="ac" style="--a:4"></div>
  <div class="ac" style="--a:5"></div>
  <div class="ac" style="--a:6"></div>
  <div class="ac" style="--a:7"></div>
  <div class="ac" style="--a:8"></div>
  <div class="ac" style="--a:9"></div>
  <div class="ac" style="--a:10"></div>
  <div class="ac" style="--a:11"></div>
  <div class="ac" style="--a:12"></div>
  <div class="ac" style="--a:13"></div>
  <div class="ac" style="--a:14"></div>
  <div class="ac" style="--a:15"></div>
  <div class="ac" style="--a:16"></div>
  <div class="ac" style="--a:17"></div>
  <div class="ac" style="--a:18"></div>
  <div class="ac" style="--a:19"></div>
  <div class="ac" style="--a:20"></div>
  <div class="ac" style="--a:21"></div>
  <div class="ac" style="--a:22"></div>
  <div class="ac" style="--a:23"></div>
  <div class="ac" style="--a:24"></div>
  <div class="ac" style="--a:25"></div>
  <div class="ac" style="--a:26"></div>
  <div class="ac" style="--a:27"></div>
  <div class="ac" style="--a:28"></div>
  <div class="ac" style="--a:29"></div>
  <div class="ac" style="--a:30"></div>
  <div class="ac" style="--a:31"></div>
  <div class="ac" style="--a:32"></div>
  <div class="ac" style="--a:33"></div>
  <div class="ac" style="--a:34"></div>
  <div class="ac" style="--a:35"></div>
  <div class="ac" style="--a:36"></div>
  <div class="ac" style="--a:37"></div>
  <div class="ac" style="--a:38"></div>
  <div class="ac" style="--a:39"></div>.........完整代码请登录后点击上方下载按钮下载查看