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>
<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>.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0