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

代码语言:html

所属分类:动画

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

代码标签: 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>
  <div class="ac" style="--a:40"></div>
  <div class="ac" style="--a:41"></div>
  <div class="ac" style="--a:42"></div>
  <div class="ac" style="--a:43"></div>
  <div class="ac" style="--a:44"></div>
  <div class="ac" style="--a:45"></div>
  <div class="ac" style="--a:46"></div>
  <div class="ac" style="--a:47"></div>
  <div class="ac" style="--a:48"></div>
  <div class="ac" style="--a:49"></div>
  <div class="ac" style="--a:50"></div>
  <div class="ac" style="--a:51"></div>
  <div class="ac" style="--a:52"></div>
  <div class="ac" style="--a:53"></div>
  <div class="ac" style="--a:54"></div>
  <div class="ac" style="--a:55"></div>
  <div class="ac" style="--a:56"></div>
  <div class="ac" style="--a:57"></div>
  <div class="ac" style="--a:58"></div>
  <div class="ac" style="--a:59"></div>
  <div class="ac" style="--a:60"></div>
  <div class="ac" style="--a:61"></div>
  <div class="ac" style="--a:62"></div>
  <div class="ac" style="--a:63"></div>
  <div class="ac" style="--a:64"></div>
  <div class="ac" style="--a:65"></div>
  <div class="ac" style="--a:66"></div>
  <div class="ac" style="--a:67"></div>
  <div class="ac" style="--a:68"></div>
  <div class="ac" style="--a:69"></div>
  <div class="ac" style="--a:70"></div>
  <div class="ac" style="--a:71"></div>
  <div class="ac" style="--a:72"></div>
  <div class="ac" style="--a:73"></div>
  <div class="ac" style="--a:74"></div>
  <div class="ac" style="--a:75"></div>
  <div class="ac" style="--a:76"></div>
  <div class="ac" style="--a:77"></div>
  <div class="ac" style="--a:78"></div>
  <div class="ac" style="--a:79"></div>
  <div class="ac" style="--a:80"></div>
  <div class="ac" style="--a:81"></div>
  <div class="ac" style="--a:82"></div>
  <div class="ac" style="--a:83"></div>
  <div class="ac" style="--a:84"></div>
  <div class="ac" style="--a:85"></div>
  <div class="ac" style="--a:86"></div>
  <div class="ac" style="--a:87"></div>
  <div class="ac" style="--a:88"></div>
  <div class="ac" style="--a:89"></div>
  <div class="ac" style="--a:90"></div>
  <div class="ac" style="--a:91"></div>
  <div class="ac" style="--a:92"></div>
  <div class="ac" style="--a:93"></div>
  <div class="ac" style="--a:94"></div>
  <div class="ac" style="--a:95"></div>
  <div class="ac" style="--a:96"></div>
  <div class="ac" style="--a:97"></div>
  <div class="ac" style="--a:98"></div>
  <div class="ac" style="--a:99"></div>
  <div class="ac" style="--a:100"></div>
  <div class="ac" style="--a:101"></div>
  <div class="ac" style="--a:102"></div>
  <div class="ac" style="--a:103"></div>
  <div class="ac" style="--a:104"></div>
  <div class="ac" style="--a:105"></div>
  <div class="ac" style="--a:106"></div>
  <div class="ac" style="--a:107"></div>
  <div class="ac" style="--a:108"></div>
  <div class="ac" style="--a:109"></div>
  <div class="ac" style="--a:110"></div>
  <div class="ac" style="--a:111"></div>
  <div class="ac" style="--a:112"></div>
  <div class="ac" style="--a:113"></div>
  <div class="ac" style="--a:114"></div>
  <div class="ac" style="--a:115"></div>
  <div class="ac" style="--a:116"></div>
  <div class="ac" style="--a:117"></div>
  <div class="ac" style="--a:118"></div>
  <div class="ac" style="--a:119"></div>
  <div class="ac" style="--a:120"></div>
  <div class="ac" style="--a:121"></div>
  <div class="ac" style="--a:122"></div>
  <div class="ac" style="--a:123"></div>
  <div class="ac" style="--a:124"></div>
  <div class="ac" style="--a:125"></div>
  <div class="ac" style="--a:126"></div>
  <div class="ac" style="--a:127"></div>
  <div class="ac" style="--a:128"></div>
  <div class="ac" style="--a:129"></div>
  <div class="ac" style="--a:130"></div>
  <div class="ac" style="--a:131"></div>
  <div class="ac" style="--a:132"></div>
  <div class="ac" style="--a:133"></div>
  <div class="ac" style="--a:134"></div>
  <div class="ac" style="--a:135"></div>
  <div class="ac" style="--a:136"></div>
  <div class="ac" style="--a:137"></div>
  <div class="ac" style="--a:138"></div>
  <div class="ac" style="--a:139"></div>
  <div class="ac" style="--a:140"></div>
  <div class="ac" style="--a:141"></div>
  <div class="ac" style="--a:142"></div>
  <div class="ac" style="--a:143"></div>
  <div class="ac" style="--a:144"></div>
  <div class="ac" style="--a:145"></div>
  <div class="ac" style="--a:146"></div>
  <div class="ac" style="--a:147"></div>
  <div class="ac" style="--a:148"></div>
  <div class="ac" style="--a:149"></div>
  <div class="ac" style="--a:150"></div>
  <div class="ac" style="--a:151"></div>
  <div class="ac" style="--a:152"></div>
  <div class="ac" style="--a:153"></div>
  <div class="ac" style="--a:154"></div>
  <div class="ac" style="--a:155"></div>
  <div class="ac" style="--a:156"></div>
  <div class="ac" style="--a:157"></div>
  <div class="ac" style="--a:158"></div>
  <div class="ac" style="--a:159"></div>
  <div class="ac" style="--a:160"></div>
  <div class="ac" style="--a:161"></div>
  <div class="ac" style="--a:162"></div>
  <div class="ac" style="--a:163"></div>
  <div class="ac" style="--a:164"></div>
  <div class="ac" style="--a:165"></div>
  <div class="ac" style="--a:166"></div>
  <div class="ac" style="--a:167"></div>
  <div class="ac" style="--a:168"></div>
  <div cla.........完整代码请登录后点击上方下载按钮下载查看

网友评论0