一群泡泡升起动画效果
代码语言:html
所属分类:粒子
代码描述:一群泡泡升起动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; margin: 0; padding: 0; position: absolute; } body, html { width: 100%; height: 100%; overflow: hidden; background: #111; } .bubbles { top: 0; right: 0; left: 0; bottom: 0; perspective: 1200px; perspective-origin: 50% 50%; transform-style: preserve-3d; } .bubbles .bubble { border-radius: 100%; transform: translateY(800px) scale(0); opacity: 0.8; animation-name: bubbles; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .bubbles .bubble:before { content: ''; position: absolute; top: 10%; left: 5%; width: 90%; height: 50%; border-radius: 100%; filter: blur(5px); background: radial-gradient(circle at top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 58%); } .bubble:nth-of-type(1) { width: 77px; height: 77px; top: 17vh; left: 46vw; animation-delay: 0.0333333333s; animation-duration: 8s; } .bubble:nth-of-type(2) { width: 41px; height: 41px; top: 42vh; left: 24vw; animation-delay: 0.0666666667s; animation-duration: 15s; } .bubble:nth-of-type(3) { width: 21px; height: 21px; top: 14vh; left: 15vw; animation-delay: 0.1s; animation-duration: 4s; } .bubble:nth-of-type(4) { width: 77px; height: 77px; top: 44vh; left: 96vw; animation-delay: 0.1333333333s; animation-duration: 34s; } .bubble:nth-of-type(5) { width: 29px; height: 29px; top: 1vh; left: 78vw; animation-delay: 0.1666666667s; animation-duration: 23s; } .bubble:nth-of-type(6) { width: 55px; height: 55px; top: 55vh; left: 62vw; animation-delay: 0.2s; animation-duration: 23s; } .bubble:nth-of-type(7) { width: 94px; height: 94px; top: 51vh; left: 40vw; animation-delay: 0.2333333333s; animation-duration: 18s; } .bubble:nth-of-type(8) { width: 114px; height: 114px; top: 70vh; left: 17vw; animation-delay: 0.2666666667s; animation-duration: 22s; } .bubble:nth-of-type(9) { width: 39px; height: 39px; top: 69vh; left: 13vw; animation-delay: 0.3s; animation-duration: 19s; } .bubble:nth-of-type(10) { width: 87px; height: 87px; top: 21vh; left: 27vw; animation-delay: 0.3333333333s; animation-duration: 14s; } .bubble:nth-of-type(11) { width: 70px; height: 70px; top: 29vh; left: 94vw; animation-delay: 0.3666666667s; animation-duration: 13s; } .bubble:nth-of-type(12) { width: 84px; height: 84px; top: 97vh; left: 55vw; animation-delay: 0.4s; animation-duration: 22s; } .bubble:nth-of-type(13) { width: 73px; height: 73px; top: 41vh; left: 79vw; animation-delay: 0.4333333333s; animation-duration: 10s; } .bubble:nth-of-type(14) { width: 61px; height: 61px; top: 17vh; left: 8vw; animation-delay: 0.4666666667s; animation-duration: 24s; } .bubble:nth-of-type(15) { width: 105px; height: 105px; top: 67vh; left: 8vw; animation-delay: 0.5s; animation-duration: 16s; } .bubble:nth-of-type(16) { width: 118px; height: 118px; top: 56vh; left: 10vw; animation-delay: 0.5333333333s; animation-duration: 17s; } .bubble:nth-of-type(17) { width: 124px; height: 124px; top: 86vh; left: 22vw; animation-delay: 0.5666666667s; animation-duration: 11s; } .bubble:nth-of-type(18) { width: 23px; height: 23px; top: 19vh; left: 22vw; animation-delay: 0.6s; animation-duration: 7s; } .bubble:nth-of-type(19) { width: 75px; height: 75px; top: 16vh; left: 55vw; animation-delay: 0.6333333333s; animation-duration: 31s; } .bubble:nth-of-type(20) { width: 115px; height: 115px; top: 28vh; left: 19vw; animation-delay: 0.6666666667s; animation-duration: 31s; } .bubble:nth-of-type(21) { width: 122px; height: 122px; top: 74vh; left: 52vw; animation-delay: 0.7s; animation-duration: 37s; } .bubble:nth-of-type(22) { width: 106px; height: 106px; top: 31vh; left: 1vw; animation-delay: 0.7333333333s; animation-duration: 8s; } .bubble:nth-of-type(23) { width: 95px; height: 95px; top: 64vh; left: 1vw; animation-delay: 0.7666666667s; animation-duration: 28s; } .bubble:nth-of-type(24) { width: 16px; height: 16px; top: 25vh; left: 2vw; animation-delay: 0.8s; animation-duration: 7s; } .bubble:nth-of-type(25) { width: 87px; height: 87px; top: 69vh; left: 52vw; animation-delay: 0.8333333333s; animation-duration: 37s; } .bubble:nth-of-type(26) { width: 59px; height: 59px; top: 91vh; left: 11vw; animation-delay: 0.8666666667s; animation-duration: 31s; } .bubble:nth-of-type(27) { width: 31px; height: 31px; top: 38vh; left: 4vw; animation-delay: 0.9s; animation-duration: 16s; } .bubble:nth-of-type(28) { width: 24px; height: 24px; top: 59vh; left: 78vw; animation-delay: 0.9333333333s; animation-duration: 28s; } .bubble:nth-of-type(29) { width: 21px; height: 21px; top: 20vh; left: 84vw; animation-delay: 0.9666666667s; animation-duration: 12s; } .bubble:nth-of-type(30) { width: 97px; height: 97px; top: 85vh; left: 44vw; animation-delay: 1s; animation-duration: 24s; } .bubble:nth-of-type(31) { width: 10px; height: 10px; top: 12vh; left: 46vw; animation-delay: 1.0333333333s; animation-duration: 29s; } .bubble:nth-of-type(32) { width: 82px; height: 82px; top: 46vh; left: 87vw; animation-delay: 1.0666666667s; animation-duration: 28s; } .bubble:nth-of-type(33) { width: 41px; height: 41px; top: 82vh; left: 36vw; animation-delay: 1.1s; animation-duration: 30s; } .bubble:nth-of-type(34) { width: 130px; height: 130px; top: 30vh; left: 20vw; animation-delay: 1.1333333333s; animation-duration: 17s; } .bubble:nth-of-type(35) { width: 33px; height: 33px; top: 90vh; left: 25vw; animation-delay: 1.1666666667s; animation-duration: 37s; } .bubble:nth-of-type(36) { width: 95px; height: 95px; top: 15vh; left: 81vw; animation-delay: 1.2s; animation-duration: 18s; } .bubble:nth-of-type(37) { width: 97px; height: 97px; top: 21vh; left: 85vw; animation-delay: 1.2333333333s; animation-duration: 12s; } .bubble:nth-of-type(38) { width: 1px; height: 1px; top: 18vh; left: 51vw; animation-delay: 1.2666666667s; animation-duration: 5s; } .bubble:nth-of-type(39) { width: 57px; height: 57px; top: 59vh; left: 58vw; animation-delay: 1.3s; animation-duration: 3s; } .bubble:nth-of-type(40) { width: 125px; height: 125px; top: 87vh; left: 31vw; animation-delay: 1.3333333333s; animation-duration: 13s; } .bubble:nth-of-type(41) { width: 19px; height: 19px; top: 46vh; left: 75vw; animation-delay: 1.3666666667s; animation-duration: 36s; } .bubble:nth-of-type(42) { width: 47px; height: 47px; top: 51vh; left: 88vw; animation-delay: 1.4s; animation-duration: 37s; } .bubble:nth-of-type(43) { width: 77px; height: 77px; top: 67vh; left: 64vw; animation-delay: 1.4333333333s; animation-duration: 14s; } .bubble:nth-of-type(44) { width: 103px; height: 103px; top: 77vh; left: 75vw; animation-delay: 1.4666666667s; animation-duration: 15s; } .bubble:nth-of-type(45) { width: 9px; height: 9px; top: 19vh; left: 56vw; animation-delay: 1.5s; animation-duration: 22s; } .bubble:nth-of-type(46) { width: 121px; height: 121px; top: 9vh; left: 13vw; animation-delay: 1.5333333333s; animation-duration: 28s; } .bubble:nth-of-type(47) { width: 50px; height: 50px; top: 61vh; left: 57vw; animation-delay: 1.5666666667s; animation-duration: 36s; } .bubble:nth-of-type(48) { width: 39px; height: 39px; top: 62vh; left: 82vw; animation-delay: 1.6s; animation-duration: 31s; } .bubble:nth-of-type(49) { width: 84px; height: 84px; top: 2vh; left: 5vw; animation-delay: 1.6333333333s; animation-duration: 25s; } .bubble:nth-of-type(50) { width: 65px; height: 65px; top: 12vh; left: 13vw; animation-delay: 1.6666666667s; animation-duration: 25s; } .bubble:nth-of-type(51) { width: 51px; height: 51px; top: 1vh; left: 49vw; animation-delay: 1.7s; animation-duration: 26s; } .bubble:nth-of-type(52) { width: 91px; height: 91px; top: 65vh; left: 13vw; animation-delay: 1.7333333333s; animation-duration: 10s; } .bubble:nth-of-type(53) { width: 39px; height: 39px; top: 88vh; left: 1vw; animation-delay: 1.7666666667s; animation-duration: 17s; } .bubble:nth-of-type(54) { width: 85px; height: 85px; top: 50vh; left: 43vw; animation-delay: 1.8s; animation-duration: 9s; } .bubble:nth-of-type(55) { width: 9px; height: 9px; top: 48vh; left: 23vw; animation-delay: 1.8333333333s; animation-duration: 34s; } .bubble:nth-of-type(56) { width: 109px; height: 109px; top: 27vh; left: 99vw; animation-delay: 1.8666666667s; animation-duration: 5s; } .bubble:nth-of-type(57) { width: 9px; height: 9px; top: 96vh; left: 29vw; animation-delay: 1.9s; animation-duration: 4s; } .bubble:nth-of-type(58) { width: 83px; height: 83px; top: 54vh; left: 56vw; animation-delay: 1.9333333333s; animation-duration: 37s; } .bubble:nth-of-type(59) { width: 30px; height: 30px; top: 24vh; left: 93vw; animation-delay: 1.9666666667s; animation-duration: 11s; } .bubble:nth-of-type(60) { width: 95px; height: 95px; top: 52vh; left: 61vw; animation-delay: 2s; animation-duration: 33s; } .bubble:nth-of-type(61) { width: 71px; height: 71px; top: 43vh; left: 44vw; animation-delay: 2.0333333333s; animation-duration: 13s; } .bubble:nth-of-type(62) { width: 21px; height: 21px; top: 14vh; left: 40vw; animation-delay: 2.0666666667s; animation-duration: 23s; } .bubble:nth-of-type(63) { width: 106px; height: 106px; top: 24vh; left: 32vw; animation-delay: 2.1s; animation-duration: 24s; } .bubble:nth-of-type(64) { width: 125px; height: 125px; top: 22vh; left: 82vw; animation-delay: 2.1333333333s; animation-duration: 23s; } .bubble:nth-of-type(65) { width: 31px; height: 31px; top: 22vh; left: 52vw; animation-delay: 2.1666666667s; animation-duration: 28s; } .bubble:nth-of-type(66) { width: 20px; height: 20px; top: 37vh; left: 96vw; animation-delay: 2.2s; animation-duration: 32s; } .bubble:nth-of-type(67) { width: 34px; height: 34px; top: 89vh; left: 76vw; animation-delay: 2.2333333333s; animation-duration: 5s; } .bubble:nth-of-type(68) { width: 82px; height: 82px; top: 5vh; left: 34vw; animation-delay: 2.2666666667s; animation-duration: 6s; } .bubble:nth-of-type(69) { width: 108px; height: 108px; top: 37vh; left: 59vw; animation-delay: 2.3s; animation-duration: 29s; } .bubble:nth-of-type(70) { width: 106px; height: 106px; top: 86vh; left: 54vw; animation-delay: 2.3333333333s; animation-duration: 21s; } .bubble:nth-of-type(71) { width: 80px; height: 80px; top: 29vh; left: 60vw; animation-delay: 2.3666666667s; animation-duration: 9s; } .bubble:nth-of-type(72) { width: 25px; height: 25px; top: 96vh; left: 68vw; animation-delay: 2.4s; animation-duration: 25s; } .bubble:nth-of-type(73) { width: 59px; height: 59px; top: 63vh; left: 55vw; animation-delay: 2.4333333333s; animation-duration: 6s; } .bubble:nth-of-type(74) { width: 93px; height: 93px; top: 96vh; left: 35vw; animation-delay: 2.4666666667s; animation-duration: 5s; } .bubble:nth-of-type(75) { width: 114px; height: 114px; top: 17vh; left: 4vw; animation-delay: 2.5s; animation-duration: 12s; } .bubble:nth-of-type(76) { width: 81px; height: 81px; top: 30vh; left: 74vw; animation-delay: 2.5333333333s; animation-duration: 30s; } .bubble:nth-of-type(77) { width: 6px; height: 6px; top: 100vh; left: 11vw; animation-delay: 2.5666666667s; animation-duration: 17s; } .bubble:nth-of-type(78) { width: 36px; height: 36px; top: 46vh; left: 80vw; animation-delay: 2.6s; animation-duration: 5s; } .bubble:nth-of-type(79) { width: 9px; height: 9px; top: 7vh; left: 97vw; animation-delay: 2.6333333333s; animation-duration: 19s; } .bubble:nth-of-type(80) { width: 73px; height: 73px; top: 36vh; left: 15vw; animation-delay: 2.6666666667s; animation-duration: 37s; } .bubble:nth-of-type(81) { width: 38px; height: 38px; top: 77vh; left: 12vw; animation-delay: 2.7s; animation-duration: 32s; } .bubble:nth-of-type(82) { width: 110px; height: 110px; top: 44vh; left: 50vw; animation-delay: 2.7333333333s; animation-duration: 11s; } .bubble:nth-of-type(83) { width: 113px; height: 113px; top: 33vh; left: 38vw; animation-delay: 2.7666666667s; animation-duration: 10s; } .bubble:nth-of-type(84) { width: 103px; height: 103px; top: 4vh; left: 86vw; animation-delay: 2.8s; animation-duration: 26s; } .bubble:nth-of-type(85) { width: 118px; height: 118px; top: 45vh; left: 85vw; animation-delay: 2.8333333333s; animation-duration: 22s; } .bubble:nth-of-type(86) { width: 19px; height: 19px; top: 58vh; left: 66vw; animation-delay: 2.8666666667s; animation-duration: 34s; } .bubble:nth-of-type(87) { width: 101px; height: 101px; top: 48vh; left: 36vw; animation-delay: 2.9s; animation-duration: 17s; } .bubble:nth-of-type(88) { width: 123px; height: 123px; top: 5vh; left: 81vw; animation-delay: 2.9333333333s; animation-duration: 34s; } .bubble:nth-of-type(89) { width: 65px; height: 65px; top: 22vh; left: 24vw; animation-delay: 2.9666666667s; animation-duration: 35s; } .bubble:nth-of-type(90) { width: 5px; height: 5px; top: 52vh; left: 29vw; animation-delay: 3s; animation-duration: 20s; } .bubble:nth-of-type(91) { width: 6px; height: 6px; top: 32vh; left: 72vw; animation-delay: 3.0333333333s; animation-duration: 30s; } .bubble:nth-of-type(92) { width: 112px; height: 112px; top: 23vh; left: 8vw; animation-delay: 3.0666666667s; animation-duration: 28s; } .bubble:nth-of-type(93) { width: 12px; height: 12px; top: 61vh; left: 1vw; animation-delay: 3.1s; animation-duration: 32s; } .bubble:nth-of-type(94) { width: 33px; height: 33px; top: 36vh; left: 40vw; animation-delay: 3.1333333333s; animation-duration: 14s; } .bubble:nth-of-type(95) { width: 42px; height: 42px; top: 6vh; left: 88vw; animation-delay: 3.1666666667s; animation-duration: 31s; } .bubble:nth-of-type(96) { width: 47px; height: 47px; top: 64vh; left: 19vw; animation-delay: 3.2s; animation-duration: 30s; } .bubble:nth-of-type(97) { width: 98px; height: 98px; top: 1vh; left: 43vw; animation-delay: 3.2333333333s; animation-duration: 14s; } .bubble:nth-of-type(98) { width: 124px; height: 124px; top: 95vh; left: 6vw; animation-delay: 3.2666666667s; animation-duration: 3s; } .bubble:nth-of-type(99) { width: 71px; height: 71px; top: 56vh; left: 5vw; animation-delay: 3.3s; animation-duration: 7s; } .bubble:nth-of-type(100) { width: 59px; height: 59px; top: 74vh; left: 83vw; animation-delay: 3.3333333333s; animation-duration: 30s; } .bubble:nth-of-type(101) { width: 94px; height: 94px; top: 40vh; left: 66vw; animation-delay: 3.3666666667s; animation-duration: 22s; } .bubble:nth-of-type(102) { width: 6px; height: 6px; top: 88vh; left: 82vw; animation-delay: 3.4s; animation-duration: 10s; } .bubble:nth-of-type(103) { width: 72px; height: 72px; top: 9vh; left: 22vw; animation-delay: 3.4333333333s; animation-duration: 23s; } .bubble:nth-of-type(104) { width: 108px; height: 108px; top: 52vh; left: 51vw; animation-delay: 3.4666666667s; animation-duration: 37s; } .bubble:nth-of-type(105) { width: 102px; height: 102px; top: 12vh; left: 55vw; animation-delay: 3.5s; animation-duration: 29s; } .bubble:nth-of-type(106) { width: 108px; height: 108px; top: 26vh; left: 88vw; animation-delay: 3.5333333333s; animation-duration: 5s; } .bubble:nth-of-type(107) { width: 32px; height: 32px; top: 92vh; left: 29vw; animation-delay: 3.5666666667s; animation-duration: 20s; } .bubble:nth-of-type(108) { width: 118px; height: 118px; top: 85vh; left: 52vw; animation-delay: 3.6s; animation-duration: 28s; } .bubble:nth-of-type(109) { width: 76px; height: 76px; top: 67vh; left: 27vw; animation-delay: 3.6333333333s; animation-duration: 25s; } .bubble:nth-of-type(110) { width: 34px; height: 34px; top: 77vh; left: 63vw; animation-delay: 3.6666666667s; animation-duration: 32s; } .bubble:nth-of-type(111) { width: 31px; height: 31px; top: 49vh; left: 26vw; animation-delay: 3.7s; animation-duration: 9s; } .bubble:nth-of-type(112) { width: 50px; height: 50px; top: 51vh; left: 85vw; animation-delay: 3.7333333333s; animation-duration: 12s; } .bubble:nth-of-type(113) { width: 106px; height: 106px; top: 89vh; left: 4vw; animation-delay: 3.7666666667s; animation-duration: 4s; } .bubble:nth-of-type(114) { width: 90px; height: 90px; top: 7vh; left: 84vw; animation-delay: 3.8s; animation-duration: 26s; } .bubble:nth-of-type(115) { width: 17px; height: 17px; top: 15vh; left: 93vw; animation-delay: 3.8333333333s; animation-duration: 29s; } .bubble:nth-of-type(116) { width: 41px; height: 41px; top: 74vh; left: 18vw; animation-delay: 3.8666666667s; animation-duration: 9s; } .bubble:nth-of-type(117) { width: 94px; height: 94px; top: 21vh; left: 79vw; animation-delay: 3.9s; animation-duration: 20s; } .bubble:nth-of-type(118) { width: 106px; height: 106px; top: 78vh; left: 24vw; animation-delay: 3.9333333333s; animation-duration: 13s; } .bubble:nth-of-type(119) { width: 97px; height: 97px; top: 36vh; left: 40vw; animation-delay: 3.9666666667s; animation-duration: 33s; } .bubble:nth-of-type(120) { width: 101px; height: 101px; top: 9vh; left: 15vw; animation-delay: 4s; animation-duration: 20s; } .bubble:nth-of-type(121) { width: 54px; height: 54px; top: 52vh; left: 58vw; animation-delay: 4.0333333333s; animation-duration: 26s; } .bubble:nth-of-type(122) { width: 110px; height: 110px; top: 47vh; left: 91vw; animation-delay: 4.0666666667s; animation-duration: 7s; } .bubble:nth-of-type(123) { width: 14px; height: 14px; top: 82vh; left: 52vw; animation-delay: 4.1s; animation-duration: 11s; } .bubble:nth-of-type(124) { width: 2px; height: 2px; top: 17vh; left: 13vw; animation-delay: 4.1333333333s; animation-duration: 10s; } .bubble:nth-of-type(125) { width: 60px; height: 60px; top: 56vh; left: 100vw; animation-delay: 4.1666666667s; animation-duration: 14s; } .bubble:nth-of-type(126) { width: 37px; height: 37px; top: 37vh; left: 51vw; animation-delay: 4.2s; animation-duration: 15s; } .bubble:nth-of-type(127) { width: 50px; height: 50px; top: 85vh; left: 8vw; animation-delay: 4.2333333333s; animation-duration: 17s; } .bubble:nth-of-type(128) { width: 42px; height: 42px; top: 16vh; left: 29vw; animation-delay: 4.2666666667s; animation-duration: 11s; } .bubble:nth-of-type(129) { width: 74px; height: 74px; top: 26vh; left: 15vw; animation-delay: 4.3s; animation-duration: 30s; } .bubble:nth-of-type(130) { width: 105px; height: 105px; top: 51vh; left: 23vw; animation-delay: 4.3333333333s; animation-duration: 15s; } .bubble:nth-of-type(131) { width: 78px; height: 78px; top: 31vh; left: 7vw; animation-delay: 4.3666666667s; animation-duration: 13s; } .bubble:nth-of-type(132) { width: 110px; height: 110px; top: 25vh; left: 94vw; animation-delay: 4.4s; animation-duration: 9s; } .bubble:nth-of-type(133) { width: 106px; height: 106px; top: 52vh; left: 91vw; animation-delay: 4.4333333333s; animation-duration: 16s; } .bubble:nth-of-type(134) { width: 126px; height: 126px; top: 61vh; left: 56vw; animation-delay: 4.4666666667s; animation-duration: 23s; } .bubble:nth-of-type(135) { width: 124px; height: 124px; top: 2vh; left: 69vw; animation-delay: 4.5s; animation-duration: 6s; } .bubble:nth-of-type(136) { width: 104px; height: 104px; top: 36vh; left: 34vw; animation-delay: 4.5333333333s; animation-duration: 30s; } .bubble:nth-of-type(137) { width: 108px; height: 108px; top: 78vh; left: 94vw; animation-delay: 4.5666666667s; animation-duration: 13s; } .bubble:nth-of-type(138) { width: 130px; height: 130px; top: 88vh; left: 66vw; animation-delay: 4.6s; animation-duration: 32s; } .bubble:nth-of-type(139) { width: 104px; height: 104px; top: 85vh; left: 52vw; animation-delay: 4.6333333333s; animation-duration: 24s; } .bubble:nth-of-type(140) { width: 5px; height: 5px; top: 61vh; left: 34vw; animation-delay: 4.6666666667s; animation-duration: 12s; } .bubble:nth-of-type(141) { width: 99px; height: 99px; top: 57vh; left: 97vw; animation-delay: 4.7s; animation-duration: 4s; } .bubble:nth-of-type(142) { width: 10px; height: 10px; top: 4vh; left: 23vw; animation-delay: 4.7333333333s; animation-duration: 23s; } .bubble:nth-of-type(143) { width: 62px; height: 62px; top: 14vh; left: 23vw; animation-delay: 4.7666666667s; animation-duration: 25s; } .bubble:nth-of-type(144) { width: 106px; height: 106px; top: 57vh; left: 7vw; animation-delay: 4.8s; animation-duration: 12s; } .bubble:nth-of-type(145) { width: 72px; height: 72px; top: 53vh; left: 56vw; animation-delay: 4.8333333333s; animation-duration: 3s; } .bubble:nth-of-type(146) { width: 81px; height: 81px; top: 96vh; left: 79vw; animation-delay: 4.8666666667s; animation-duration: 23s; } .bubble:nth-of-type(147) { width: 17px; height: 17px; top: 15vh; left: 41vw; animation-delay: 4.9s; animation-duration: 8s; } .bubble:nth-of-type(148) { width: 60px; height: 60px; top: 44vh; left: 81vw; animation-delay: 4.9333333333s; animation-duration: 33s; } .bubble:nth-of-type(149) { width: 20px; height: 20px; top: 42vh; left: 39vw; animation-delay: 4.9666666667s; animation-duration: 22s; } .bubble:nth-of-type(150) { width: 129px; height: 129px; top: 1vh; left: 45vw; animation-delay: 5s; animation-duration: 12s; } .bubble:nth-of-type(151) { width: 17px; height: 17px; top: 38vh; left: 57vw; animation-delay: 5.0333333333s; animation-duration: 6s; } .bubble:nth-of-type(152) { width: 42px; height: 42px; top: 49vh; left: 15vw; animation-delay: 5.0666666667s; animation-duration: 5s; } .bubble:nth-of-type(153) { width: 7px; height: 7px; top: 68vh; left: 78vw; animation-delay: 5.1s; animation-duration: 22s; } .bubble:nth-of-type(154) { width: 94px; height: 94px; top: 84vh; left: 88vw; animation-delay: 5.1333333333s; animation-duration: 12s; } .bubble:nth-of-type(155) { width: 56px; height: 56px; top: 86vh; left: 46vw; animation-delay: 5.1666666667s; animation-duration: 28s; } .bubble:nth-of-type(156) { width: 33px; height: 33px; top: 39vh; left: 14vw; animation-delay: 5.2s; animation-duration: 33s; } .bubble:nth-of-type(157) { width: 76px; height: 76px; top: 4vh; left: 36vw; animation-delay: 5.2333333333s; animation-duration: 13s; } .bubble:nth-of-type(158) { width: 15px; height: 15px; top: 32vh; left: 49vw; animation-delay: 5.2666666667s; animation-duration: 20s; } .bubble:nth-of-type(159) { width: 71px; height: 71px; top: 97vh; left: 62vw; animation-delay: 5.3s; animation-duration: 31s; } .bubble:nth-of-type(160) { width: 91px; height: 91px; top: 21vh; left: 93vw; animation-delay: 5.3333333333s; animation-duration: 8s; } .bubble:nth-of-type(161) { width: 66px; height: 66px; top: 97vh; left: 94vw; animation-delay: 5.3666666667s; animation-duration: 35s; } .bubble:nth-of-type(162) { width: 125px; height: 125px; top: 65vh; left: 26vw; animation-delay: 5.4s; animation-duration: 35s; } .bubble:nth-of-type(163) { width: 30px; height: 30px; top: 92vh; left: 71vw; animation-delay: 5.4333333333s; animation-duration: 27s; } .bubble:nth-of-type(164) { width: 122px; height: 122px; top: 65vh; left: 94vw; animation-delay: 5.4666666667s; animation-duration: 37s; } .bubble:nth-of-type(165) { width: 79px; height: 79px; top: 2vh; left: 100vw; animation-delay: 5.5s; animation-duration: 25s; } .bubble:nth-of-type(166) { width: 73px; height: 73px; top: 47vh; left: 28vw; animation-delay: 5.5333333333s; animation-duration: 37s; } .bubble:nth-of-type(167) { width: 21px; height: 21px; top: 23vh; left: 23vw; animation-delay: 5.5666666667s; animation-duration: 34s; } .bubble:nth-of-type(168) { width: 33px; height: 33px; top: 51vh; left: 74vw; animation-delay: 5.6s; animation-duration: 8s; } .bubble:nth-of-type(169) { width: 14px; height: 14px; top: 47vh; left: 49vw; animation-delay: 5.6333333333s; animation-duration: 11s; } .bubble:nth-of-type(170) { width: 74px; height: 74px; top: 59vh; left: 35vw; animation-delay: 5.6666666667s; animation-duration: 35s; } .bubble:nth-of-type(171) { width: 3px; height: 3px; top: 74vh; left: 30vw; animation-delay: 5.7s; animation-duration: 33s; } .bubble:nth-of-type(172) { width: 6px; height: 6px; top: 39vh; left: 87vw; animation-delay: 5.7333333333s; animation-duration: 27s; } .bubble:nth-of-type(173) { width: 116px; height: 116px; top: 89vh; left: 14vw; animation-delay: 5.7666666667s; animation-duration: 32s; } .bubble:nth-of-type(174) { width: 5px; height: 5px; top: 77vh; left: 59vw; animation-delay: 5.8s; animation-duration: 11s; } .bubble:nth-of-type(175) { width: 13px; height: 13px; top: 2vh; left: 63vw; animation-delay: 5.8333333333s; animation-duration: 22s; } .bubble:nth-of-type(176) { width: 70px; height: 70px; top: 6vh; left: 27vw; animation-delay: 5.8666666667s; animation-duration: 10s; } .bubble:nth-of-type(177) { width: 109px; height: 109px; top: 20vh; left: 37vw; animation-delay: 5.9s; animation-duration: 25s; } .bubble:nth-of-type(178) { width: 44px; height: 44px; top: 86vh; left: 6vw; animation-delay: 5.9333333333s; animation-duration: 31s; } .bubble:nth-of-type(179) { width: 11px; height: 11px; top: 36vh; left: 24vw; animation-delay: 5.9666666667s; animation-duration: 17s; } .bubble:nth-of-type(180) { width: 85px; height: 85px; top: 58vh; left: 98vw; animation-delay: 6s; animation-duration: 17s; } .bubble:nth-of-type(181) { width: 22px; height: 22px; top: 30vh; left: 33vw; animation-delay: 6.0333333333s; animation-duration: 3s; } .bubble:nth-of-type(182) { width: 67px; height: 67px; top: 48vh; left: 89vw; animation-delay: 6.0666666667s; animation-duration: 33s; } .bubble:nth-of-type(183) { width: 64px; height: 64px; top: 95vh; left: 16vw; animation-delay: 6.1s; animation-duration: 12s; } .bubble:nth-of-type(184) { width: 108px; height: 108px; top: 34vh; left: 36vw; animation-delay: 6.1333333333s; animation-duration: 23s; } .bubble:nth-of-type(185) { width: 11px; height: 11px; top: 6vh; left: 58vw; animation-delay: 6.1666666667s; animation-duration: 27s; } .bubble:nth-of-type(186) { width: 20px; height: 20px; top: 2vh; left: 94vw; animation-delay: 6.2s; animation-duration: 10s; } .bubble:nth-of-type(187) { width: 23px; height: 23px; top: 50vh; left: 7vw; animation-delay: 6.2333333333s; animation-duration: 24s; } .bubble:nth-of-type(188) { width: 27px; height: 27px; top: 28vh; left: 13vw; animation-delay: 6.2666666667s; animation-duration: 36s; } .bubble:nth-of-type(189) { width: 41px; height: 41px; top: 77vh; left: 33vw; animation-delay: 6.3s; animation-duration: 21s; } .bubble:nth-of-type(190) { width: 7px; height: 7px; top: 89vh; left: 80vw; animation-delay: 6.3333333333s; animation-duration: 5s; } .bubble:nth-of-type(191) { width: 72px; height: 72px; top: 99vh; left: 91vw; animation-delay: 6.3666666667s; animation-duration: 20s; } .bubble:nth-of-type(192) { width: 78px; height: 78px; top: 54vh; left: 11vw; animation-delay: 6.4s; animation-duration: 16s; } .bubble:nth-of-type(193) { width: 57px; height: 57px; top: 20vh; left: 17vw; animation-delay: 6.4333333333s; animation-duration: 31s; } .bubble:nth-of-type(194) { width: 38px; height: 38px; top: 52vh; left: 79vw; animation-delay: 6.4666666667s; animation-duration: 24s; } .bubble:nth-of-type(195) { width: 7px; height: 7px; top: 10vh; left: 38vw; animation-delay: 6.5s; animation-duration: 7s; } .bubble:nth-of-type(196) { width: 68px; height: 68px; top: 69vh; left: 15vw; animation-delay: 6.5333333333s; animation-duration: 9s; } .bubble:nth-of-type(197) { width: 105px; height: 105px; top: 4vh; left: 88vw; animation-delay: 6.5666666667s; animation-duration: 9s; } .bubble:nth-of-type(198) { width: 22px; height: 22px; top: 25vh; left: 12vw; animation-delay: 6.6s; animation-duration: 29s; } .bubble:nth-of-type(199) { width: 68px; height: 68px; top: 50vh; left: 86vw; animation-delay: 6.6333333333s; animation-duration: 15s; } .bubble:nth-of-type(200) { width: 65px; height: 65px; top: 12vh; left: 3vw; animation-delay: 6.6666666667s; animation-duration: 16s; } .bubble:nth-of-type(201) { width: 128px; height: 128px; top: 100vh; left: 73vw; animation-delay: 6.7s; animation-duration: 8s; } .bubble:nth-of-type(202) { width: 64px; height: 64px; top: 2vh; left: 23vw; animation-delay: 6.7333333333s; animation-duration: 22s; } .bubble:nth-of-type(203) { width: 113px; height: 113px; top: 36vh; left: 74vw; animation-delay: 6.7666666667s; animation-duration: 25s; } .bubble:nth-of-type(204) { width: 57px; height: 57px; top: 90vh; left: 81vw; animation-delay: 6.8s; animation-duration: 22s; } .bubble:nth-of-type(205) { width: 106px; height: 106px; top: 97vh; left: 74vw; animation-delay: 6.8333333333s; animation-duration: 36s; } .bubble:nth-of-type(206) { width: 4px; height: 4px; top: 32vh; left: 13vw; animation-delay: 6.8666666667s; animation-duration: 19s; } .bubble:nth-of-type(207) { width: 13px; height: 13px; top: 2vh; left: 39vw; animation-delay: 6.9s; animation-duration: 8s; } .bubble:nth-of-type(208) { width: 111px; height: 111px; top: 26vh; left: 95vw; animation-delay: 6.9333333333s; animation-duration: 24s; } .bubble:nth-of-type(209) { width: 121px; height: 121px; top: 89vh; left: 88vw; animation-delay: 6.9666666667s; animation-duration: 15s; } .bubble:nth-of-type(210) { width: 19px; height: 19px; top: 20vh; left: 51vw; animation-delay: 7s; animation-duration: 35s; } .bubble:nth-of-type(211) { width: 96px; height: 96px; top: 98vh; left: 86vw; animation-delay: 7.0333333333s; animation-duration: 24s; } .bubble:nth-of-type(212) { width: 22px; height: 22px; top: 94vh; left: 60vw; animation-delay: 7.0666666667s; animation-duration: 33s; } .bubble:nth-of-type(213) { width: 95px; height: 95px; top: 56vh; left: 97vw; animation-delay: 7.1s; animation-duration: 9s; } .bubble:nth-of-type(214) { width: 72px; height: 72px; top: 62vh; left: 9vw; animation-delay: 7.1333333333s; animation-duration: 31s; } .bubble:nth-of-type(215) { width: 109px; height: 109px; top: 81vh; left: 23vw; animation-delay: 7.1666666667s; animation-duration: 9s; } .bubble:nth-of-type(216) { width: 71px; height: 71px; top: 94vh; left: 77vw; animation-delay: 7.2s; animation-duration: 36s; } .bubble:nth-of-type(217) { width: 54px; height: 54px; top: 44vh; left: 13vw; animation-delay: 7.2333333333s; animation-duration: 17s; } .bubble:nth-of-type(218) { width: 9px; height: 9px; top: 95vh; left: 36vw; animation-delay: 7.2666666667s; animation-duration: 8s; } .bubble:nth-of-type(219) { width: 119px; height: 119px; top: 71vh; left: 43vw; animation-delay: 7.3s; animation-duration: 22s; } .bubble:nth-of-type(220) { width: 50px; height: 50px; top: 99vh; left: 28vw; animation-delay: 7.3333333333s; animation-duration: 14s; } .bubble:nth-of-type(221) { width: 80px; height: 80px; top: 8vh; left: 15vw; animation-delay: 7.3666666667s; animation-duration: 15s; } .bubble:nth-of-type(222) { width: 89px; height: 89px; top: 96vh; left: 49vw; animation-delay: 7.4s; animation-duration: 11s; } .bubble:nth-of-type(223) { width: 35px; height: 35px; top: 29vh; left: 95vw; animation-delay: 7.4333333333s; animation-duration: 14s; } .bubble:nth-of-type(224) { width: 54px; height: 54px; top: 24vh; left: 94vw; animation-delay: 7.4666666667s; animation-duration: 21s; } .bubble:nth-of-type(225) { width: 95px; height: 95px; top: 90vh; left: 7vw; animation-delay: 7.5s; animation-duration: 28s; } .bubble:nth-of-type(226) { width: 29px; height: 29px; top: 70vh; left: 51vw; animation-delay: 7.5333333333s; animation-duration: 20s; } .bubble:nth-of-type(227) { width: 41px; height: 41px; top: 90vh; left: 54vw; animation-delay: 7.5666666667s; animation-duration: 19s; } .bubble:nth-of-type(228) { width: 4px; height: 4px; top: 93vh; left: 66vw; animation-delay: 7.6s; animation-duration: 4s; } .bubble:nth-of-type(229) { width: 119px; height: 119px; top: 66vh; left: 59vw; animation-delay: 7.6333333333s; animation-duration: 13s; } .bubble:nth-of-type(230) { width: 121px; height: 121px; top: 69vh; left: 73vw; animation-delay: 7.6666666667s; animation-duration: 19s; } .bubble:nth-of-type(231) { width: 55px; height: 55px; top: 80vh; left: 9vw; animation-delay: 7.7s; animation-duration: 10s; } .bubble:nth-of-type(232) { width: 19px; height: 19px; top: 6vh; left: 78vw; animation-delay: 7.7333333333s; animation-duration: 33s; } .bubble:nth-of-type(233) { width: 8px; height: 8px; top: 42vh; left: 39vw; animation-delay: 7.7666666667s; animation-duration: 18s; } .bubble:nth-of-type(234) { width: 100px; height: 100px; top: 89vh; left: 38vw; animation-delay: 7.8s; animation-duration: 26s; } .bubble:nth-of-type(235) { width: 85px; height: 85px; top: 84vh; left: 25vw; animation-delay: 7.8333333333s; animation-duration: 29s; } .bubble:nth-of-type(236) { width: 78px; height: 78px; top: 94vh; left: 74vw; animation-delay: 7.8666666667s; animation-duration: 13s; } .bubble:nth-of-type(237) { width: 104px; height: 104px; top: 16vh; left: 1vw; animation-delay: 7.9s; animation-duration: 32s; } .bubble:nth-of-type(238) { width: 35px; height: 35px; top: 33vh; left: 7vw; animation-delay: 7.9333333333s; animation-duration: 17s; } .bubble:nth-of-type(239) { width: 88px; height: 88px; top: 19vh; left: 29vw; animation-delay: 7.9666666667s; animation-duration: 37s; } .bubble:nth-of-type(240) { width: 36px; height: 36px; top: 60vh; left: 71vw; animation-delay: 8s; animation-duration: 28s; } .bubble:nth-of-type(241) { width: 40px; height: 40px; top: 24vh; left: 45vw; animation-delay: 8.0333333333s; animation-duration: 7s; } .bubble:nth-of-type(242) { width: 33px; height: 33px; top: 78vh; left: 22vw; animation-delay: 8.0666666667s; animation-duration: 29s; } .bubble:nth-of-type(243) { width: 37px; height: 37px; top: 63vh; left: 67vw; animation-delay: 8.1s; animation-duration: 5s; } .bubble:nth-of-type(244) { width: 1px; height: 1px; top: 5vh; left: 35vw; animation-delay: 8.1333333333s; animation-duration: 22s; } .bubble:nth-of-type(245) { width: 126px; height: 126px; top: 34vh; left: 84vw; animation-delay: 8.1666666667s; animation-duration: 31s; } .bubble:nth-of-type(246) { width: 14px; height: 14px; top: 63vh; left: 48vw; animation-delay: 8.2s; animation-duration: 27s; } .bubble:nth-of-type(247) { width: 68px; height: 68px; top: 80vh; left: 69vw; animation-delay: 8.2333333333s; animation-duration: 31s; } .bubble:nth-of-type(248) { width: 15px; height: 15px; top: 83vh; left: 53vw; animation-delay: 8.2666666667s; animation-duration: 9s; } .bubble:nth-of-type(249) { width: 15px; height: 15px; top: 99vh; left: 80vw; animation-delay: 8.3s; animation-duration: 8s; } .bubble:nth-of-type(250) { width: 30px; height: 30px; top: 43vh; left: 2vw; animation-delay: 8.3333333333s; animation-duration: 34s; } .bubble:nth-of-type(251) { width: 80px; height: 80px; top: 54vh; left: 91vw; animation-delay: 8.3666666667s; animation-duration: 16s; } .bubble:nth-of-type(252) { width: 107px; height: 107px; top: 68vh; left: 70vw; animation-delay: 8.4s; animation-duration: 27s; } .bubble:nth-of-type(253) { width: 8px; height: 8px; top: 86vh; left: 3vw; animation-delay: 8.4333333333s; animation-duration: 37s; } .bubble:nth-of-type(254) { width: 45px; height: 45px; top: 20vh; left: 89vw; animation-delay: 8.4666666667s; animation-duration: 26s; } .bubble:nth-of-type(255) { width: 42px; height: 42px; top: 33vh; left: 43vw; animation-delay: 8.5s; animation-duration: 29s; } .bubble:nth-of-type(256) { width: 74px; height: 74px; top: 68vh; left: 24vw; animation-delay: 8.5333333333s; animation-duration: 4s; } .bubble:nth-of-type(257) { width: 95px; height: 95px; top: 13vh; left: 29vw; animation-delay: 8.5666666667s; animation-duration: 26s; } .bubble:nth-of-type(258) { width: 100px; height: 100px; top: 87vh; left: 30vw; animation-delay: 8.6s; animation-duration: 25s; } .bubble:nth-of-type(259) { width: 19px; height: 19px; top: 11vh; left: 29vw; animation-delay: 8.6333333333s; animation-duration: 16s; } .bubble:nth-of-type(260) { width: 12px; height: 12px; top: 44vh; left: 75vw; animation-delay: 8.6666666667s; animation-duration: 12s; } .bubble:nth-of-type(261) { width: 30px; height: 30px; top: 24vh; left: 98vw; animation-delay: 8.7s; animation-duration: 26s; } .bubble:nth-of-type(262) { width: 102px; height: 102px; top: 99vh; left: 55vw; animation-delay: 8.7333333333s; animation-duration: 20s; } .bubble:nth-of-type(263) { width: 14px; height: 14px; top: 57vh; left: 2vw; animation-delay: 8.7666666667s; animation-duration: 4s; } .bubble:nth-of-type(264) { width: 89px; height: 89px; top: 11vh; left: 16vw; animation-delay: 8.8s; animation-duration: 14s; } .bubble:nth-of-type(265) { width: 121px; height: 121px; top: 15vh; left: 4.........完整代码请登录后点击上方下载按钮下载查看
网友评论0