CSS3 螺旋式催眠动画

Hypnotic | #Codevember 1

CSS3

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1657
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: black;
    overflow: hidden;
}
.c {
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    height: 10px;
    width: 10px;
    animation: anim 3s infinite linear;
}
.c:nth-child(1) {
    transform: translate3d(-282.56091px, -529.3008px, 0) scale(0.1);
    animation-delay: -0.01s;
    background: #ff0500;
}
.c:nth-child(2) {
    transform: translate3d(-333.86445px, 498.53238px, 0) scale(0.1);
    animation-delay: -0.02s;
    background: #ff0a00;
}
.c:nth-child(3) {
    transform: translate3d(597.01771px, 59.74826px, 0) scale(0.1);
    animation-delay: -0.03s;
    background: #ff0f00;
}
.c:nth-child(4) {
    transform: translate3d(-228.44844px, -554.80745px, 0) scale(0.1);
    animation-delay: -0.04s;
    background: #ff1400;
}
.c:nth-child(5) {
    transform: translate3d(-381.84905px, 462.80806px, 0) scale(0.1);
    animation-delay: -0.05s;
    background: #ff1a00;
}
.c:nth-child(6) {
    transform: translate3d(588.10048px, 118.90257px, 0) scale(0.1);
    animation-delay: -0.06s;
    background: #ff1f00;
}
.c:nth-child(7) {
    transform: translate3d(-172.06497px, -574.79879px, 0) scale(0.1);
    animation-delay: -0.07s;
    background: #ff2400;
}
.c:nth-child(8) {
    transform: translate3d(-426.0377px, 422.48299px, 0) scale(0.1);
    animation-delay: -0.08s;
    background: #ff2900;
}
.c:nth-child(9) {
    transform: translate3d(573.33697px, 176.87486px, 0) scale(0.1);
    animation-delay: -0.09s;
    background: #ff2e00;
}
.c:nth-child(10) {
    transform: translate3d(-113.97101px, -589.07606px, 0) scale(0.1);
    animation-delay: -0.1s;
    background: #ff3300;
}
.c:nth-child(11) {
    transform: translate3d(-465.99113px, 377.95802px, 0) scale(0.1);
    animation-delay: -0.11s;
    background: #ff3800;
}
.c:nth-child(12) {
    transform: translate3d(552.87393px, 233.08886px, 0) scale(0.1);
    animation-delay: -0.12s;
    background: #ff3d00;
}
.c:nth-child(13) {
    transform: translate3d(-54.74407px, -597.49735px, 0) scale(0.1);
    animation-delay: -0.13s;
    background: #ff4200;
}
.c:nth-child(14) {
    transform: translate3d(-501.31215px, 329.67579px, 0) scale(0.1);
    animation-delay: -0.14s;
    background: #ff4700;
}
.c:nth-child(15) {
    transform: translate3d(526.91479px, 286.98572px, 0) scale(0.1);
    animation-delay: -0.15s;
    background: #ff4d00;
}
.c:nth-child(16) {
    transform: translate3d(5.02708px, -599.97894px, 0) scale(0.1);
    animation-delay: -0.16s;
    background: #ff5200;
}
.c:nth-child(17) {
    transform: translate3d(-531.64965px, 278.11626px, 0) scale(0.1);
    animation-delay: -0.17s;
    background: #ff5700;
}
.c:nth-child(18) {
    transform: translate3d(495.71761px, 338.02966px, 0) scale(0.1);
    animation-delay: -0.18s;
    background: #ff5c00;
}
.c:nth-child(19) {
    transform: translate3d(64.74826px, -596.49616px, 0) scale(0.1);
    animation-delay: -0.19s;
    background: #ff6100;
}
.c:nth-child(20) {
    transform: translate3d(-556.70203px, 223.79198px, 0) scale(0.1);
    animation-delay: -0.2s;
    background: #ff6600;
}
.c:nth-child(21) {
    transform: translate3d(459.59251px, 385.71327px, 0) scale(0.1);
    animation-delay: -0.21s;
    background: #ff6b00;
}
.c:nth-child(22) {
    transform: translate3d(123.82577px, -587.08362px, 0) scale(0.1);
    animation-delay: -0.22s;
    background: #ff7000;
}
.c:nth-child(23) {
    transform: translate3d(-576.22025px, 167.243px, 0) scale(0.1);
    animation-delay: -0.23s;
    background: #ff7500;
}
.c:nth-child(24) {
    transform: translate3d(418.89862px, 429.56251px, 0) scale(0.1);
    animation-delay: -0.24s;
    background: #ff7a00;
}
.c:nth-child(25) {
    transform: translate3d(181.67234px, -571.83491px, 0) scale(0.1);
    animation-delay: -0.25s;
    background: #ff8000;
}
.c:nth-child(26) {
    transform: translate3d(-590.01029px, 109.03146px, 0) scale(0.1);
    animation-delay: -0.26s;
    background: #ff8500;
}
.c:nth-child(27) {
    transform: translate3d(374.04047px, 469.14148px, 0) scale(0.1);
    animation-delay: -0.27s;
    background: #ff8a00;
}
.c:nth-child(28) {
    transform: translate3d(237.71291px, -550.9016px, 0) scale(0.1);
    animation-delay: -0.28s;
    background: #ff8f00;
}
.c:nth-child(29) {
    transform: translate3d(-597.93505px, 49.73604px, 0) scale(0.1);
    animation-delay: -0.29s;
    background: #ff9400;
}
.c:nth-child(30) {
    transform: translate3d(325.46399px, 504.05673px, 0) scale(0.1);
    animation-delay: -0.3s;
    background: #ff9900;
}
.c:nth-child(31) {
    transform: translate3d(291.39038px, -524.4918px, 0) scale(0.1);
    animation-delay: -0.31s;
    background: #ff9e00;
}
.c:nth-child(32) {
    transform: translate3d(-599.91576px, -10.05381px, 0) scale(0.1);
    animation-delay: -0.32s;
    background: #ffa300;
}
.c:nth-child(33) {
    transform: translate3d(273.65209px, 533.96117px, 0) scale(0.1);
    animation-delay: -0.33s;
    background: #ffa800;
}
.c:nth-child(34) {
    transform: translate3d(342.17115px, -492.86804px, 0) scale(0.1);
    animation-delay: -0.34s;
    background: #ffad00;
}
.c:nth-child(35) {
    transform: translate3d(-595.93273px, -69.74371px, 0) scale(0.1);
    animation-delay: -0.35s;
    background: #ffb300;
}
.c:nth-child(36) {
    transform: translate3d(219.11982px, 558.55752px, 0) scale(0.1);
    animation-delay: -0.36s;
    background: #ffb800;
}
.c:nth-child(37) {
    transform: translate3d(389.55041px, -456.34469px, 0) scale(0.1);
    animation-delay: -0.37s;
    background: #ffbd00;
}
.c:nth-child(38) {
    transform: translate3d(-586.02554px, -128.74029px, 0) scale(0.1);
    animation-delay: -0.38s;
    background: #ffc200;
}
.c:nth-child(39) {
    transform: translate3d(162.40929px, 577.60127px, 0) scale(0.1);
    animation-delay: -0.39s;
    background: #ffc700;
}
.c:nth-child(40) {
    transform: translate3d(433.05716px, -415.28484px, 0) scale(0.1);
    animation-delay: -0.4s;
    background: #ffcc00;
}
.c:nth-child(41) {
    transform: translate3d(-570.2927px, -186.45706px, 0) scale(0.1);
    animation-delay: -0.41s;
    background: #ffd100;
}
.c:nth-child(42) {
    transform: translate3d(104.08425px, 590.9031px, 0) scale(0.1);
    animation-delay: -0.42s;
    background: #ffd600;
}
.c:nth-child(43) {
    transform: translate3d(472.2589px, -370.09665px, 0) scale(0.1);
    animation-delay: -0.43s;
    background: #ffdb00;
}
.c:nth-child(44) {
    transform: translate3d(-548.89059px, -242.32028px, 0) scale(0.1);
    animation-delay: -0.44s;
    background: #ffe000;
}
.c:nth-child(45) {
    transform: translate3d(44.72451px, 598.33078px, 0) scale(0.1);
    animation-delay: -0.45s;
    background: #ffe600;
}
.c:nth-child(46) {
    transform: translate3d(506.76593px, -321.22935px, 0) scale(0.1);
    animation-delay: -0.46s;
    background: #ffeb00;
}
.c:nth-child(47) {
    transform: translate3d(-522.03198px, -295.77459px, 0) scale(0.1);
    animation-delay: -0.47s;
    background: #fff000;
}
.c:nth-child(48) {
    transform: translate3d(-15.07983px, 599.81047px, 0) scale(0.1);
    animation-delay: -0.48s;
    background: #fff500;
}
.c:nth-child(49) {
    transform: translate3d(536.23522px, -269.16871px, 0) scale(0.1);
    animation-delay: -0.49s;
    background: #fffa00;
}
.c:nth-child(50) {
    transform: translate3d(-489.98387px, -346.28862px, 0) scale(0.1);
    animation-delay: -0.5s;
    background: yellow;
}
.c:nth-child(51) {
    transform: translate3d(-74.73426px, 595.32746px, 0) scale(0.1);
    animation-delay: -0.51s;
    background: #faff00;
}
.c:nth-child(52) {
    transform: translate3d(560.3738px, -214.43227px, 0) scale(0.1);
    animation-delay: -0.52s;
    background: #f5ff00;
}
.c:nth-child(53) {
    transform: translate3d(-453.06484px, -393.36021px, 0) scale(0.1);
    animation-delay: -0.53s;
    background: #f0ff00;
}
.c:nth-child(54) {
    transform: translate3d(-133.64576px, 584.92633px, 0) scale(0.1);
    animation-delay: -0.54s;
    background: #ebff00;
}
.c:nth-child(55) {
    transform: translate3d(578.94173px, -157.56417px, 0) scale(0.1);
    animation-delay: -0.55s;
    background: #e6ff00;
}
.c:nth-child(56) {
    transform: translate3d(-411.64191px, -436.52141px, 0) scale(0.1);
    animation-delay: -0.56s;
    background: #e0ff00;
}
.c:nth-child(57) {
    transform: translate3d(-191.2287px, 568.71046px, 0) scale(0.1);
    animation-delay: -0.57s;
    background: #dbff00;
}
.c:nth-child(58) {
    transform: translate3d(591.75442px, -99.12974px, 0) scale(0.1);
    animation-delay: -0.58s;
    background: #d6ff00;
}
.c:nth-child(59) {
    transform: translate3d(-366.12686px, -475.34317px, 0) scale(0.1);
    animation-delay: -0.59s;
    background: #d1ff00;
}
.c:nth-child(60) {
    transform: translate3d(-246.91063px, 546.84106px, 0) scale(0.1);
    animation-delay: -0.6s;
    background: #ccff00;
}
.c:nth-child(61) {
    transform: translate3d(598.6845px, -39.70985px, 0) scale(0.1);
    animation-delay: -0.61s;
    background: #c7ff00;
}
.c:nth-child(62) {
    transform: translate3d(-316.97215px, -509.43955px, 0) scale(0.1);
    animation-delay: -0.62s;
    background: #c2ff00;
}
.c:nth-child(63) {
    transform: translate3d(-300.13804px, 519.53552px, 0) scale(0.1);
    animation-delay: -0.63s;
    background: #bdff00;
}
.c:nth-child(64) {
    transform: translate3d(599.66307px, 20.10479px, 0) scale(0.1);
    animation-delay: -0.64s;
    background: #b8ff00;
}
.c:nth-child(65) {
    transform: translate3d(-264.66643px, -538.47161px, 0) scale(0.1);
    animation-delay: -0.65s;
    background: #b3ff00;
}
.c:nth-child(66) {
    transform: translate3d(-350.38178px, 487.0653px, 0) scale(0.1);
    animation-delay: -0.66s;
    background: #adff00;
}
.c:nth-child(67) {
    transform: translate3d(594.68041px, 79.71957px, 0) scale(0.1);
    animation-delay: -0.67s;
    background: #a8ff00;
}
.c:nth-child(68) {
    transform: translate3d(-209.72967px, -562.15075px, 0) scale(0.1);
    animation-delay: -0.68s;
    background: #a3ff00;
}
.c:nth-child(69) {
    transform: translate3d(-397.14239px, 449.75318px, 0) scale(0.1);
    animation-delay: -0.69s;
    background: #9eff00;
}
.c:nth-child(70) {
    transform: translate3d(583.78605px, 138.54186px, 0) scale(0.1);
    animation-delay: -0.7s;
    background: #99ff00;
}
.c:nth-child(71) {
    transform: translate3d(-152.708px, -580.24156px, 0) scale(0.1);
    animation-delay: -0.71s;
    background: #94ff00;
}
.c:nth-child(72) {
    transform: translate3d(-439.95501px, 407.97008px, 0) scale(0.1);
    animation-delay: -0.72s;
    background: #8fff00;
}
.c:nth-child(73) {
    transform: translate3d(567.08829px, 195.98691px, 0) scale(0.1);
    animation-delay: -0.73s;
    background: #8aff00;
}
.c:nth-child(74) {
    transform: translate3d(-94.16826px, -592.56421px, 0) scale(0.1);
    animation-delay: -0.74s;
    background: #85ff00;
}
.c:nth-child(75) {
    transform: translate3d(-478.39406px, 362.13136px, 0) scale(0.1);
    animation-delay: -0.75s;
    background: #80ff00;
}
.c:nth-child(76) {
    transform: translate3d(544.75313px, 251.48366px, 0) scale(0.1);
    animation-delay: -0.76s;
    background: #7aff00;
}
.c:nth-child(77) {
    transform: translate3d(-34.6924px, -598.99619px, 0) scale(0.1);
    animation-delay: -0.77s;
    background: #75ff00;
}
.c:nth-child(78) {
    transform: translate3d(-512.07741px, 312.6927px, 0) scale(0.1);
    animation-delay: -0.78s;
    background: #70ff00;
}
.c:nth-child(79) {
    transform: translate3d(517.00259px, 304.48041px, 0) scale(0.1);
    animation-delay: -0.79s;
    background: #6bff00;
}
.c:nth-child(80) {
    transform: translate3d(25.12834px, -599.47357px, 0) scale(0.1);
    animation-delay: -0.8s;
    background: #66ff00;
}
.c:nth-child(81) {
    transform: translate3d(-540.67021px, 260.14558px, 0) scale(0.1);
    animation-delay: -0.81s;
    background: #61ff00;
}
.c:nth-child(82) {
    transform: translate3d(484.11254px, 354.45034px, 0) scale(0.1);
    animation-delay: -0.82s;
    background: #5cff00;
}
.c:nth-child(83) {
    transform: translate3d(84.69928px, -593.99161px, 0) scale(0.1);
    animation-delay: -0.83s;
    background: #57ff00;
}
.c:nth-child(84) {
    transform: translate3d(-563.88823px, 205.01235px, 0) scale(0.1);
    animation-delay: -0.84s;
    background: #52ff00;
}
.c:nth-child(85) {
    transform: translate3d(446.40995px, 400.89669px, 0) scale(0.1);
    animation-delay: -0.85s;
    background: #4dff00;
}
.c:nth-child(86) {
    transform: translate3d(143.42823px, -582.60479px, 0) scale(0.1);
    animation-delay: -0.86s;
    background: #47ff00;
}
.c:nth-child(87) {
    transform: translate3d(-581.50065px, 147.84111px, 0) scale(0.1);
    animation-delay: -0.87s;
    background: #42ff00;
}
.c:nth-child(88) {
    transform: translate3d(404.26961px, 443.35774px, 0) scale(0.1);
    animation-delay: -0.88s;
    background: #3dff00;
}
.c:nth-child(89) {
    transform: translate3d(200.73136px, -565.42632px, 0) scale(0.1);
    animation-delay: -0.89s;
    background: #38ff00;
}
.c:nth-child(90) {
    transform: translate3d(-593.33239px, 89.20018px, 0) scale(0.1);
    animation-delay: -0.9s;
    background: #33ff00;
}
.c:nth-child(91) {
    transform: translate3d(358.11044px, 481.41138px, 0) scale(0.1);
    animation-delay: -0.91s;
    background: #2eff00;
}
.c:nth-child(92) {
    transform: translate3d(256.03902px, -542.62696px, 0) scale(0.1);
    animation-delay: -0.92s;
    background: #29ff00;
}
.c:nth-child(93) {
    transform: translate3d(-599.26584px, 29.67251px, 0) scale(0.1);
    animation-delay: -0.93s;
    background: #24ff00;
}
.c:nth-child(94) {
    transform: translate3d(308.3913px, 514.67932px, 0) scale(0.1);
    animation-delay: -0.94s;
    background: #1fff00;
}
.c:nth-child(95) {
    transform: translate3d(308.80141px, -514.43336px, 0) scale(0.1);
    animation-delay: -0.95s;
    background: #1aff00;
}
.c:nth-child(96) {
    transform: translate3d(-599.242px, -30.15013px, 0) scale(0.1);
    animation-delay: -0.96s;
    background: #14ff00;
}
.c:nth-child(97) {
    transform: translate3d(255.60646px, 542.83086px, 0) scale(0.1);
    animation-delay: -0.97s;
    background: #0fff00;
}
.c:nth-child(98) {
    transform: translate3d(358.49402px, -481.1258px, 0) scale(0.1);
    animation-delay: -0.98s;
    background: #0aff00;
}
.c:nth-child(99) {
    transform: translate3d(-593.26111px, -89.67305px, 0) scale(0.1);
    animation-delay: -0.99s;
    background: #05ff00;
}
.c:nth-child(100) {
    transform: translate3d(200.28064px, 565.58613px, 0) scale(0.1);
    animation-delay: -1s;
    background: lime;
}
.c:nth-child(101) {
    transform: translate3d(404.62285px, -443.03538px, 0) scale(0.1);
    animation-delay: -1.01s;
    background: #00ff05;
}
.c:nth-child(102) {
    transform: translate3d(-581.38263px, -148.30453px, 0) scale(0.1);
    animation-delay: -1.02s;
    background: #00ff0a;
}
.c:nth-child(103) {
    transform: translate3d(142.96383px, 582.71892px, 0) scale(0.1);
    animation-delay: -1.03s;
    background: #00ff0f;
}
.c:nth-child(104) {
    transform: translate3d(446.72933px, -400.54076px, 0) scale(0.1);
    animation-delay: -1.04s;
    background: #00ff14;
}
.c:nth-child(105) {
    transform: translate3d(-563.72465px, -205.46172px, 0) scale(0.1);
    animation-delay: -1.05s;
    background: #00ff1a;
}
.c:nth-child(106) {
    transform: translate3d(84.22583px, 594.05893px, 0) scale(0.1);
    animation-delay: -1.06s;
    background: #00ff1f;
}
.c:nth-child(107) {
    transform: translate3d(484.39489px, -354.06438px, 0) scale(0.1);
    animation-delay: -1.07s;
    background: #00ff24;
}
.c:nth-child(108) {
    transform: translate3d(-540.4627px, -260.57642px, 0) scale(0.1);
    animation-delay: -1.08s;
    background: #00ff29;
}
.c:nth-child(109) {
    transform: translate3d(24.65054px, 599.49341px, 0) scale(0.1);
    animation-delay: -1.09s;
    background: #00ff2e;
}
.c:nth-child(110) {
    transform: translate3d(517.2451px, -304.06826px, 0) scale(0.1);
    animation-delay: -1.1s;
    background: #00ff33;
}
.c:nth-child(111) {
    transform: translate3d(-511.82803px, -313.10074px, 0) scale(0.1);
    animation-delay: -1.11s;
    background: #00ff38;
}
.c:nth-child(112) {
    transform: translate3d(-35.1698px, 598.96835px, 0) scale(0.1);
    animation-delay: -1.12s;
    background: #00ff3d;
}
.c:nth-child(113) {
    transform: translate3d(544.95339px, -251.0494px, 0) scale(0.1);
    animation-delay: -1.13s;
    background: #00ff42;
}
.c:nth-child(114) {
    transform: translate3d(-478.10528px, -362.51253px, 0) scale(0.1);
    animation-delay: -1.14s;
    background: #00ff47;
}
.c:nth-child(115) {
    transform: translate3d(-94.64052px, 592.48896px, 0) scale(0.1);
    animation-delay: -1.15s;
    background: #00ff4d;
}
.c:nth-child(116) {
    transform: translate3d(567.24432px, -195.53486px, 0) scale(0.1);
    animation-delay: -1.16s;
    background: #00ff52;
}
.c:nth-child(117) {
    transform: translate3d(-439.62971px, -408.3206px, 0) scale(0.1);
    animation-delay: -1.17s;
    background: #00ff57;
}
.c:nth-child(118) {
    transform: translate3d(-153.17042px, 580.11966px, 0) scale(0.1);
    animation-delay: -1.18s;
    background: #00ff5c;
}
.c:nth-child(119) {
    transform: translate3d(583.89629px, -138.07652px, 0) scale(0.1);
    animation-delay: -1.19s;
    background: #00ff61;
}
.c:nth-child(120) {
    transform: translate3d(-396.7838px, -450.06957px, 0) scale(0.1);
    animation-delay: -1.2s;
    background: #00ff66;
}
.c:nth-child(121) {
    transform: translate3d(-210.17765px, 561.98341px, 0) scale(0.1);
    animation-delay: -1.21s;
    background: #00ff6b;
}
.c:nth-child(122) {
    transform: translate3d(594.74376px, -79.24557px, 0) scale(0.1);
    animation-delay: -1.22s;
    background: #00ff70;
}
.c:nth-child(123) {
    transform: translate3d(-349.99347px, -487.34441px, 0) scale(0.1);
    animation-delay: -1.23s;
    background: #00ff75;
}
.c:nth-child(124) {
    transform: translate3d(-265.09552px, 538.2605px, 0) scale(0.1);
    animation-delay: -1.24s;
    background: #00ff7a;
}
.c:nth-child(125) {
    transform: translate3d(599.6789px, -19.62684px, 0) scale(0.1);
    animation-delay: -1.25s;
    background: #00ff80;
}
.c:nth-child(126) {
    transform: translate3d(-299.72386px, -519.77457px, 0) scale(0.1);
    animation-delay: -1.26s;
    background: #00ff85;
}
.c:nth-child(127) {
    transform: translate3d(-317.37808px, 509.18676px, 0) scale(0.1);
    animation-delay: -1.27s;
    background: #00ff8a;
}
.c:nth-child(128) {
    transform: translate3d(598.65266px, 40.187px, 0) scale(0.1);
    animation-delay: -1.28s;
    background: #00ff8f;
}
.c:nth-child(129) {
    transform: translate3d(-246.47471px, -547.03767px, 0) scale(0.1);
    animation-delay: -1.29s;
    background: #00ff94;
}
.c:nth-child(130) {
    transform: translate3d(-366.5056px, 475.0512px, 0) scale(0.1);
    animation-delay: -1.3s;
    background: #00ff99;
}
.c:nth-child(131) {
    transform: translate3d(591.67523px, 99.60134px, 0) scale(0.1);
    animation-delay: -1.31s;
    background: #00ff9e;
}
.c:nth-child(132) {
    transform: translate3d(-190.77536px, -568.86269px, 0) scale(0.1);
    animation-delay: -1.32s;
    background: #00ffa3;
}
.c:nth-child(133) {
    transform: translate3d(-411.98969px, 436.19318px, 0) scale(0.1);
    animation-delay: -1.33s;
    background: #00ffa8;
}
.c:nth-child(134) {
    transform: translate3d(578.81597px, 158.02555px, 0) scale(0.1);
    animation-delay: -1.34s;
    background: #00ffad;
}
.c:nth-child(135) {
    transform: translate3d(-133.17952px, -585.03266px, 0) scale(0.1);
    animation-delay: -1.35s;
    background: #00ffb3;
}
.c:nth-child(136) {
    transform: translate3d(-453.37821px, 392.99898px, 0) scale(0.1);
    animation-delay: -1.36s;
    background: #00ffb8;
}
.c:nth-child(137) {
    transform: translate3d(560.20272px, 214.87884px, 0) scale(0.1);
    animation-delay: -1.37s;
    background: #00ffbd;
}
.c:nth-child(138) {
    transform: translate3d(-74.25975px, -595.38684px, 0) scale(0.1);
    animation-delay: -1.38s;
    background: #00ffc2;
}
.c:nth-child(139) {
    transform: translate3d(-490.25971px, 345.89798px, 0) scale(0.1);
    animation-delay: -1.39s;
    background: #00ffc7;
}
.c:nth-child(140) {
    transform: translate3d(536.02051px, 269.59601px, 0) scale(0.1);
    animation-delay: -1.4s;
    background: #00ffcc;
}
.c:nth-child(141) {
    transform: translate3d(-14.60176px, -599.8223px, 0) scale(0.1);
    animation-delay: -1.41s;
    background: #00ffd1;
}
.c:nth-child(142) {
    transform: translate3d(-522.26756px, 295.35843px, 0) scale(0.1);
    animation-delay: -1.42s;
    background: #00ffd6;
}
.c:nth-child(143) {
    transform: translate3d(506.50974px, 321.63315px, 0) scale(0.1);
    animation-delay: -1.43s;
    background: #00ffdb;
}
.c:nth-child(144) {
    transform: translate3d(45.20138px, -598.29494px, 0) scale(0.1);
    animation-delay: -1.44s;
    background: #00ffe0;
}
.c:nth-child(145) {
    transform: translate3d(-549.08355px, 241.88272px, 0) scale(0.1);
    animation-delay: -1.45s;
    background: #00ffe6;
}
.c:nth-child(146) {
    transform: translate3d(471.96378px, 370.47293px, 0) scale(0.1);
    animation-delay: -1.46s;
    background: #00ffeb;
}
.c:nth-child(147) {
    transform: translate3d(104.55518px, -590.81995px, 0) scale(0.1);
    animation-delay: -1.47s;
    background: #00fff0;
}
.c:nth-child(148) {
    transform: translate3d(-570.44113px, 186.00247px, 0) scale(0.1);
    animation-delay: -1.48s;
    background: #00fff5;
}
.c:nth-child(149) {
    transform: translate3d(432.72603px, 415.62986px, 0) scale(0.1);
    animation-delay: -1.49s;
    background: #00fffa;
}
.c:nth-child(150) {
    transform: translate3d(162.8696px, -577.47164px, 0) scale(0.1);
    animation-delay: -1.5s;
    background: cyan;
}
.c:nth-child(151) {
    transform: translate3d(-586.12797px, 128.27317px, 0) scale(0.1);
    animation-delay: -1.51s;
    background: #00faff;
}
.c:nth-child(152) {
    transform: translate3d(389.18657px, 456.65503px, 0) scale(0.1);
    animation-delay: -1.52s;
    background: #00f5ff;
}
.c:nth-child(153) {
    transform: translate3d(219.56493px, -558.3827px, 0) scale(0.1);
    animation-delay: -1.53s;
    background: #00f0ff;
}
.c:nth-child(154) {
    transform: translate3d(-595.98813px, 69.26871px, 0) scale(0.1);
    animation-delay: -1.54s;
    background: #00ebff;
}
.c:nth-child(155) {
    transform: translate3d(341.77822px, 493.1406px, 0) scale(0.1);
    animation-delay: -1.55s;
    background: #00e6ff;
}
.c:nth-child(156) {
    transform: translate3d(274.07758px, -533.7429px, 0) scale(0.1);
    animation-delay: -1.56s;
    background: #00e0ff;
}
.c:nth-child(157) {
    transform: translate3d(-599.92358px, 9.57566px, 0) scale(0.1);
    animation-delay: -1.57s;
    background: #00dbff;
}
.c:nth-child(158) {
    transform: translate3d(290.97226px, 524.72387px, 0) scale(0.1);
    animation-delay: -1.58s;
    background: #00d6ff;
}
.c:nth-child(159) {
    transform: translate3d(325.86563px, -503.79717px, 0) scale(0.1);
    animation-delay: -1.59s;
    background: #00d1ff;
}
.c:nth-child(160) {
    transform: translate3d(-597.89522px, -50.21259px, 0) scale(0.1);
    animation-delay: -1.6s;
    background: #00ccff;
}
.c:nth-child(161) {
    transform: translate3d(237.27376px, 551.09089px, 0) scale(0.1);
    animation-delay: -1.61s;
    background: #00c7ff;
}
.c:nth-child(162) {
    transform: translate3d(374.41426px, -468.84321px, 0) scale(0.1);
    animation-delay: -1.62s;
    background: #00c2ff;
}
.c:nth-child(163) {
    transform: translate3d(-589.9232px, -109.50167px, 0) scale(0.1);
    animation-delay: -1.63s;
    background: #00bdff;
}
.c:nth-child(164) {
    transform: translate3d(181.21652px, 571.97952px, 0) scale(0.1);
    animation-delay: -1.64s;
    background: #00b8ff;
}
.c:nth-child(165) {
    transform: translate3d(419.24085px, -429.2285px, 0) scale(0.1);
    animation-delay: -1.65s;
    background: #00b3ff;
}
.c:nth-child(166) {
    transform: translate3d(-576.08677px, -167.70221px, 0) scale(0.1);
    animation-delay: -1.66s;
    background: #00adff;
}
.c:nth-child(167) {
    transform: translate3d(123.35782px, 587.18213px, 0) scale(0.1);
    animation-delay: -1.67s;
    background: #00a8ff;
}
.c:nth-child(168) {
    transform: translate3d(459.89978px, -385.34684px, 0) scale(0.1);
    animation-delay: -1.68s;
    background: #00a3ff;
}
.c:nth-child(169) {
    transform: translate3d(-556.52348px, -224.23562px, 0) scale(0.1);
    animation-delay: -1.69s;
    background: #009eff;
}
.c:nth-child(170) {
    transform: translate3d(64.27282px, 596.54757px, 0) scale(0.1);
    animation-delay: -1.7s;
    background: #0099ff;
}
.c:nth-child(171) {
    transform: translate3d(495.98687px, -337.63446px, 0) scale(0.1);
    animation-delay: -1.71s;
    background: #0094ff;
}
.c:nth-child(172) {
    transform: translate3d(-531.42781px, -278.53991px, 0) scale(0.1);
    animation-delay: -1.72s;
    background: #008fff;
}
.c:nth-child(173) {
    transform: translate3d(4.54888px, 599.98276px, 0) scale(0.1);
    animation-delay: -1.73s;
    background: #008aff;
}
.c:nth-child(174) {
    transform: translate3d(527.14336px, -286.56567px, 0) scale(0.1);
    animation-delay: -1.74s;
    background: #0085ff;
}
.c:nth-child(175) {
    transform: translate3d(-501.04923px, -330.07524px, 0) scale(0.1);
    animation-delay: -1.75s;
    background: #0080ff;
}
.c:nth-child(176) {
    transform: translate3d(-55.22027px, 597.45353px, 0) scale(0.1);
    animation-delay: -1.76s;
    background: #007aff;
}
.c:nth-child(177) {
    transform: translate3d(553.05953px, -232.64813px, 0) scale(0.1);
    animation-delay: -1.77s;
    background: #0075ff;
}
.c:nth-child(178) {
    transform: translate3d(-465.68974px, -378.32931px, 0) scale(0.1);
    animation-delay: -1.78s;
    background: #0070ff;
}
.c:nth-child(179) {
    transform: translate3d(-114.44048px, 588.98504px, 0) scale(0.1);
    animation-delay: -1.79s;
    background: #006bff;
}
.c:nth-child(180) {
    transform: translate3d(573.47776px, -176.41785px, 0) scale(0.1);
    animation-delay: -1.8s;
    background: #0066ff;
}
.c:nth-child(181) {
    transform: translate3d(-425.70084px, -422.82242px, 0) scale(0.1);
    animation-delay: -1.81s;
    background: #0061ff;
}
.c:nth-child(182) {
    transform: translate3d(-172.52304px, 574.66147px, 0) scale(0.1);
    animation-delay: -1.82s;
    background: #005cff;
}
.c:nth-child(183) {
    transform: translate3d(588.19507px, -118.4338px, 0) scale(0.1);
    animation-delay: -1.83s;
    background: #0057ff;
}
.c:nth-child(184) {
    transform: translate3d(-381.48006px, -463.11226px, 0) scale(0.1);
    animation-delay: -1.84s;
    background: #0052ff;
}
.c:nth-child(185) {
    transform: translate3d(-228.89056px, 554.6252px, 0) scale(0.1);
    animation-delay: -1.85s;
    background: #004dff;
}
.c:nth-child(186) {
    transform: translate3d(597.06514px, -59.27241px, 0) scale(0.1);
    animation-delay: -1.86s;
    background: #0047ff;
}
.c:nth-child(187) {
    transform: translate3d(-333.467px, -498.79832px, 0) scale(0.1);
    animation-delay: -1.87s;
    background: #0042ff;
}
.c:nth-child(188) {
    transform: translate3d(-282.98268px, 529.07542px, 0) scale(0.1);
    animation-delay: -1.88s;
    background: #003dff;
}
.c:nth-child(189) {
    transform: translate3d(599.99981px, 0.47821px, 0) scale(0.1);
    animation-delay: -1.89s;
    background: #0038ff;
}
.c:nth-child(190) {
    transform: translate3d(-282.13895px, -529.52584px, 0) scale(0.1);
    animation-delay: -1.9s;
    background: #0033ff;
}
.c:nth-child(191) {
    transform: translate3d(-334.26168px, 498.26612px, 0) scale(0.1);
    animation-delay: -1.91s;
    background: #002eff;
}
.c:nth-child(192) {
    transform: translate3d(596.9699px, 60.22408px, 0) scale(0.1);
    animation-delay: -1.92s;
    background: #0029ff;
}
.c:nth-child(193) {
    transform: translate3d(-228.00617px, -554.98936px, 0) scale(0.1);
    animation-delay: -1.93s;
    background: #0024ff;
}
.c:nth-child(194) {
    transform: translate3d(-382.21779px, 462.50358px, 0) scale(0.1);
    animation-delay: -1.94s;
    background: #001fff;
}
.c:nth-child(195) {
    transform: translate3d(588.00553px, 119.37126px, 0) scale(0.1);
    animation-delay: -1.95s;
    background: #001aff;
}
.c:nth-child(196) {
    transform: translate3d(-171.60679px, -574.93574px, 0) scale(0.1);
    animation-delay: -1.96s;
    background: #0014ff;
}
.c:nth-child(197) {
    transform: translate3d(-426.37429px, 422.14329px, 0) scale(0.1);
    animation-delay: -1.97s;
    background: #000fff;
}
.c:nth-child(198) {
    transform: translate3d(573.19582px, 177.33177px, 0) scale(0.1);
    animation-delay: -1.98s;
    background: #000aff;
}
.c:nth-child(199) {
    transform: translate3d(-113.50147px, -589.16671px, 0) scale(0.1);
    animation-delay: -1.99s;
    background: #0005ff;
}
.c:nth-child(200) {
    transform: translate3d(-466.29222px, 377.5865px, 0) scale(0.1);
    animation-delay: -2s;
    background: blue;
}
.c:nth-child(201) {
    transform: translate3d(552.68798px, 233.52943px, 0) scale(0.1);
    animation-delay: -2.01s;
    background: #0500ff;
}
.c:nth-child(202) {
    transform: translate3d(-54.26784px, -597.5408px, 0) scale(0.1);
    animation-delay: -2.02s;
    background: #0a00ff;
}
.c:nth-child(203) {
    transform: translate3d(-501.57475px, 329.27613px, 0) scale(0.1);
    animation-delay: -2.03s;
    background: #0f00ff;
}
.c:nth-child(204) {
    transform: translate3d(526.68589px, 287.40559px, 0) scale(0.1);
    animation-delay: -2.04s;
    background: #1400ff;
}
.c:nth-child(205) {
    transform: translate3d(5.50527px, -599.97474px, 0) scale(0.1);
    animation-delay: -2.05s;
    background: #1a00ff;
}
.c:nth-child(206) {
    transform: translate3d(-531.87114px, 277.69244px, 0) scale(0.1);
    animation-delay: -2.06s;
    background: #1f00ff;
}
.c:nth-child(207) {
    transform: translate3d(495.44803px, 338.42465px, 0) scale(0.1);
    animation-delay: -2.07s;
    background: #2400ff;
}
.c:nth-child(208) {
    transform: translate3d(65.22365px, -596.44436px, 0) scale(0.1);
    animation-delay: -2.08s;
    background: #2900ff;
}
.c:nth-child(209) {
    transform: translate3d(-556.88022px, 223.34821px, 0) scale(0.1);
    animation-delay: -2.09s;
    background: #2e00ff;
}
.c:nth-child(210) {
    transform: translate3d(459.28494px, 386.07945px, 0) scale(0.1);
    animation-delay: -2.1s;
    background: #3300ff;
}
.c:nth-child(211) {
    transform: translate3d(124.29365px, -586.98474px, 0) scale(0.1);
    animation-delay: -2.11s;
    background: #3800ff;
}
.c:nth-child(212) {
    transform: translate3d(-576.35336px, 166.78369px, 0) scale(0.1);
    animation-delay: -2.12s;
    background: #3d00ff;
}
.c:nth-child(213) {
    transform: translate3d(418.55611px, 429.89624px, 0) scale(0.1);
    animation-delay: -2.13s;
    background: #4200ff;
}
.c:nth-child(214) {
    transform: translate3d(182.12805px, -571.68993px, 0) scale(0.1);
    animation-delay: -2.14s;
    background: #4700ff;
}
.c:nth-child(215) {
    transform: translate3d(-590.097px, 108.56117px, 0) scale(0.1);
    animation-delay: -2.15s;
    background: #4d00ff;
}
.c:nth-child(216) {
    transform: translate3d(373.66643px, 469.43945px, 0) scale(0.1);
    animation-delay: -2.16s;
    background: #5200ff;
}
.c:nth-child(217) {
    transform: translate3d(238.15191px, -550.71196px, 0) scale(0.1);
    animation-delay: -2.17s;
    background: #5700ff;
}
.c:nth-child(218) {
    transform: translate3d(-597.9745px, 49.25946px, 0) scale(0.1);
    animation-delay: -2.18s;
    background: #5c00ff;
}
.c:nth-child(219) {
    transform: translate3d(325.06215px, 504.31597px, 0) scale(0.1);
    animation-delay: -2.19s;
    background: #6100ff;
}
.c:nth-child(220) {
    transform: translate3d(291.80832px, -524.25939px, 0) scale(0.1);
    animation-delay: -2.2s;
    background: #6600ff;
}
.c:nth-child(221) {
    transform: translate3d(-599.90756px, -10.53195px, 0) scale(0.1);
    animation-delay: -2.21s;
    background: #6b00ff;
}
.c:nth-child(222) {
    transform: translate3d(273.22643px, 534.17911px, 0) scale(0.1);
    animation-delay: -2.22s;
    background: #7000ff;
}
.c:nth-child(223) {
    transform: translate3d(342.56387px, -492.59516px, 0) scale(0.1);
    animation-delay: -2.23s;
    background: #7500ff;
}
.c:nth-child(224) {
    transform: translate3d(-595.87695px, -70.21865px, 0) scale(0.1);
    animation-delay: -2.24s;
    background: #7a00ff;
}
.c:nth-child(225) {
    transform: translate3d(218.67457px, 558.73199px, 0) scale(0.1);
    animation-delay: -2.25s;
    background: #8000ff;
}
.c:nth-child(226) {
    transform: translate3d(389.914px, -456.03407px, 0) scale(0.1);
    animation-delay: -2.26s;
    background: #8500ff;
}
.c:nth-child(227) {
    transform: translate3d(-585.92275px, -129.20732px, 0) scale(0.1);
    animation-delay: -2.27s;
    background: #8a00ff;
}
.c:nth-child(228) {
    transform: translate3d(161.94888px, 577.73053px, 0) scale(0.1);
    animation-delay: -2.28s;
    background: #8f00ff;
}
.c:nth-child(229) {
    transform: translate3d(433.38801px, -414.93955px, 0) scale(0.1);
    animation-delay: -2.29s;
    background: #9400ff;
}
.c:nth-child(230) {
    transform: translate3d(-570.14391px, -186.91154px, 0) scale(0.1);
    animation-delay: -2.3s;
    background: #9900ff;
}
.c:nth-child(231) {
    transform: translate3d(103.61326px, 590.98587px, 0) scale(0.1);
    animation-delay: -2.31s;
    background: #9e00ff;
}
.c:nth-child(232) {
    transform: translate3d(472.55372px, -369.72014px, 0) scale(0.1);
    animation-delay: -2.32s;
    background: #a300ff;
}
.c:nth-child(233) {
    transform: translate3d(-548.69728px, -242.75768px, 0) scale(0.1);
    animation-delay: -2.33s;
    background: #a800ff;
}
.c:nth-child(234) {
    transform: translate3d(44.24762px, 598.36623px, 0) scale(0.1);
    animation-delay: -2.34s;
    background: #ad00ff;
}
.c:nth-child(235) {
    transform: translate3d(507.02179px, -320.82534px, 0) scale(0.1);
    animation-delay: -2.35s;
    background: #b300ff;
}
.c:nth-child(236) {
    transform: translate3d(-521.79608px, -296.19057px, 0) scale(0.1);
    animation-delay: -2.36s;
    background: #b800ff;
}
.c:nth-child(237) {
    transform: translate3d(-15.55788px, 599.79826px, 0) scale(0.1);
    animation-delay: -2.37s;
    background: #bd00ff;
}
.c:nth-child(238) {
    transform: translate3d(536.44958px, -268.74123px, 0) scale(0.1);
    animation-delay: -2.38s;
    background: #c200ff;
}
.c:nth-child(239) {
    transform: translate3d(-489.70771px, -346.67904px, 0) scale(0.1);
    animation-delay: -2.39s;
    background: #c700ff;
}
.c:nth-child(240) {
    transform: translate3d(-75.20872px, 595.26771px, 0) scale(0.1);
    animation-delay: -2.4s;
    background: #cc00ff;
}
.c:nth-child(241) {
    transform: translate3d(560.54453px, -213.98558px, 0) scale(0.1);
    animation-delay: -2.41s;
    background: #d100ff;
}
.c:nth-child(242) {
    transform: translate3d(-452.75118px, -393.72118px, 0) scale(0.1);
    animation-delay: -2.42s;
    background: #d600ff;
}
.c:nth-child(243) {
    transform: translate3d(-134.11192px, 584.81962px, 0) scale(0.1);
    animation-delay: -2.43s;
    background: #db00ff;
}
.c:nth-child(244) {
    transform: translate3d(579.06713px, -157.1027px, 0) scale(0.1);
    animation-delay: -2.44s;
    background: #e000ff;
}
.c:nth-child(245) {
    transform: translate3d(-411.29386px, -436.84936px, 0) scale(0.1);
    animation-delay: -2.45s;
    background: #e600ff;
}
.c:nth-child(246) {
    transform: translate3d(-191.68191px, 568.55786px, 0) scale(0.1);
    animation-delay: -2.46s;
    background: #eb00ff;
}
.c:nth-child(247) {
    transform: translate3d(591.83324px, -98.65806px, 0) scale(0.1);
    animation-delay: -2.47s;
    background: #f000ff;
}
.c:nth-child(248) {
    transform: translate3d(-365.74788px, -475.63482px, 0) scale(0.1);
    animation-delay: -2.48s;
    background: #f500ff;
}
.c:nth-child(249) {
    transform: translate3d(-247.3464px, 546.64409px, 0) scale(0.1);
    animation-delay: -2.49s;
    background: #fa00ff;
}
.c:nth-child(250) {
    transform: translate3d(598.71596px, -39.23267px, 0) scale(0.1);
    animation-delay: -2.5s;
    background: magenta;
}
.c:nth-child(251) {
    transform: translate3d(-316.56602px, -509.69202px, 0) scale(0.1);
    animation-delay: -2.51s;
    background: #ff00fa;
}
.c:nth-child(252) {
    transform: translate3d(-300.55202px, 519.29614px, 0) scale(0.1);
    animation-delay: -2.52s;
    background: #ff00f5;
}
.c:nth-child(253) {
    transform: translate3d(599.64686px, 20.58273px, 0) scale(0.1);
    animation-delay: -2.53s;
    background: #ff00f0;
}
.c:nth-child(254) {
    transform: translate3d(-264.23718px, -538.68239px, 0) scale(0.1);
    animation-delay: -2.54s;
    background: #ff00eb;
}
.c:nth-child(255) {
    transform: translate3d(-350.76987px, 486.78589px, 0) scale(0.1);
    animation-delay: -2.55s;
    background: #ff00e6;
}
.c:nth-child(256) {
    transform: translate3d(594.61668px, 80.19352px, 0) scale(0.1);
    animation-delay: -2.56s;
    background: #ff00e0;
}
.c:nth-child(257) {
    transform: translate3d(-209.28156px, -562.31773px, 0) scale(0.1);
    animation-delay: -2.57s;
    background: #ff00db;
}
.c:nth-child(258) {
    transform: translate3d(-397.50072px, 449.43651px, 0) scale(0.1);
    animation-delay: -2.58s;
    background: #ff00d6;
}
.c:nth-child(259) {
    transform: translate3d(583.67545px, 139.0071px, 0) scale(0.1);
    animation-delay: -2.59s;
    background: #ff00d1;
}
.c:nth-child(260) {
    transform: translate3d(-152.24549px, -580.36309px, 0) scale(0.1);
    animation-delay: -2.6s;
    background: #ff00cc;
}
.c:nth-child(261) {
    transform: translate3d(-440.28003px, 407.6193px, 0) scale(0.1);
    animation-delay: -2.61s;
    background: #ff00c7;
}
.c:nth-child(262) {
    transform: translate3d(566.93191px, 196.43882px, 0) scale(0.1);
    animation-delay: -2.62s;
    background: #ff00c2;
}
.c:nth-child(263) {
    transform: translate3d(-93.69595px, -592.63907px, 0) scale(0.1);
    animation-delay: -2.63s;
    background: #ff00bd;
}
.c:nth-child(264) {
    transform: translate3d(-478.68254px, 361.74995px, 0) scale(0.1);
    animation-delay: -2.64s;
    background: #ff00b8;
}
.c:nth-child(265) {
    transform: translate3d(544.55252px, 251.91775px, 0) scale(0.1);
    animation-delay: -2.65s;
    background: #ff00b3;
}
.c:nth-child(266) {
    transform: translate3d(-34.21498px, -599.02365px, 0) scale(0.1);
    animation-delay: -2.66s;
    background: #ff00ad;
}
.c:nth-child(267) {
    transform: translate3d(-512.32647px, 312.28447px, 0) scale(0.1);
    animation-delay: -2.67s;
    background: #ff00a8;
}
.c:nth-child(268) {
    transform: translate3d(516.75975px, 304.89238px, 0) scale(0.1);
    animation-delay: -2.68s;
    background: #ff00a3;
}
.c:nth-child(269) {
    transform: translate3d(25.60613px, -599.45336px, 0) scale(0.1);
    animation-delay: -2.69s;
    background: #ff009e;
}
.c:nth-child(270) {
    transform: translate3d(-540.87738px, 259.71457px, 0) scale(0.1);
    animation-delay: -2.7s;
    background: #ff0099;
}
.c:nth-child(271) {
    transform: translate3d(483.82989px, 354.83608px, 0) scale(0.1);
    animation-delay: -2.71s;
    background: #ff0094;
}
.c:nth-child(272) {
    transform: translate3d(85.17268px, -593.92391px, 0) scale(0.1);
    animation-delay: -2.72s;
    background: #ff008f;
}
.c:nth-child(273) {
    transform: translate3d(-564.05145px, 204.56286px, 0) scale(0.1);
    animation-delay: -2.73s;
    background: #ff008a;
}
.c:nth-child(274) {
    transform: translate3d(446.09029px, 401.25236px, 0) scale(0.1);
    animation-delay: -2.74s;
    background: #ff0085;
}
.c:nth-child(275) {
    transform: translate3d(143.89253px, -582.49029px, 0) scale(0.1);
    animation-delay: -2.75s;
    background: #ff0080;
}
.c:nth-child(276) {
    transform: translate3d(-581.6183px, 147.37759px, 0) scale(0.1);
    animation-delay: -2.76s;
    background: #ff007a;
}
.c:nth-child(277) {
    transform: translate3d(403.91612px, 443.67981px, 0) scale(0.1);
    animation-delay: -2.77s;
    background: #ff0075;
}
.c:nth-child(278) {
    transform: translate3d(201.18195px, -565.26615px, 0) scale(0.1);
    animation-delay: -2.78s;
    background: #ff0070;
}
.c:nth-child(279) {
    transform: translate3d(-593.4033px, 88.72725px, 0) scale(0.1);
    animation-delay: -2.79s;
    background: #ff006b;
}
.c:nth-child(280) {
    transform: translate3d(357.72663px, 481.69664px, 0) scale(0.1);
    animation-delay: -2.8s;
    background: #ff0066;
}
.c:nth-child(281) {
    transform: translate3d(256.47143px, -542.42272px, 0) scale(0.1);
    animation-delay: -2.81s;
    background: #ff0061;
}
.c:nth-child(282) {
    transform: translate3d(-599.2893px, 29.19487px, 0) scale(0.1);
    animation-delay: -2.82s;
    background: #ff005c;
}
.c:nth-child(283) {
    transform: translate3d(307.981px, 514.92495px, 0) scale(0.1);
    animation-delay: -2.83s;
    background: #ff0057;
}
.c:nth-child(284) {
    transform: translate3d(309.21133px, -514.18708px, 0) scale(0.1);
    animation-delay: -2.84s;
    background: #ff0052;
}
.c:nth-child(285) {
    transform: translate3d(-599.21778px, -30.62773px, 0) scale(0.1);
    animation-delay: -2.85s;
    background: #ff004d;
}
.c:nth-child(286) {
    transform: translate3d(255.17373px, 543.03441px, 0) scale(0.1);
    animation-delay: -2.86s;
    background: #ff0047;
}
.c:nth-child(287) {
    transform: translate3d(358.87737px, -480.83992px, 0) scale(0.1);
    animation-delay: -2.87s;
    background: #ff0042;
}
.c:nth-child(288) {
    transform: translate3d(-593.18945px, -90.14586px, 0) scale(0.1);
    animation-delay: -2.88s;
    background: #ff003d;
}
.c:nth-child(289) {
    transform: translate3d(199.82979px, 565.74557px, 0) scale(0.1);
    animation-delay: -2.89s;
    background: #ff0038;
}
.c:nth-child(290) {
    transform: translate3d(404.97583px, -442.71275px, 0) scale(0.1);
    animation-delay: -2.9s;
    background: #ff0033;
}
.c:nth-child(291) {
    transform: translate3d(-581.26425px, -148.76785px, 0) scale(0.1);
    animation-delay: -2.91s;
    background: #ff002e;
}
.c:nth-child(292) {
    transform: translate3d(142.49935px, 582.83268px, 0) scale(0.1);
    animation-delay: -2.92s;
    background: #ff0029;
}
.c:nth-child(293) {
    transform: translate3d(447.04843px, -400.18458px, 0) scale(0.1);
    animation-delay: -2.93s;
    background: #ff0024;
}
.c:nth-child(294) {
    transform: translate3d(-563.56072px, -205.91095px, 0) scale(0.1);
    animation-delay: -2.94s;
    background: #ff001f;
}
.c:nth-child(295) {
    transform: translate3d(83.75233px, 594.12587px, 0) scale(0.1);
    animation-delay: -2.95s;
    background: #ff001a;
}
.c:nth-child(296) {
    transform: translate3d(484.67694px, -353.6782px, 0) scale(0.1);
    animation-delay: -2.96s;
    background: #ff0014;
}
.c:nth-child(297) {
    transform: translate3d(-540.25484px, -261.0071px, 0) scale(0.1);
    animation-delay: -2.97s;
    background: #ff000f;
}
.c:nth-child(298) {
    transform: translate3d(24.17273px, 599.51287px, 0) scale(0.1);
    animation-delay: -2.98s;
    background: #ff000a;
}
.c:nth-child(299) {
    transform: translate3d(517.48729px, -303.6559px, 0) scale(0.1);
    animation-delay: -2.99s;
    background: #ff0005;
}
.c:nth-child(300) {
    transform: translate3d(-511.57832px, -313.50858px, 0) scale(0.1);
    animation-delay: -3s;
    background: red;
}
@keyframes anim {
    from {
        transform: translate(0, 0) scale(1);
    }
}

HTML

Hypnotic | #Codevember 1

CSS3

编辑器支持Emmet

快捷键

Hypnotic | #Codevember 1

CSS3

CSS3 同心圆陀螺仪式旋转动画

CSS3 催眠型螺旋图案

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：