css布局实现三维圆球涡旋动画效果代码
代码语言：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.546875s;
--angle: -9196.875deg;
--hue: -153.28125;
}
.ball:nth-child(111) {
--delay: -25.78125s;
--angle: -9281.25deg;
--hue: -154.6875;
}
.ball:nth-child(112) {
--delay: -26.015625s;
--angle: -9365.625deg;
--hue: -156.09375;
}
.ball:nth-child(113) {
--delay: -26.25s;
--angle: -9450deg;
--hue: -157.5;
}
.ball:nth-child(114) {
--delay: -26.484375s;
--angle: -9534.375deg;
--hue: -158.90625;
}
.ball:nth-child(115) {
--delay: -26.71875s;
--angle: -9618.75deg;
--hue: -160.3125;
}
.ball:nth-child(116) {
--delay: -26.953125s;
--angle: -9703.125deg;
--hue: -161.71875;
}
.ball:nth-child(117) {
--delay: -27.1875s;
--angle: -9787.5deg;
--hue: -163.125;
}
.ball:nth-child(118) {
--delay: -27.421875s;
--angle: -9871.875deg;
--hue: -164.53125;
}
.ball:nth-child(119) {
--delay: -27.65625s;
--angle: -9956.25deg;
--hue: -165.9375;
}
.ball:nth-child(120) {
--delay: -27.890625s;
--angle: -10040.625deg;
--hue: -167.34375;
}
.ball:nth-child(121) {
--delay: -28.125s;
--angle: -10125deg;
--hue: -168.75;
}
.ball:nth-child(122) {
--delay: -28.359375s;
--angle: -10209.375deg;
--hue: -170.15625;
}
.ball:nth-child(123) {
--delay: -28.59375s;
--angle: -10293.75deg;
--hue: -171.5625;
}
.ball:nth-child(124) {
--delay: -28.828125s;
--angle: -10378.125deg;
--hue: -172.96875;
}
.ball:nth-child(125) {
--delay: -29.0625s;
--angle: -10462.5deg;
--hue: -174.375;
}
.ball:nth-child(126) {
--delay: -29.296875s;
--angle: -10546.875deg;
--hue: -175.78125;
}
.ball:nth-child(127) {
--delay: -29.53125s;
--angle: -10631.25deg;
--hue: -177.1875;
}
.ball:nth-child(128) {
--delay: -29.765625s;
--angle: -10715.625deg;
--hue: -178.59375;
}
.ball:nth-child(129) {
--delay: -30s;
--angle: -10800deg;
--hue: -180;
}
.ball:nth-child(130) {
--delay: -30.234375s;
--angle: -10884.375deg;
--hue: -181.40625;
}
.ball:nth-child(131) {
--delay: -30.46875s;
--angle: -10968.75deg;
--hue: -182.8125;
}
.ball:nth-child(132) {
--delay: -30.703125s;
--angle: -11053.125deg;
--hue: -184.21875;
}
.ball:nth-child(133) {
--delay: -30.9375s;
--angle: -11137.5deg;
--hue: -185.625;
}
.ball:nth-child(134) {
--delay: -31.171875s;
--angle: -11221.875deg;
--hue: -187.03125;
}
.ball:nth-child(135) {
--delay: -31.40625s;
--angle: -11306.25deg;
--hue: -188.4375;
}
.ball:nth-child(136) {
--delay: -31.640625s;
--angle: -11390.625deg;
--hue: -189.84375;
}
.ball:nth-child(137) {
--delay: -31.875s;
--angle: -11475deg;
--hue: -191.25;
}
.ball:nth-child(138) {
--delay: -32.109375s;
--angle: -11559.375deg;
--hue: -192.65625;
}
.ball:nth-child(139) {
--delay: -32.34375s;
--angle: -11643.75deg;
--hue: -194.0625;
}
.ball:nth-child(140) {
--delay: -32.578125s;
--angle: -11728.125deg;
--hue: -195.46875;
}
.ball:nth-child(141) {
--delay: -32.8125s;
--angle: -11812.5deg;
--hue: -196.875;
}
.ball:nth-child(142) {
--delay: -33.046875s;
--angle: -11896.875deg;
--hue: -198.28125;
}
.ball:nth-child(143) {
--delay: -33.28125s;
--angle: -11981.25deg;
--hue: -199.6875;
}
.ball:nth-child(144) {
--delay: -33.515625s;
--angle: -12065.625deg;
--hue: -201.09375;
}
.ball:nth-child(145) {
--delay: -33.75s;
--angle: -12150deg;
--hue: -202.5;
}
.ball:nth-child(146) {
--delay: -33.984375s;
--angle: -12234.375deg;
--hue: -203.90625;
}
.ball:nth-child(147) {
--delay: -34.21875s;
--angle: -12318.75deg;
--hue: -205.3125;
}
.ball:nth-child(148) {
--delay: -34.453125s;
--angle: -12403.125deg;
--hue: -206.71875;
}
.ball:nth-child(149) {
--delay: -34.6875s;
--angle: -12487.5deg;
--hue: -208.125;
}
.ball:nth-child(150) {
--delay: -34.921875s;
--angle: -12571.875deg;
--hue: -209.53125;
}
.ball:nth-child(151) {
--delay: -35.15625s;
--angle: -12656.25deg;
--hue: -210.9375;
}
.ball:nth-child(152) {
--delay: -35.390625s;
--angle: -12740.625deg;
--hue: -212.34375;
}
.ball:nth-child(153) {
--delay: -35.625s;
--angle: -12825deg;
--hue: -213.75;
}
.ball:nth-child(154) {
--delay: -35.859375s;
--angle: -12909.375deg;
--hue: -215.15625;
}
.ball:nth-child(155) {
--delay: -36.09375s;
--angle: -12993.75deg;
--hue: -216.5625;
}
.ball:nth-child(156) {
--delay: -36.328125s;
--angle: -13078.125deg;
--hue: -217.96875;
}
.ball:nth-child(157) {
--delay: -36.5625s;
--angle: -13162.5deg;
--hue: -219.375;
}
.ball:nth-child(158) {
--delay: -36.796875s;
--angle: -13246.875deg;
--hue: -220.78125;
}
.ball:nth-child(159) {
--delay: -37.03125s;
--angle: -13331.25deg;
--hue: -222.1875;
}
.ball:nth-child(160) {
--delay: -37.265625s;
--angle: -13415.625deg;
--hue: -223.59375;
}
.ball:nth-child(161) {
--delay: -37.5s;
--angle: -13500deg;
--hue: -225;
}
.ball:nth-child(162) {
--delay: -37.734375s;
--angle: -13584.375deg;
--hue: -226.40625;
}
.ball:nth-child(163) {
--delay: -37.96875s;
--angle: -13668.75deg;
--hue: -227.8125;
}
.ball:nth-child(164) {
--delay: -38.203125s;
--angle: -13753.125deg;
--hue: -229.21875;
}
.ball:nth-child(165) {
--delay: -38.4375s;
--angle: -13837.5deg;
--hue: -230.625;
}
.ball:nth-child(166) {
--delay: -38.671875s;
--angle: -13921.875deg;
--hue: -232.03125;
}
.ball:nth-child(167) {
--delay: -38.90625s;
--angle: -14006.25deg;
--hue: -233.4375;
}
.ball:nth-child(168) {
--delay: -39.140625s;
--angle: -14090.625deg;
--hue: -234.84375;
}
.ball:nth-child(169) {
--delay: -39.375s;
--angle: -14175deg;
--hue: -236.25;
}
.ball:nth-child(170) {
--delay: -39.609375s;
--angle: -14259.375deg;
--hue: -237.65625;
}
.ball:nth-child(171) {
--delay: -39.84375s;
--angle: -14343.75deg;
--hue: -239.0625;
}
.ball:nth-child(172) {
--delay: -40.078125s;
--angle: -14428.125deg;
--hue: -240.46875;
}
.ball:nth-child(173) {
--delay:.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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