css布局实现三维圆球涡旋动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：css布局实现三维圆球涡旋动画效果代码

下面为部分代码预览，完整代码请点击下载或在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{background-color:#111;color:#fff;min-height:100vh;display:grid;place-items:center}
        body {
          font-size: 100px;
          overflow: hidden;
          perspective: 3000px;
        }
        
        .vortex {
          position: relative;
          transform: rotateX(60deg);
          transform-style: preserve-3d;
        }
        
        .ball {
          position: absolute;
          width: 1em;
          height: 1em;
          border-radius: 50%;
          transform-origin: bottom;
          transform-style: preserve-3d;
          background-image: radial-gradient(circle at top, hsl(var(--hue, 0), 100%, 75%), hsl(var(--hue, 0), 100%, 0%));
          -webkit-animation: dot 60s var(--delay) infinite;
                  animation: dot 60s var(--delay) infinite;
        }
        @-webkit-keyframes dot {
          0% {
            transform: translate(-50%, -50%) rotateZ(var(--angle)) translateX(10em) rotateZ(calc(var(--angle) * -1)) rotateX(-60deg) scale(0);
            -webkit-animation-timing-function: ease-in;
                    animation-timing-function: ease-in;
          }
          80% {
            transform: translate(-50%, -50%) rotateZ(var(--angle)) translateX(2em) rotateZ(calc(var(--angle) * -1)) rotateX(-60deg) scale(1);
            -webkit-animation-timing-function: ease-out;
                    animation-timing-function: ease-out;
          }
          100% {
            transform: translate(-50%, -50%) rotateZ(var(--angle)) translateX(0em) rotateZ(calc(var(--angle) * -1)) rotateX(-60deg) scale(0);
          }
        }
        @keyframes dot {
          0% {
            transform: translate(-50%, -50%) rotateZ(var(--angle)) translateX(10em) rotateZ(calc(var(--angle) * -1)) rotateX(-60deg) scale(0);
            -webkit-animation-timing-function: ease-in;
                    animation-timing-function: ease-in;
          }
          80% {
            transform: translate(-50%, -50%) rotateZ(var(--angle)) translateX(2em) rotateZ(calc(var(--angle) * -1)) rotateX(-60deg) scale(1);
            -webkit-animation-timing-function: ease-out;
                    animation-timing-function: ease-out;
          }
          100% {
            transform: translate(-50%, -50%) rotateZ(var(--angle)) translateX(0em) rotateZ(calc(var(--angle) * -1)) rotateX(-60deg) scale(0);
          }
        }
        .ball:nth-child(1) {
          --delay: 0s;
          --angle: 0deg;
          --hue: 0;
        }
        .ball:nth-child(2) {
          --delay: -0.234375s;
          --angle: -84.375deg;
          --hue: -1.40625;
        }
        .ball:nth-child(3) {
          --delay: -0.46875s;
          --angle: -168.75deg;
          --hue: -2.8125;
        }
        .ball:nth-child(4) {
          --delay: -0.703125s;
          --angle: -253.125deg;
          --hue: -4.21875;
        }
        .ball:nth-child(5) {
          --delay: -0.9375s;
          --angle: -337.5deg;
          --hue: -5.625;
        }
        .ball:nth-child(6) {
          --delay: -1.171875s;
          --angle: -421.875deg;
          --hue: -7.03125;
        }
        .ball:nth-child(7) {
          --delay: -1.40625s;
          --angle: -506.25deg;
          --hue: -8.4375;
        }
        .ball:nth-child(8) {
          --delay: -1.640625s;
          --angle: -590.625deg;
          --hue: -9.84375;
        }
        .ball:nth-child(9) {
          --delay: -1.875s;
          --angle: -675deg;
          --hue: -11.25;
        }
        .ball:nth-child(10) {
          --delay: -2.109375s;
          --angle: -759.375deg;
          --hue: -12.65625;
        }
        .ball:nth-child(11) {
          --delay: -2.34375s;
          --angle: -843.75deg;
          --hue: -14.0625;
        }
        .ball:nth-child(12) {
          --delay: -2.578125s;
          --angle: -928.125deg;
          --hue: -15.46875;
        }
        .ball:nth-child(13) {
          --delay: -2.8125s;
          --angle: -1012.5deg;
          --hue: -16.875;
        }
        .ball:nth-child(14) {
          --delay: -3.046875s;
          --angle: -1096.875deg;
          --hue: -18.28125;
        }
        .ball:nth-child(15) {
          --delay: -3.28125s;
          --angle: -1181.25deg;
          --hue: -19.6875;
        }
        .ball:nth-child(16) {
          --delay: -3.515625s;
          --angle: -1265.625deg;
          --hue: -21.09375;
        }
        .ball:nth-child(17) {
          --delay: -3.75s;
          --angle: -1350deg;
          --hue: -22.5;
        }
        .ball:nth-child(18) {
          --delay: -3.984375s;
          --angle: -1434.375deg;
          --hue: -23.90625;
        }
        .ball:nth-child(19) {
          --delay: -4.21875s;
          --angle: -1518.75deg;
          --hue: -25.3125;
        }
        .ball:nth-child(20) {
          --delay: -4.453125s;
          --angle: -1603.125deg;
          --hue: -26.71875;
        }
        .ball:nth-child(21) {
          --delay: -4.6875s;
          --angle: -1687.5deg;
          --hue: -28.125;
        }
        .ball:nth-child(22) {
          --delay: -4.921875s;
          --angle: -1771.875deg;
          --hue: -29.53125;
        }
        .ball:nth-child(23) {
          --delay: -5.15625s;
          --angle: -1856.25deg;
          --hue: -30.9375;
        }
        .ball:nth-child(24) {
          --delay: -5.390625s;
          --angle: -1940.625deg;
          --hue: -32.34375;
        }
        .ball:nth-child(25) {
          --delay: -5.625s;
          --angle: -2025deg;
          --hue: -33.75;
        }
        .ball:nth-child(26) {
          --delay: -5.859375s;
          --angle: -2109.375deg;
          --hue: -35.15625;
        }
        .ball:nth-child(27) {
          --delay: -6.09375s;
          --angle: -2193.75deg;
          --hue: -36.5625;
        }
        .ball:nth-child(28) {
          --delay: -6.328125s;
          --angle: -2278.125deg;
          --hue: -37.96875;
        }
        .ball:nth-child(29) {
          --delay: -6.5625s;
          --angle: -2362.5deg;
          --hue: -39.375;
        }
        .ball:nth-child(30) {
          --delay: -6.796875s;
          --angle: -2446.875deg;
          --hue: -40.78125;
        }
        .ball:nth-child(31) {
          --delay: -7.03125s;
          --angle: -2531.25deg;
          --hue: -42.1875;
        }
        .ball:nth-child(32) {
          --delay: -7.265625s;
          --angle: -2615.625deg;
          --hue: -43.59375;
        }
        .ball:nth-child(33) {
          --delay: -7.5s;
          --angle: -2700deg;
          --hue: -45;
        }
        .ball:nth-child(34) {
          --delay: -7.734375s;
          --angle: -2784.375deg;
          --hue: -46.40625;
        }
        .ball:nth-child(35) {
          --delay: -7.96875s;
          --angle: -2868.75deg;
          --hue: -47.8125;
        }
        .ball:nth-child(36) {
          --delay: -8.203125s;
          --angle: -2953.125deg;
          --hue: -49.21875;
        }
        .ball:nth-child(37) {
          --delay: -8.4375s;
          --angle: -3037.5deg;
          --hue: -50.625;
        }
        .ball:nth-child(38) {
          --delay: -8.671875s;
          --angle: -3121.875deg;
          --hue: -52.03125;
        }
        .ball:nth-child(39) {
          --delay: -8.90625s;
          --angle: -3206.25deg;
          --hue: -53.4375;
        }
        .ball:nth-child(40) {
          --delay: -9.140625s;
          --angle: -3290.625deg;
          --hue: -54.84375;
        }
        .ball:nth-child(41) {
          --delay: -9.375s;
          --angle: -3375deg;
          --hue: -56.25;
        }
        .ball:nth-child(42) {
          --delay: -9.609375s;
          --angle: -3459.375deg;
          --hue: -57.65625;
        }
        .ball:nth-child(43) {
          --delay: -9.84375s;
          --angle: -3543.75deg;
          --hue: -59.0625;
        }
        .ball:nth-child(44) {
          --delay: -10.078125s;
          --angle: -3628.125deg;
          --hue: -60.46875;
        }
        .ball:nth-child(45) {
          --delay: -10.3125s;
          --angle: -3712.5deg;
          --hue: -61.875;
        }
        .ball:nth-child(46) {
          --delay: -10.546875s;
   .........完整代码请登录后点击上方下载按钮下载查看