css+div实现霓虹灯环与小球旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:css+div实现霓虹灯环与小球旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { min-height: 100vh; display: grid; place-items: center; perspective: 600px; overflow: hidden; background-image: radial-gradient(circle, #123, #000 30em); } body *:not(:empty) { transform-style: preserve-3d; } .scene { position: relative; } .ball { position: absolute; inset: -8em; background-image: radial-gradient(circle at top, #fff, #000); border-radius: 50%; box-shadow: 0 0 2em #000a; } .ring { position: absolute; } .ring i { position: absolute; border: 1px solid hsl(var(--hue), 100%, 75%); box-shadow: 0 0 1em hsl(var(--hue), 100%, 75%) inset, 0 0 1em hsl(var(--hue), 100%, 75%); border-radius: 50%; -webkit-animation: iMove 24s var(--delay) infinite both linear, iScale 24s var(--delay) infinite both cubic-bezier(0.3642, 0, 0.6358, 1); animation: iMove 24s var(--delay) infinite both linear, iScale 24s var(--delay) infinite both cubic-bezier(0.3642, 0, 0.6358, 1); } .ring i:nth-child(1) { --delay: 0s; --hue: 0; --rx: 22deg; --ry: 205deg; --rz: 264deg; } .ring i:nth-child(2) { --delay: -0.75s; --hue: 98; --rx: 137deg; --ry: 318deg; --rz: 192deg; } .ring i:nth-child(3) { --delay: -1.5s; --hue: 196; --rx: 136deg; --ry: 280deg; --rz: 226deg; } .ring i:nth-child(4) { --delay: -2.25s; --hue: 294; --rx: 145deg; --ry: 115deg; --rz: 113deg; } .ring i:nth-child(5) { --delay: -3s; --hue: 392; --rx: 224deg; --ry: 151deg; --rz: 165deg; } .ring i:nth-child(6) { --delay: -3.75s; --hue: 490; --rx: 29deg; --ry: 259deg; --rz: 232deg; } .ring i:nth-child(7) { --delay: -4.5s; --hue: 588; --rx: 322deg; --ry: 48deg; --rz: 113deg; } .ring i:nth-child(8) { --delay: -5.25s; --hue: 686; --rx: 149deg; --ry: 269deg; --rz: 117deg; } .ring i:nth-child(9) { --delay: -6s; --hue: 784; --rx: 106deg; --ry: 205deg; --rz: 160deg; } .ring i:nth-child(10) { --delay: -6.75s; --hue: 882; --rx: 337deg; --ry: 35deg; --rz: 186deg; } .ring i:nth-child(11) { --delay: -7.5s; --hue: 980; --rx: 305deg; --ry: 58deg; --rz: 111deg; } .ring i:nth-child(12) { --delay: -8.25s; --hue: 1078; --rx: 260deg; --ry: 241deg; --rz: 331deg; } .ring i:nth-child(13) { --delay: -9s; --hue: 1176; --rx: 143deg; --ry: 245deg; --rz: 150deg; } .ring i:nth-child(14) { --delay: -9.75s; --hue: 1274; --rx: 197deg; --ry: 111deg; --rz: 306deg; } .ring i:nth-child(15) { --delay: -10.5s; --hue: 1372; --rx: 42deg; --ry: 326deg; --rz: 127deg; } .ring i:nth-child(16) { --delay: -11.25s; --hue: 1470; --rx: 348deg; --ry: 130deg; --rz: 87deg; } .ring i:nth-child(17) { --delay: -12s; --hue: 1568; --rx: 292deg; --ry: 180deg; --rz: 290deg; } .ring i:nth-child(18) { --delay: -12.75s; --hue: 1666; --rx: 355deg; --ry: 285deg; --rz: 333deg; } .ring i:nth-child(19) { --delay: -13.5s; --hue: 1764; --rx: 271deg; --ry: 316deg; --rz: 272deg; } .ring i:nth-child(20) { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0