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;
          --angle: -3796.875deg;
          --hue: -63.28125;
        }
        .ball:nth-child(47) {
          --delay: -10.78125s;
          --angle: -3881.25deg;
          --hue: -64.6875;
        }
        .ball:nth-child(48) {
          --delay: -11.015625s;
          --angle: -3965.625deg;
          --hue: -66.09375;
        }
        .ball:nth-child(49) {
          --delay: -11.25s;
          --angle: -4050deg;
          --hue: -67.5;
        }
        .ball:nth-child(50) {
          --delay: -11.484375s;
          --angle: -4134.375deg;
          --hue: -68.90625;
        }
        .ball:nth-child(51) {
          --delay: -11.71875s;
          --angle: -4218.75deg;
          --hue: -70.3125;
        }
        .ball:nth-child(52) {
          --delay: -11.953125s;
          --angle: -4303.125deg;
          --hue: -71.71875;
        }
        .ball:nth-child(53) {
          --delay: -12.1875s;
          --angle: -4387.5deg;
          --hue: -73.125;
        }
        .ball:nth-child(54) {
          --delay: -12.421875s;
          --angle: -4471.875deg;
          --hue: -74.53125;
        }
        .ball:nth-child(55) {
          --delay: -12.65625s;
          --angle: -4556.25deg;
          --hue: -75.9375;
        }
        .ball:nth-child(56) {
          --delay: -12.890625s;
          --angle: -4640.625deg;
          --hue: -77.34375;
        }
        .ball:nth-child(57) {
          --delay: -13.125s;
          --angle: -4725deg;
          --hue: -78.75;
        }
        .ball:nth-child(58) {
          --delay: -13.359375s;
          --angle: -4809.375deg;
          --hue: -80.15625;
        }
        .ball:nth-child(59) {
          --delay: -13.59375s;
          --angle: -4893.75deg;
          --hue: -81.5625;
        }
        .ball:nth-child(60) {
          --delay: -13.828125s;
          --angle: -4978.125deg;
          --hue: -82.96875;
        }
        .ball:nth-child(61) {
          --delay: -14.0625s;
          --angle: -5062.5deg;
          --hue: -84.375;
        }
        .ball:nth-child(62) {
          --delay: -14.296875s;
          --angle: -5146.875deg;
          --hue: -85.78125;
        }
        .ball:nth-child(63) {
          --delay: -14.53125s;
          --angle: -5231.25deg;
          --hue: -87.1875;
        }
        .ball:nth-child(64) {
          --delay: -14.765625s;
          --angle: -5315.625deg;
          --hue: -88.59375;
        }
        .ball:nth-child(65) {
          --delay: -15s;
          --angle: -5400deg;
          --hue: -90;
        }
        .ball:nth-child(66) {
          --delay: -15.234375s;
          --angle: -5484.375deg;
          --hue: -91.40625;
        }
        .ball:nth-child(67) {
          --delay: -15.46875s;
          --angle: -5568.75deg;
          --hue: -92.8125;
        }
        .ball:nth-child(68) {
          --delay: -15.703125s;
          --angle: -5653.125deg;
          --hue: -94.21875;
        }
        .ball:nth-child(69) {
          --delay: -15.9375s;
          --angle: -5737.5deg;
          --hue: -95.625;
        }
        .ball:nth-child(70) {
          --delay: -16.171875s;
          --angle: -5821.875deg;
          --hue: -97.03125;
        }
        .ball:nth-child(71) {
          --delay: -16.40625s;
          --angle: -5906.25deg;
          --hue: -98.4375;
        }
        .ball:nth-child(72) {
          --delay: -16.640625s;
          --angle: -5990.625deg;
          --hue: -99.84375;
        }
        .ball:nth-child(73) {
          --delay: -16.875s;
          --angle: -6075deg;
          --hue: -101.25;
        }
        .ball:nth-child(74) {
          --delay: -17.109375s;
          --angle: -6159.375deg;
          --hue: -102.65625;
        }
        .ball:nth-child(75) {
          --delay: -17.34375s;
          --angle: -6243.75deg;
          --hue: -104.0625;
        }
        .ball:nth-child(76) {
          --delay: -17.578125s;
          --angle: -6328.125deg;
          --hue: -105.46875;
        }
        .ball:nth-child(77) {
          --delay: -17.8125s;
          --angle: -6412.5deg;
          --hue: -106.875;
        }
        .ball:nth-child(78) {
          --delay: -18.046875s;
          --angle: -6496.875deg;
          --hue: -108.28125;
        }
        .ball:nth-child(79) {
          --delay: -18.28125s;
          --angle: -6581.25deg;
          --hue: -109.6875;
        }
        .ball:nth-child(80) {
          --delay: -18.515625s;
          --angle: -6665.625deg;
          --hue: -111.09375;
        }
        .ball:nth-child(81) {
          --delay: -18.75s;
          --angle: -6750deg;
          --hue: -112.5;
        }
        .ball:nth-child(82) {
          --delay: -18.984375s;
          --angle: -6834.375deg;
          --hue: -113.90625;
        }
        .ball:nth-child(83) {
          --delay: -19.21875s;
          --angle: -6918.75deg;
          --hue: -115.3125;
        }
        .ball:nth-child(84) {
          --delay: -19.453125s;
          --angle: -7003.125deg;
          --hue: -116.71875;
        }
        .ball:nth-child(85) {
          --delay: -19.6875s;
          --angle: -7087.5deg;
          --hue: -118.125;
        }
        .ball:nth-child(86) {
          --delay: -19.921875s;
          --angle: -7171.875deg;
          --hue: -119.53125;
        }
        .ball:nth-child(87) {
          --delay: -20.15625s;
          --angle: -7256.25deg;
          --hue: -120.9375;
        }
        .ball:nth-child(88) {
          --delay: -20.390625s;
          --angle: -7340.625deg;
          --hue: -122.34375;
        }
        .ball:nth-child(89) {
          --delay: -20.625s;
          --angle: -7425deg;
          --hue: -123.75;
        }
        .ball:nth-child(90) {
          --delay: -20.859375s;
          --angle: -7509.375deg;
          --hue: -125.15625;
        }
        .ball:nth-child(91) {
          --delay: -21.09375s;
          --angle: -7593.75deg;
          --hue: -126.5625;
        }
        .ball:nth-child(92) {
          --delay: -21.328125s;
          --angle: -7678.125deg;
          --hue: -127.96875;
        }
        .ball:nth-child(93) {
          --delay: -21.5625s;
          --angle: -7762.5deg;
          --hue: -129.375;
        }
        .ball:nth-child(94) {
          --delay: -21.796875s;
          --angle: -7846.875deg;
          --hue: -130.78125;
        }
        .ball:nth-child(95) {
          --delay: -22.03125s;
          --angle: -7931.25deg;
          --hue: -132.1875;
        }
        .ball:nth-child(96) {
          --delay: -22.265625s;
          --angle: -8015.625deg;
          --hue: -133.59375;
        }
        .ball:nth-child(97) {
          --delay: -22.5s;
          --angle: -8100deg;
          --hue: -135;
        }
        .ball:nth-child(98) {
          --delay: -22.734375s;
          --angle: -8184.375deg;
          --hue: -136.40625;
        }
        .ball:nth-child(99) {
          --delay: -22.96875s;
          --angle: -8268.75deg;
          --hue: -137.8125;
        }
        .ball:nth-child(100) {
          --delay: -23.203125s;
          --angle: -8353.125deg;
          --hue: -139.21875;
        }
        .ball:nth-child(101) {
          --delay: -23.4375s;
          --angle: -8437.5deg;
          --hue: -140.625;
        }
        .ball:nth-child(102) {
          --delay: -23.671875s;
          --angle: -8521.875deg;
          --hue: -142.03125;
        }
        .ball:nth-child(103) {
          --delay: -23.90625s;
          --angle: -8606.25deg;
          --hue: -143.4375;
        }
        .ball:nth-child(104) {
          --delay: -24.140625s;
          --angle: -8690.625deg;
          --hue: -144.84375;
        }
        .ball:nth-child(105) {
          --delay: -24.375s;
          --angle: -8775deg;
          --hue: -146.25;
        }
        .ball:nth-child(106) {
          --delay: -24.609375s;
          --angle: -8859.375deg;
          --hue: -147.65625;
        }
        .ball:nth-child(107) {
          --delay: -24.84375s;
          --angle: -8943.75deg;
          --hue: -149.0625;
        }
        .ball:nth-child(108) {
          --delay: -25.078125s;
          --angle: -9028.125deg;
          --hue: -150.46875;
        }
        .ball:nth-child(109) {
          --delay: -25.3125s;
          --angle: -9112.5deg;
          --hue: -151.875;
        }
        .ball:nth-child(110) {
          --delay: -25.5468.........完整代码请登录后点击上方下载按钮下载查看