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" style="--idx: 228"></div>
<div class="dot" style="--idx: 227"></div>
<div class="dot" style="--idx: 226"></div>
<div class="dot" style="--idx: 225"></div>
<div class="dot" style="--idx: 224"></div>
<div class="dot" style="--idx: 223"></div>
<div class="dot" style="--idx: 222"></div>
<div class="dot" style="--idx: 221"></div>
<div class="dot" style="--idx: 220"></div>
<div class="dot" style="--idx: 219"></div>
<div class="dot" style="--idx: 218"></div>
<div class="dot" style="--idx: 217"></div>
<div class="dot" style="--idx: 216"></div>
<div class="dot" style="--idx: 215"></div>
<div class="dot" style="--idx: 214"></div>
<div class="dot" style="--idx: 213"></div>
<div class="dot" style="--idx: 212"></div>
<div class="dot" style="--idx: 211"></div>
<div class="dot" style="--idx: 210"></div>
<div class="dot" style="--idx: 209"></div>
<div class="dot" style="--idx: 208"></div>
<div class="dot" style="--idx: 207"></div>
<div class="dot" style="--idx: 206"></div>
<div class="dot" style="--idx: 205"></div>
<div class="dot" style="--idx: 204"></div>
<div class="dot" style="--idx: 203"></div>
<div class="dot" style="--idx: 202"></div>
<div class="dot" style="--idx: 201"></div>
<div class="dot" style="--idx: 200"></div>
<div class="dot" style="--idx: 199"></div>
<div class="dot" style="--idx: 198"></div>
<div class="dot" style="--idx: 197"></div>
<div class="dot" style="--idx: 196"></div>
<div class="dot" style="--idx: 195"></div>
<div class="dot" style="--idx: 194"></div>
<div class="dot" style="--idx: 193"></div>
<div class="dot" style="--idx: 192"></div>
<div class="dot" style="--idx: 191"></div>
<div class="dot" style="--idx: 190"></div>
<div class="dot" style="--idx: 189"></div>
<div class="dot" style="--idx: 188"></div>
<div class="dot" style="--idx: 187"></div>
<div class="dot" style="--idx: 186"></div>
<div class="dot" style="--idx: 185"></div>
<div class="dot" style="--idx: 184"></div>
<div class="dot" style="--idx: 183"></div>
<div class="dot" style="--idx: 182"></div>
<div class="dot" style="--idx: 181"></div>
<div class="dot" style="--idx: 180"></div>
<div class="dot" style="--idx: 179"></div>
<div class="dot" style="--idx: 178"></div>
<div class="dot" style="--idx: 177"></div>
<div class="dot" style="--idx: 176"></div>
<div class="dot" style="--idx: 175"></div>
<div class="dot" style="--idx: 174"></div>
<div class="dot" style="--idx: 173"></div>
<div class="dot" style="--idx: 172"></div>
<div class="dot" style="--idx: 171"></div>
<div class="dot" style="--idx: 170"></div>
<div class="dot" style="--idx: 169"></div>
<div class="dot" style="--idx: 168"></div>
<div class="dot" style="--idx: 167"></div>
<div class="dot" style="--idx: 166"></div>
<div class="dot" style="--idx: 165"></div>
<div class="dot" style="--idx: 164"></div>
<div class="dot" style="--idx: 163"></div>
<div class="dot" style="--idx: 162"></div>
<div class="dot" style="--idx: 161"></div>
<div class="dot" style="--idx: 160"></div>
<div class="dot" style="--idx: 159"></div>
<div class="dot" style="--idx: 158"></div>
<div class="dot" style="--idx: 157"></div>
<div class="dot" style="--idx: 156"></div>
<div class="dot" style="--idx: 155"></div>
<div class="dot" style="--idx: 154"></div>
<div class="dot" style="--idx: 153"></div>
<div class="dot" style="--idx: 152"></div>
<div class="dot" style="--idx: 151"></div>
<div class="dot" style="--idx: 150"></div>
<div class="dot" style="--idx: 149"></div>
<div class="dot" style="--idx: 148"></div>
<div class="dot" style="--idx: 147"></div>
<div class="dot" style="--idx: 146"></div>
<div class="dot" style="--idx: 145"></div>
<div class="dot" style="--idx: 144"></div>
<div class="dot" style="--idx: 143"></div>
<div class="dot" style="--idx: 142"></div>
<div class="dot" style="--idx: 141"></div>
<div class="dot" style="--idx: 140"></div>
<div class="dot" style="--idx: 139"></div>
<div class="dot" style="--idx: 138"></div>
<div class="dot" style="--idx: 137"></div>
<div class="dot" style="--idx: 136"></div>
<div class="d.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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