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> <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