css+div实现彩色粒子碎屑喷射动画效果代码
代码语言:html
所属分类:粒子
代码描述:css+div实现彩色粒子碎屑喷射动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html { overflow:hidden; background:#222 } .particle { position:absolute; width:4px; height:4px; animation:shoot 3s ease-out infinite; animation-name:shoot,fade } .particle:nth-child(1) { transform:translate(18vw,11vh); background:#ff4dcf; animation-duration:1.27s; animation-delay:-0.635s } .particle:nth-child(2) { transform:translate(43vw,49vh); background:#bbff4d; animation-duration:1.04s; animation-delay:-0.676s } .particle:nth-child(3) { transform:translate(36vw,94vh); background:#61ff4d; animation-duration:1.07s; animation-delay:-0.9309s } .particle:nth-child(4) { transform:translate(35vw,94vh); background:#b24dff; animation-duration:1.65s; animation-delay:-1.2045s } .particle:nth-child(5) { transform:translate(70vw,49vh); background:#ff4dbe; animation-duration:1.12s; animation-delay:-1.1088s } .particle:nth-child(6) { transform:translate(5vw,89vh); background:#ff614d; animation-duration:1.83s; animation-delay:-0.0183s } .particle:nth-child(7) { transform:translate(80vw,93vh); background:#4dc6ff; animation-duration:1.64s; animation-delay:-0.0492s } .particle:nth-child(8) { transform:translate(78vw,36vh); background:#4dffc9; animation-duration:1.32s; animation-delay:-1.188s } .particle:nth-child(9) { transform:translate(93vw,58vh); background:#884dff; animation-duration:1.01s; animation-delay:-0.2929s } .particle:nth-child(10) { transform:translate(27vw,66vh); background:#ff4dc1; animation-duration:1.59s; animation-delay:-0.8268s } .particle:nth-child(11) { transform:translate(48vw,82vh); background:#ffbb4d; animation-duration:1.64s; animation-delay:-1.4432s } .particle:nth-child(12) { transform:translate(34vw,95vh); background:#4d73ff; animation-duration:1.49s; animation-delay:-0.0149s } .particle:nth-child(13) { transform:translate(19vw,82vh); background:#ff4d9a; animation-duration:1.24s; animation-delay:-0.1612s } .particle:nth-child(14) { transform:translate(83vw,79vh); background:#4dff58; animation-duration:1.26s; animation-delay:-1.008s } .particle:nth-child(15) { transform:translate(44vw,86vh); background:#5bff4d; animation-duration:1.44s; animation-delay:-0.504s } .particle:nth-child(16) { transform:translate(47vw,4vh); background:#4d6dff; animation-duration:1.87s; animation-delay:-0.7667s } .particle:nth-child(17) { transform:translate(32vw,46vh); background:#ff4dac; animation-duration:1.36s; animation-delay:-0.2312s } .particle:nth-child(18) { transform:translate(18vw,2vh); background:#ffb84d; animation-duration:1.99s; animation-delay:-1.4328s } .particle:nth-child(19) { transform:translate(98vw,14vh); background:#a0ff4d; animation-duration:1.37s; animation-delay:-0.7261s } .particle:nth-child(20) { transform:translate(45vw,81vh); background:#ff4de7; animation-duration:1.55s; animation-delay:-0.279s } .particle:nth-child(21) { transform:translate(100vw,82vh); background:#fcff4d; animation-duration:1.66s; animation-delay:-1.6102s } .particle:nth-child(22) { transform:translate(94vw,20vh); background:#9d4dff; animation-duration:1.89s; animation-delay:-1.7388s } .particle:nth-child(23) { transform:translate(47vw,58vh); background:#ffb54d; animation-duration:1.9s; animation-delay:-0.855s } .particle:nth-child(24) { transform:translate(84vw,28vh); background:#4d52ff; animation-duration:1.17s; animation-delay:-0.6552s } .particle:nth-child(25) { transform:translate(24vw,80vh); background:#4dd8ff; animation-duration:1.54s; animation-delay:-1.3706s } .particle:nth-child(26) { transform:translate(66vw,99vh); background:#4d9dff; animation-duration:1.84s; animation-delay:-1.012s } .particle:nth-child(27) { transform:translate(66vw,100vh); background:#97ff4d; animation-duration:1.03s; animation-delay:-1.0197s } .particle:nth-child(28) { transform:translate(27vw,20vh); background:#4d9dff; animation-duration:1.83s; animation-delay:-0.0366s } .particle:nth-child(29) { transform:translate(76vw,81vh); background:#ff4d85; animation-duration:1.48s; animation-delay:-0.9028s } .particle:nth-child(30) { transform:translate(70vw,86vh); background:#fcff4d; animation-duration:1.2s; animation-delay:-0.624s } .particle:nth-child(31) { transform:translate(7vw,27vh); background:#4dff91; animation-duration:1.06s; animation-delay:-0.8268s } .particle:nth-child(32) { transform:translate(57vw,93vh); background:#ffea4d; animation-duration:1.13s; animation-delay:-0.5311s } .particle:nth-child(33) { transform:translate(3vw,73vh); background:#ffd54d; animation-duration:1.36s; animation-delay:-0.1224s } .particle:nth-child(34) { transform:translate(73vw,53vh); background:#4dffe4; animation-duration:1.4s; animation-delay:-1.162s } .particle:nth-child(35) { transform:translate(40vw,7vh); background:#ff4d7c; animation-duration:1.02s; animation-delay:-0.5202s } .particle:nth-child(36) { transform:translate(3vw,2vh); background:#4d85ff; animation-duration:1.2s; animation-delay:-0.54s } .particle:nth-child(37) { transform:translate(62vw,87vh); background:#4d7cff; animation-duration:1.41s; animation-delay:-1.3959s } .particle:nth-child(38) { transform:translate(73vw,34vh); background:#4dd8ff; animation-duration:1.52s; animation-delay:-1.3528s } .particle:nth-child(39) { transform:translate(3vw,68vh); background:#ff824d; animation-duration:1.23s; animation-delay:-0.984s } .particle:nth-child(40) { transform:translate(59vw,6vh); background:#4de1ff; animation-duration:1.97s; animation-delay:-0.2167s } .particle:nth-child(41) { transform:translate(72vw,4vh); background:#4dbeff; animation-duration:1.71s; animation-delay:-0.1197s } .particle:nth-child(42) { transform:translate(46vw,11vh); background:#4dffa9; animation-duration:1.42s; animation-delay:-0.4118s } .particle:nth-child(43) { transform:translate(100vw,21vh); background:#884dff; animation-duration:1.32s; animation-delay:-0.462s } .particle:nth-child(44) { transform:translate(72vw,16vh); background:#acff4d; animation-duration:1.24s; animation-delay:-0.6944s } .particle:nth-child(45) { transform:translate(28vw,19vh); background:#ea4dff; animation-duration:1.79s; animation-delay:-1.5573s } .particle:nth-child(46) { transform:translate(12vw,95vh); background:#e44dff; animation-duration:1.29s; animation-delay:-0.6708s } .particle:nth-child(47) { transform:translate(15vw,48vh); background:#914dff; animation-duration:1.42s; animation-delay:-0.0284s } .particle:nth-child(48) { transform:translate(7vw,33vh); background:#8bff4d; animation-duration:1.84s; animation-delay:-1.4536s } .particle:nth-child(49) { transform:translate(73vw,86vh); background:#ff4d6d; animation-duration:1.26s; animation-delay:-0.4662s } .particle:nth-child(50) { transform:translate(55vw,82vh); background:#ff4dde; animation-duration:1.34s; animation-delay:-0.2412s } .particle:nth-child(51) { transform:translate(2vw,58vh); background:#73ff4d; animation-duration:1.25s; animation-delay:-0.2375s } .particle:nth-child(52) { transform:translate(100vw,64vh); background:#ffe74d; animation-duration:1.32s; animation-delay:-1.1088s } .particle:nth-child(53) { transform:translate(25vw,32vh); background:#4dff52; animation-duration:1.7s; animation-delay:-1.071s } .particle:nth-child(54) { transform:translate(1vw,75vh); background:#cfff4d; animation-duration:1.43s; animation-delay:-0.2431s } .particle:nth-child(55) { transform:translate(42vw,35vh); background:#cc4dff; animation-duration:1.12s; animation-delay:-0.5152s } .particle:nth-child(56) { transform:translate(8vw,67vh); background:#4dccff; animation-duration:1.81s; animation-delay:-0.7602s } .particle:nth-child(57) { transform:translate(51vw,12vh); background:#4dfff3; animation-duration:1.05s; animation-delay:-0.84s } .particle:nth-child(58) { transform:translate(91vw,58vh); background:#ff4dbe; animation-duration:1.94s; animation-delay:-0.9118s } .particle:nth-child(59) { transform:translate(25vw,52vh); background:#ff4d64; animation-duration:1.57s; animation-delay:-1.0362s } .particle:nth-child(60) { transform:translate(42vw,26vh); background:#85ff4d; animation-duration:1.14s; animation-delay:-0.8094s } .particle:nth-child(61) { transform:translate(30vw,74vh); background:#4d6dff; animation-duration:1.09s; animation-delay:-0.3161s } .particle:nth-child(62) { transform:translate(94vw,41vh); background:#4d82ff; animation-duration:1.75s; animation-delay:-1.6625s } .particle:nth-child(63) { transform:translate(95vw,74vh); background:#ff5e4d; animation-duration:1.23s; animation-delay:-1.1685s } .particle:nth-child(64) { transform:translate(13vw,25vh); background:#e44dff; animation-duration:1.53s; animation-delay:-1.0098s } .particle:nth-child(65) { transform:translate(9vw,79vh); background:#4dff97; animation-duration:1.99s; animation-delay:-1.2736s } .particle:nth-child(66) { transform:translate(8vw,47vh); background:#4dfcff; animation-duration:1.38s; animation-delay:-0.966s } .particle:nth-child(67) { transform:translate(93vw,51vh); background:#ff944d; animation-duration:1.72s; animation-delay:-1.1008s } .particle:nth-child(68) { transform:translate(14vw,16vh); background:#c4ff4d; animation-duration:1.97s; animation-delay:-1.8715s } .particle:nth-child(69) { transform:translate(33vw,31vh); background:#ff4d9a; animation-duration:1.81s; animation-delay:-1.629s } .particle:nth-child(70) { transform:translate(79vw,59vh); background:#ff4d88; animation-duration:1.72s; animation-delay:-1.29s } .particle:nth-child(71) { transform:translate(39vw,35vh); background:#4df0ff; animation-duration:1.26s; animation-delay:-0.5922s } .particle:nth-child(72) { transform:translate(18vw,90vh); background:#4dffb8; animation-duration:1.4s; animation-delay:-0.476s } .particle:nth-child(73) { transform:translate(66vw,36vh); background:#e1ff4d; animation-duration:1.47s; animation-delay:-0.5733s } .particle:nth-child(74) { transform:translate(84vw,54vh); background:#ff734d; animation-duration:1.58s; animation-delay:-0.9322s } .particle:nth-child(75) { transform:translate(7vw,45vh); background:#ff4dd5; animation-duration:1.93s; animation-delay:-1.737s } .particle:nth-child(76) { transform:translate(14vw,85vh); background:#584dff; animation-duration:1.53s; animation-delay:-0.0612s } .particle:nth-child(77) { transform:translate(33vw,15vh); background:#ff4d79; animation-duration:1.77s; animation-delay:-1.5576s } .particle:nth-child(78) { transform:translate(61vw,42vh); background:#ff4d91; animation-duration:1.58s; animation-delay:-0.6004s } .particle:nth-child(79) { transform:translate(67vw,23vh); background:#ff4dac; animation-duration:1.44s; animation-delay:-0.8208s } .particle:nth-child(80) { transform:translate(53vw,50vh); background:#584dff; animation-duration:1.32s; animation-delay:-0.8184s } .particle:nth-child(81) { transform:translate(5vw,22vh); background:#ff824d; animation-duration:1.93s; animation-delay:-0.4246s } .particle:nth-child(82) { transform:translate(22vw,47vh); background:#4dffe1; animation-duration:1.79s; animation-delay:-1.7363s } .particle:nth-child(83) { transform:translate(46vw,47vh); background:#ac4dff; animation-duration:1.68s; animation-delay:-0.4536s } .particle:nth-child(84) { transform:translate(64vw,21vh); background:#4dffd2; animation-duration:1.07s; animation-delay:-0.8881s } .particle:nth-child(85) { transform:translate(75vw,92vh); background:#4dccff; animation-duration:2s; animation-delay:-1.06s } .particle:nth-child(86) { transform:translate(61vw,16vh); background:#764dff; animation-duration:1.46s; animation-delay:-0.8468s } .particle:nth-child(87) { transform:translate(13vw,63vh); background:#ff4db2; animation-duration:1.98s; animation-delay:-0.0198s } .particle:nth-child(88) { transform:translate(56vw,13vh); background:#ff4d58; animation-duration:1.25s; animation-delay:-0.475s } .particle:nth-child(89) { transform:translate(15vw,56vh); background:#4dc4ff; animation-duration:1.21s; animation-delay:-0.5808s } .particle:nth-child(90) { transform:translate(48vw,36vh); background:#4dffd8; animation-duration:1.04s; animation-delay:-0.9152s } .particle:nth-child(91) { transform:translate(58vw,10vh); background:#4d64ff; animation-duration:1.58s; animation-delay:-0.5372s } .particle:nth-child(92) { transform:translate(20vw,92vh); background:#ff614d; animation-duration:1.41s; animation-delay:-0.6486s } .particle:nth-child(93) { transform:translate(86vw,31vh); background:#4dffff; animation-duration:1.92s; animation-delay:-1.2672s } .particle:nth-child(94) { transform:translate(28vw,63vh); background:#a3ff4d; animation-duration:1.14s; animation-delay:-0.228s } .particle:nth-child(95) { transform:translate(22vw,34vh); background:#de4dff; animation-duration:1.75s; animation-delay:-0.035s } .particle:nth-child(96) { transform:translate(79vw,70vh); background:#4d7fff; animation-duration:1.06s; animation-delay:-0.4558s } .particle:nth-child(97) { transform:translate(29vw,33vh); background:#edff4d; animation-duration:1.05s; animation-delay:-0.6825s } .particle:nth-child(98) { transform:translate(57vw,7vh); background:#61ff4d; animation-duration:1.12s; animation-delay:-0.952s } .particle:nth-child(99) { transform:translate(3vw,73vh); background:#6dff4d; animation-duration:1.72s; animation-delay:-0.8772s } .particle:nth-child(100) { transform:translate(100vw,18vh); background:#c14dff; animation-duration:1.55s; animation-delay:-1.5345s } .particle:nth-child(101) { transform:translate(92vw,80vh); background:#4da9ff; animation-duration:1.45s; animation-delay:-0.232s } .particle:nth-child(102) { transform:translate(63vw,17vh); background:#4dffea; animation-duration:2s; animation-delay:-1.44s } .particle:nth-child(103) { transform:translate(92vw,38vh); background:#d54dff; animation-duration:1.85s; animation-delay:-0.148s } .particle:nth-child(104) { transform:translate(77vw,86vh); background:#734dff; animation-duration:1.81s; animation-delay:-0.905s } .particle:nth-child(105) { transform:translate(49vw,6vh); background:#4d85ff; animation-duration:1.99s; animation-delay:-0.0995s } .particle:nth-child(106) { transform:translate(16vw,51vh); background:#ff4df6; animation-duration:1.29s; animation-delay:-0.7869s } .particle:nth-child(107) { transform:translate(15vw,19vh); background:#4dc4ff; animation-duration:1.61s; animation-delay:-0.4508s } .particle:nth-child(108) { transform:translate(74vw,61vh); background:#fff94d; animation-duration:1.93s; animation-delay:-0.0386s } .particle:nth-child(109) { transform:translate(85vw,36vh); background:#ffd84d; animation-duration:1.43s; animation-delay:-0.0715s } .particle:nth-child(110) { transform:translate(94vw,96vh); background:#ff4db5; animation-duration:1.09s; animation-delay:-0.9047s } .particle:nth-child(111) { transform:translate(79vw,59vh); background:#ffd54d; animation-duration:1.76s; animation-delay:-0.968s } .particle:nth-child(112) { transform:translate(1vw,78vh); background:#c4ff4d; animation-duration:1.77s; animation-delay:-1.1682s } .particle:nth-child(113) { transform:translate(17vw,49vh); background:#bb4dff; animation-duration:1.51s; animation-delay:-1.0268s } .particle:nth-child(114) { transform:translate(20vw,8vh); background:#4dff4d; animation-duration:1.27s; animation-delay:-0.2032s } .particle:nth-child(115) { transform:translate(67vw,70vh); background:#ff4d85; animation-duration:1.51s; animation-delay:-1.2533s } .particle:nth-child(116) { transform:translate(65vw,78vh); background:#ccff4d; animation-duration:1.39s; animation-delay:-0.5282s } .particle:nth-child(117) { transform:translate(41vw,59vh); background:#ff4d55; animation-duration:1.27s; animation-delay:-1.0795s } .particle:nth-child(118) { transform:translate(60vw,38vh); background:#4ddeff; animation-duration:1.46s; animation-delay:-0.3212s } .particle:nth-child(119) { transform:translate(8vw,46vh); background:#97ff4d; animation-duration:1.9s; animation-delay:-0.19s } .particle:nth-child(120) { transform:translate(10vw,85vh); background:#7cff4d; animation-duration:1.42s; animation-delay:-1.3916s } .particle:nth-child(121) { transform:translate(92vw,99vh); background:#ff4df3; animation-duration:1.54s; animation-delay:-1.5092s } .particle:nth-child(122) { transform:translate(15vw,69vh); background:#4dccff; animation-duration:1.56s; animation-delay:-0.1248s } .particle:nth-child(123) { transform:translate(87vw,78vh); background:#eaff4d; animation-duration:1.16s; animation-delay:-0.1392s } .particle:nth-child(124) { transform:translate(85vw,83vh); background:#6aff4d; animation-duration:1.7s; animation-delay:-1.207s } .particle:nth-child(125) { transform:translate(28vw,88vh); background:#554dff; animation-duration:1.42s; animation-delay:-0.1136s } .particle:nth-child(126) { transform:translate(11vw,96vh); background:#ff4dc1; animation-duration:1.49s; animation-delay:-0.1341s } .particle:nth-child(127) { transform:translate(36vw,96vh); background:#4dd8ff; animation-duration:1.33s; animation-delay:-0.6384s } .particle:nth-child(128) { transform:translate(24vw,19vh); background:#4df0ff; animation-duration:1.23s; animation-delay:-0.246s } .particle:nth-child(129) { transform:translate(84vw,58vh); background:#f34dff; animation-duration:1.54s; animation-delay:-0.308s } .particle:nth-child(130) { transform:translate(40vw,83vh); background:#e44dff; animation-duration:1.43s; animation-delay:-0.1573s } .particle:nth-child(131) { transform:translate(17vw,100vh); background:#afff4d; animation-duration:1.76s; animation-delay:-1.408s } .particle:nth-child(132) { transform:translate(54vw,57vh); background:#ff974d; animation-duration:1.35s; animation-delay:-1.323s } .particle:nth-child(133) { transform:translate(90vw,86vh); background:#4d97ff; animation-duration:1.41s; animation-delay:-0.5781s } .particle:nth-child(134) { transform:translate(70vw,97vh); background:#4da9ff; animation-duration:1.87s; animation-delay:-1.5708s } .particle:nth-child(135) { transform:translate(12vw,52vh); background:#ff4d7f; animation-duration:1.11s; animation-delay:-0.7881s } .particle:nth-child(136) { transform:translate(53vw,4vh); background:#e7ff4d; animation-duration:1.28s; animation-delay:-0.7168s } .particle:nth-child(137) { transform:translate(93vw,3vh); background:#ffcc4d; animation-duration:1.19s; animation-delay:-0.8925s } .particle:nth-child(138) { transform:translate(48vw,76vh); background:#52ff4d; animation-duration:1.93s; animation-delay:-1.4861s } .particle:nth-child(139) { transform:translate(78vw,6vh); background:#4d4dff; animation-duration:1.11s; animation-delay:-1.0989s } .particle:nth-child(140) { transform:translate(50vw,73vh); background:#f64dff; animation-duration:1.52s; animation-delay:-1.3832s } .particle:nth-child(141) { transform:translate(47vw,47vh); background:#704dff; animation-duration:1.1s; animation-delay:-0.374s } .particle:nth-child(142) { transform:translate(19vw,94vh); background:#ff4dc1; animation-duration:1.49s; animation-delay:-0.7599s } .particle:nth-child(143) { transform:translate(9vw,25vh); background:#ff4dcc; animation-duration:1.07s; animation-delay:-0.3852s } .particle:nth-child(144) { transform:translate(90vw,27vh); background:#67ff4d; animation-duration:1.65s; animation-delay:-0.6765s } .particle:nth-child(145) { transform:translate(75vw,62vh); background:#ff4dcf; animation-duration:1.16s; animation-delay:-0.29s } .particle:nth-child(146) { transform:translate(90vw,62vh); background:#a34dff; animation-duration:1.21s; animation-delay:-0.3388s } .particle:nth-child(147) { transform:translate(58vw,16vh); background:#4dff9a; animation-duration:1.15s; animation-delay:-0.552s } .particle:nth-child(148) { transform:translate(27vw,50vh); background:#ff824d; animation-duration:1.8s; animation-delay:-0.216s } .particle:nth-child(149) { transform:translate(98vw,90vh); background:#ff4de4; animation-duration:1.62s; animation-delay:-1.1502s } .particle:nth-child(150) { transform:translate(26vw,14vh); background:#9aff4d; animation-duration:1.89s; animation-delay:-1.4553s } .particle:nth-child(151) { transform:translate(88vw,83vh); background:#91ff4d; animation-duration:1.94s; animation-delay:-1.2028s } .particle:nth-child(152) { transform:translate(67vw,79vh); background:#f34dff; animation-duration:1.17s; animation-delay:-0.4914s } .particle:nth-child(153) { transform:translate(16vw,19vh); background:#644dff; animation-duration:1.32s; animation-delay:-0.1584s } .particle:nth-child(154) { transform:translate(46vw,61vh); background:#4dff4d; animation-duration:1.08s; animation-delay:-0.3348s } .particle:nth-child(155) { transform:translate(81vw,57vh); background:#f94dff; animation-duration:1.11s; animation-delay:-1.0656s } .particle:nth-child(156) { transform:translate(4vw,56vh); background:#ff7f4d; animation-duration:1.79s; animation-delay:-0.7518s } .particle:nth-child(157) { transform:translate(35vw,64vh); background:#554dff; animation-duration:1.19s; animation-delay:-1.1781s } .particle:nth-child(158) { transform:translate(37vw,86vh); background:#e7ff4d; animation-duration:1.15s; animation-delay:-0.253s } .particle:nth-child(159) { transform:translate(63vw,47vh); background:#4d85ff; animation-duration:1.2s; animation-delay:-0.024s } .particle:nth-child(160) { transform:translate(25vw,64vh); background:#4dff5b; animation-duration:1.32s; animation-delay:-1.2144s } .particle:nth-child(161) { transform:translate(45vw,31vh); background:#ff4d64; animation-duration:1.5s; animation-delay:-0.135s } .particle:nth-child(162) { transform:translate(36vw,51vh); background:#4d67ff; animation-duration:1.82s; animation-delay:-0.2002s } .particle:nth-child(163) { transform:translate(81vw,74vh); background:#ffd84d; animation-duration:1.2s; animation-delay:-0.096s } .particle:nth-child(164) { transform:translate(99vw,70vh); background:#ff4db5; animation-duration:1.91s; animation-delay:-1.5471s } .particle:nth-child(165) { transform:translate(12vw,35vh); background:#de4dff; animation-duration:1.65s; animation-delay:-1.32s } .particle:nth-child(166) { transform:translate(60vw,70vh); background:#ff4dfc; animation-duration:1.76s; animation-delay:-0.2816s } .particle:nth-child(167) { transform:translate(4vw,31vh); background:#4dfff9; animation-duration:1.59s; animation-delay:-1.59s } .particle:nth-child(168) { transform:translate(87vw,17vh); background:#4dffbb; animation-duration:1.6s; animation-delay:-0.976s } .particle:nth-child(169) { transform:translate(38vw,51vh); background:#4dff7c; animation-duration:1.29s; animation-delay:-0.7869s } .particle:nth-child(170) { transform:translate(63vw,5vh); background:#4dff5b; animation-duration:1.63s; animation-delay:-1.6137s } .particle:nth-child(171) { transform:translate(72vw,73vh); background:#ff4d85; animation-duration:1.62s; animation-delay:-1.0368s } .particle:nth-child(172) { transform:translate(49vw,36vh); background:#4dfffc; animation-duration:1.05s; animation-delay:-0.1785s } .particle:nth-child(173) { transform:translate(97vw,99vh); background:#4d9aff; animation-duration:1.25s; animation-delay:-0.275s } .particle:nth-child(174) { transform:translate(66vw,32vh); background:#4dff82; animation-duration:1.78s; animation-delay:-1.1392s } .particle:nth-child(175) { transform:translate(20vw,39vh); background:#4de1ff; animation-duration:1.97s; animation-delay:-1.9306s } .particle:nth-child(176) { transform:translate(90vw,20vh); background:#ff4daf; animation-duration:1.3s; animation-delay:-0.234s } .particle:nth-child(177) { transform:translate(60vw,78vh); background:#7f4dff; animation-duration:1.92s; animation-delay:-0.96s } .particle:nth-child(178) { transform:translate(14vw,42vh); background:#4df9ff; animation-duration:1.97s; animation-delay:-0.0394s } .particle:nth-child(179) { transform:translate(47vw,66vh); background:#c94dff; animation-duration:1.91s; animation-delay:-0.5157s } .particle:nth-child(180) { transform:translate(61vw,41vh); background:#4d7cff; animation-duration:1.2s; animation-delay:-1.188s } .particle:nth-child(181) { transform:translate(77vw,51vh); background:#ff4ded; animation-duration:1.99s; animation-delay:-0.3781s } .particle:nth-child(182) { transform:translate(62vw,46vh); background:#fff34d; animation-duration:1.83s; animation-delay:-0.6222s } .particle:nth-child(183) { transform:translate(64vw,30vh); background:#ff4d97; animation-duration:1.53s; animation-delay:-1.2546s } .particle:nth-child(184) { transform:translate(3vw,49vh); background:#55ff4d; animation-duration:1.76s; animation-delay:-0.6688s } .particle:nth-child(185) { transform:translate(90vw,16vh); background:#ff4d79; animation-duration:1.87s; animation-delay:-0.3553s } .particle:nth-child(186) { transform:translate(63vw,37vh); background:#ff4dea; animation-duration:1.36s; animation-delay:-1.156s } .particle:nth-child(187) { transform:translate(1vw,3vh); background:#ff4dcc; animation-duration:1.39s; animation-delay:-0.4726s } .particle:nth-child(188) { transform:translate(69vw,44vh); background:#6dff4d; animation-duration:1.79s; animation-delay:-0.1969s } .particle:nth-child(189) { transform:translate(83vw,14vh); background:#5b4dff; animation-duration:1.11s; animation-delay:-0.5883s } .particle:nth-child(190) { transform:translate(27vw,71vh); background:#85ff4d; animation-duration:1.89s; animation-delay:-0.9261s } .particle:nth-child(191) { transform:translate(49vw,84vh); background:#734dff; animation-duration:1.86s; animation-delay:-1.581s } .particle:nth-child(192) { transform:translate(26vw,1vh); background:#4dffed; animation-duration:1.1s; animation-delay:-0.099s } .particle:nth-child(193) { transform:translate(97vw,84vh); background:#c9ff4d; animation-duration:1.24s; animation-delay:-0.9796s } .particle:nth-child(194) { transform:translate(68vw,54vh); background:#4d91ff; animation-duration:1.81s; animation-delay:-1.5747s } .particle:nth-child(195) { transform:translate(92vw,63vh); background:#7fff4d; animation-duration:1.6s; animation-delay:-1.28s } .particle:nth-child(196) { transform:translate(4vw,6vh); background:#7f4dff; animation-duration:1.48s; animation-delay:-0.962s } .particle:nth-child(197) { transform:translate(72vw,95vh); background:#ff9a4d; animation-duration:1.57s; animation-delay:-0.9263s } .particle:nth-child(198) { transform:translate(61vw,99vh); background:#ff4d97; animation-duration:1.38s; animation-delay:-1.38s } .particle:nth-child(199) { transform:translate(93vw,66vh); background:#ff4d91; animation-duration:1.28s; animation-delay:-0.4352s } .particle:nth-child(200) { transform:translate(90vw,52vh); background:#ea4dff; animation-duration:1.08s; animation-delay:-0.8856s } .particle:nth-child(201) { transform:translate(31vw,69vh); background:#f64dff; animation-duration:1.86s; animation-delay:-1.395s } .particle:nth-child(202) { transform:translate(13vw,97vh); background:#f6ff4d; animation-duration:1.01s; animation-delay:-0.8989s } .particle:nth-child(203) { transform:translate(14vw,42vh); background:#ff5b4d; animation-duration:1.19s; animation-delay:-0.0595s } .particle:nth-child(204) { transform:translate(99vw,42vh); background:#ffdb4d; animation-duration:1.06s; animation-delay:-0.5936s } .particle:nth-child(205) { transform:translate(1vw,49vh); background:#70ff4d; animation-duration:1.15s; animation-delay:-0.851s } .particle:nth-child(206) { transform:translate(13vw,60vh); background:#ffc44d; animation-duration:1.81s; animation-delay:-0.2172s } .particle:nth-child(207) { transform:translate(38vw,71vh); background:#4de7ff; animation-duration:1.28s; animation-delay:-0.3968s } .particle:nth-child(208) { transform:translate(100vw,66vh); background:#ff674d; animation-duration:1.56s; animation-delay:-0.8112s } .particle:nth-child(209) { transform:translate(20vw,39vh); background:#85ff4d; animation-duration:1.31s; animation-delay:-0.7467s } .particle:nth-child(210) { transform:translate(11vw,2vh); background:#ff914d; animation-duration:1.86s; animation-delay:-0.8556s } .particle:nth-child(211) { transform:translate(36vw,31vh); background:#ff4de4; animation-duration:1.25s; animation-delay:-0.6s } .particle:nth-child(212) { transform:translate(5vw,29vh); background:#52ff4d; animation-duration:1.68s; animation-delay:-0.8064s } .particle:nth-child(213) { transform:translate(59vw,36vh); background:#4dffa3; animation-duration:1.94s; animation-delay:-0.3298s } .particle:nth-child(214) { transform:translate(24vw,17vh); background:#4d79ff; animation-duration:1.04s; animation-delay:-0.468s } .particle:nth-child(215) { transform:translate(25vw,12vh); background:#ff5e4d; animation-duration:1.94s; animation-delay:-1.649s } .particle:nth-child(216) { transform:translate(52vw,87vh); background:#ff6a4d; animation-duration:1.67s; animation-delay:-0.2505s } .particle:nth-child(217) { transform:translate(8vw,67vh); background:#4d8bff; animation-duration:1.38s; animation-delay:-0.2622s } .particle:nth-child(218) { transform:translate(54vw,86vh); background:#4df0ff; animation-duration:1.81s; animation-delay:-0.3801s } .particle:nth-child(219) { transform:translate(14vw,35vh); background:#4d7cff; animation-duration:1.51s; animation-delay:-0.453s } .particle:nth-child(220) { transform:translate(52vw,69vh); background:#e44dff; animation-duration:1.89s; animation-delay:-0.5859s } .particle:nth-child(221) { transform:translate(88vw,36vh); background:#c1ff4d; animation-duration:1.73s; animation-delay:-0.7612s } .particle:nth-child(222) { transform:translate(91vw,61vh); background:#ff4dcf; animation-duration:1.68s; animation-delay:-0.7392s } .particle:nth-child(223) { transform:translate(57vw,75vh); background:#704dff; animation-duration:1.92s; animation-delay:-1.2096s } .particle:nth-child(224) { transform:translate(48vw,16vh); background:#a04dff; animation-duration:1.39s; animation-delay:-1.3205s } .particle:nth-child(225) { transform:translate(50vw,95vh); background:#ffaf4d; animation-duration:1.09s; animation-delay:-0.8393s } .particle:nth-child(226) { transform:translate(87vw,13vh); background:#ffc44d; animation-duration:1.95s; animation-delay:-1.6575s } .particle:nth-child(227) { transform:translate(88vw,23vh); background:#4d9aff; animation-duration:1.59s; animation-delay:-1.4628s } .particle:nth-child(228) { transform:translate(36vw,97vh); background:#4dbbff; animation-duration:1.38s; animation-delay:-0.7314s } .particle:nth-child(229) { transform:translate(40vw,38vh); background:#4da0ff; animation-duration:1.91s; animation-delay:-1.0887s } .particle:nth-child(230) { transform:translate(42vw,19vh); background:#4d61ff; animation-duration:1.94s; animation-delay:-0.6596s } .particle:nth-child(231) { transform:translate(78vw,26vh); background:#4dd8ff; animation-duration:1.26s; animation-delay:-1.1214s } .particle:nth-child(232) { transform:translate(75vw,47vh); background:#6dff4d; animation-duration:1.4s; animation-delay:-0.7s } .particle:nth-child(233) { transform:translate(32vw,50vh); background:#4dff6d; animation-duration:1.47s; animation-delay:-0.8085s } .particle:nth-child(234) { transform:translate(92vw,46vh); background:#ff854d; animation-duration:1.82s; animation-delay:-1.2558s } .particle:nth-child(235) { transform:translate(55vw,84vh); background:#ffa94d; animation-duration:1.23s; animation-delay:-1.0701s } .particle:nth-child(236) { transform:translate(31vw,96vh); background:#ff4d5b; animation-duration:1.84s; animation-delay:-0.6992s } .particle:nth-child(237) { transform:translate(60vw,47vh); background:#4dff7c; animation-duration:1.52s; animation-delay:-0.7904s } .particle:nth-child(238) { transform:translate(26vw,86vh); background:#de4dff; animation-duration:1.01s; animation-delay:-0.808s } .particle:nth-child(239) { transform:translate(28vw,53vh); background:#6a4dff; animation-duration:1.88s; animation-delay:-1.8236s } .particle:nth-child(240) { transform:translate(89vw,39vh); background:#e7ff4d; animation-duration:1.56s; animation-delay:-1.2324s } .particle:nth-child(241) { transform:translate(49vw,13vh); background:#ff4d6a; animation-duration:1.37s; animation-delay:-0.7398s } .particle:nth-child(242) { transform:translate(23vw,1vh); background:#4dff61; animation-duration:1.94s; animation-delay:-0.3298s } .particle:nth-child(243) { transform:translate(74vw,70vh); background:#e4ff4d; animation-duration:1.86s; animation-delay:-1.488s } .particle:nth-child(244) { transform:translate(78vw,81vh); background:#ff4d85; animation-duration:1.87s; animation-delay:-1.0472s } .particle:nth-child(245) { transform:translate(81vw,94vh); background:#ffac4d; animation-duration:1.23s; animation-delay:-0.6396s } .particle:nth-child(246) { transform:translate(24vw,48vh); background:#4d94ff; animation-duration:1.39s; animation-delay:-0.0417s } .particle:nth-child(247) { transform:translate(72vw,61vh); background:#4dffaf; animation-duration:1.64s; animation-delay:-1.2628s } .particle:nth-child(248) { transform:translate(45vw,20vh); background:#ff4d94; animation-duration:1.58s; animation-delay:-0.9322s } .particle:nth-child(249) { transform:translate(58vw,57vh); background:#4d5eff; animation-duration:1.83s; animation-delay:-1.2078s } .particle:nth-child(250) { transform:translate(47vw,2vh); background:#ff6a4d; animation-duration:1.59s; animation-delay:-0.1749s } .particle:nth-child(251) { transform:translate(57vw,42vh); background:#ff4d70; animation-duration:1.08s; animation-delay:-0.1836s } .particle:nth-child(252) { transform:translate(1vw,83vh); background:#ff4dfc; animation-duration:1.36s; animation-delay:-1.0064s } .particle:nth-child(253) { transform:translate(69vw,80vh); background:#55ff4d; animation-duration:1.87s; animation-delay:-0.2992s } .particle:nth-child(254) { transform:translate(78vw,43vh); background:#4dfff6; animation-duration:1.33s; animation-delay:-0.5852s } .particle:nth-child(255) { transform:translate(67vw,22vh); background:#ffa94d; animation-duration:1.38s; animation-delay:-1.1316s } .particle:nth-child(256) { transform:translate(62vw,96vh); background:#4dff7c; animation-duration:1.06s; animation-delay:-0.901s } .particle:nth-child(257) { transform:translate(25vw,42vh); background:#ff4dea; animation-duration:1.79s; animation-delay:-1.1814s } .particle:nth-child(258) { transform:translate(71vw,35vh); background:#4dffea; animation-duration:1.06s; animation-delay:-0.4028s } .particle:nth-child(259) { transform:translate(91vw,5vh); background:#af4dff; animation-duration:1.14s; animation-delay:-1.1172s } .particle:nth-child(260) { transform:translate(32vw,1vh); background:#ff584d; animation-duration:1.81s; animation-delay:-0.724s } .particle:nth-child(261) { transform:translate(81vw,22vh); background:#4df3ff; animation-duration:1.32s; animation-delay:-0.4356s } .particle:nth-child(262) { transform:translate(41vw,62vh); background:#ff4d5e; animation-duration:1.25s; animation-delay:-0.575s } .particle:nth-child(263) { transform:translate(71vw,60vh); background:#4da0ff; animation-duration:1.56s; animation-delay:-0.6864s } .particle:nth-child(264) { transform:translate(98vw,63vh); background:#ffbe4d; animation-duration:1.51s; animation-delay:-0.7701s } .particle:nth-child(265) { transform:translate(70vw,91vh); background:#fffc4d; animation-duration:1.36s; animation-delay:-0.5712s } .particle:nth-child(266) { transform:translate(55vw,56vh); background:#b24dff; animation-duration:1.16s; animation-delay:-0.5568s } .particle:nth-child(267) { transform:translate(73vw,25vh); background:#ff4d91; animation-duration:1.46s; animation-delay:-1.0658s } .particle:nth-child(268) { transform:translate(41vw,41vh); background:#4dd8ff; animation-duration:1.53s; animation-delay:-0.2907s } .particle:nth-child(269) { transform:translate(16vw,67vh); background:#8bff4d; animation-duration:1.88s; animation-delay:-0.7896s } .particle:nth-child(270) { transform:translate(88vw,39vh); background:#ff4dea; animation-duration:1.53s; animation-delay:-1.5147s } .particle:nth-child(271) { transform:translate(56vw,1vh); background:#4dfff6; animation-duration:1.58s; animation-delay:-0.1264s } .particle:nth-child(272) { transform:translate(45vw,30vh); background:#bbff4d; animation-duration:1.48s; animation-delay:-0.5772s } .particle:nth-child(273) { transform:translate(65vw,41vh); background:#4dffe7; animation-duration:1.75s; animation-delay:-1.015s } .particle:nth-child(274) { transform:translate(33vw,77vh); background:#4dffc9; animation-duration:1.44s; animation-delay:-1.3104s } .particle:nth-child(275) { transform:translate(75vw,84vh); background:#ffcc4d; animation-duration:1.5s; animation-delay:-0.855s } .particle:nth-child(276) { transform:translate(24vw,85vh); background:#ff4dbe; animation-duration:1.34s; animation-delay:-0.6566s } .particle:nth-child(277) { transform:translate(81vw,83vh); background:#ffbb4d; animation-duration:1.72s; animation-delay:-1.204s } .particle:nth-child(278) { transform:translate(94vw,96vh); background:#4dffff; animation-duration:1.42s; animation-delay:-0.355s } .particle:nth-child(279) { transform:translate(82vw,37vh); background:#ffd24d; animation-duration:1.71s; animation-delay:-0.0684s } .particle:nth-child(280) { transform:translate(34vw,27vh); background:#76ff4d; animation-duration:1.33s; animation-delay:-1.0108s } .particle:nth-child(281) { transform:translate(8vw,24vh); background:#4dfff9; animation-duration:1.76s; animation-delay:-1.6192s } .particle:nth-child(282.........完整代码请登录后点击上方下载按钮下载查看
网友评论0