纯css繁星滚动效果
代码语言:html
所属分类:动画
代码描述:纯css繁星滚动效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: radial-gradient(ellipse at center, #1b2749 0%, #090a0f 80%); height: 100vh; overflow: hidden; } .sky { position: absolute; top: calc(50% - 100px); left: calc(50% - 100px); width: 200px; height: 200px; -webkit-clip-path: circle(200px at center); clip-path: circle(200px at center); } .star { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; background: #fff; -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); -webkit-animation: bling 6000ms linear infinite; animation: bling 6000ms linear infinite; } .star:nth-child(1) { top: calc(50% - 183px); left: calc(50% - 174px); -webkit-animation-delay: -1980ms; animation-delay: -1980ms; } .star:nth-child(2) { top: calc(50% - -51px); left: calc(50% - -7px); -webkit-animation-delay: -4792ms; animation-delay: -4792ms; } .star:nth-child(3) { top: calc(50% - -60px); left: calc(50% - 78px); -webkit-animation-delay: -3112ms; animation-delay: -3112ms; } .star:nth-child(4) { top: calc(50% - 94px); left: calc(50% - -112px); -webkit-animation-delay: -4203ms; animation-delay: -4203ms; } .star:nth-child(5) { top: calc(50% - -143px); left: calc(50% - -90px); -webkit-animation-delay: -3828ms; animation-delay: -3828ms; } .star:nth-child(6) { top: calc(50% - -82px); left: calc(50% - -60px); -webkit-animation-delay: -2840ms; animation-delay: -2840ms; } .star:nth-child(7) { top: calc(50% - 183px); left: calc(50% - 185px); -webkit-animation-delay: -1309ms; animation-delay: -1309ms; } .star:nth-child(8) { top: calc(50% - -13px); left: calc(50% - -69px); -webkit-animation-delay: -2415ms; animation-delay: -2415ms; } .star:nth-child(9) { top: calc(50% - -168px); left: calc(50% - 139px); -webkit-animation-delay: -3575ms; animation-delay: -3575ms; } .star:nth-child(10) { top: calc(50% - 169px); left: calc(50% - 182px); -webkit-animation-delay: -2405ms; animation-delay: -2405ms; } .star:nth-child(11) { top: calc(50% - -107px); left: calc(50% - -102px); -webkit-animation-delay: -720ms; animation-delay: -720ms; } .star:nth-child(12) { top: calc(50% - -190px); left: calc(50% - -6px); -webkit-animation-delay: -770ms; animation-delay: -770ms; } .star:nth-child(13) { top: calc(50% - 34px); left: calc(50% - 1px); -webkit-animation-delay: -1211ms; animation-delay: -1211ms; } .star:nth-child(14) { top: calc(50% - 62px); left: calc(50% - -100px); -webkit-animation-delay: -4856ms; animation-delay: -4856ms; } .star:nth-child(15) { top: calc(50% - 199px); left: calc(50% - 123px); -webkit-animation-delay: -5524ms; animation-delay: -5524ms; } .star:nth-child(16) { top: calc(50% - -147px); left: calc(50% - -148px); -webkit-animation-delay: -1691ms; animation-delay: -1691ms; } .star:nth-child(17) { top: calc(50% - -67px); left: calc(50% - 180px); -webkit-animation-delay: -2414ms; animation-delay: -2414ms; } .star:nth-child(18) { top: calc(50% - -134px); left: calc(50% - 124px); -webkit-animation-delay: -2243ms; animation-delay: -2243ms; } .star:nth-child(19) { top: calc(50% - 110px); left: calc(50% - -60px); -webkit-animation-delay: -1962ms; animation-delay: -1962ms; } .star:nth-child(20) { top: calc(50% - -49px); left: calc(50% - -119px); -webkit-animation-delay: -1369ms; animation-delay: -1369ms; } .star:nth-child(21) { top: calc(50% - -146px); left: calc(50% - 52px); -webkit-animation-delay: -5520ms; animation-delay: -5520ms; } .star:nth-child(22) { top: calc(50% - -65px); left: calc(50% - 171px); -webkit-animation-delay: -1352ms; animation-delay: -1352ms; } .star:nth-child(23) { top: calc(50% - 155px); left: calc(50% - 46px); -webkit-animation-delay: -2061ms; animation-delay: -2061ms; } .star:nth-child(24) { top: calc(50% - 196px); left: calc(50% - -114px); -webkit-animation-delay: -972ms; animation-delay: -972ms; } .star:nth-child(25) { top: calc(50% - -58px); left: calc(50% - -132px); -webkit-animation-delay: -5900ms; animation-delay: -5900ms; } .star:nth-child(26) { top: calc(50% - -97px); left: calc(50% - -169px); -webkit-animation-delay: -4687ms; animation-delay: -4687ms; } .star:nth-child(27) { top: calc(50% - -172px); left: calc(50% - -189px); -webkit-animation-delay: -1898ms; animation-delay: -1898ms; } .star:nth-child(28) { top: calc(50% - -191px); left: calc(50% - 97px); -webkit-animation-delay: -3396ms; animation-delay: -3396ms; } .star:nth-child(29) { top: calc(50% - 133px); left: calc(50% - 107px); -webkit-animation-delay: -4083ms; animation-delay: -4083ms; } .star:nth-child(30) { top: calc(50% - 115px); left: calc(50% - -133px); -webkit-animation-delay: -2023ms; animation-delay: -2023ms; } .star:nth-child(31) { top: calc(50% - -86px); left: calc(50% - -116px); -webkit-animation-delay: -4303ms; animation-delay: -4303ms; } .star:nth-child(32) { top: calc(50% - 65px); left: calc(50% - 59px); -webkit-animation-delay: -3143ms; animation-delay: -3143ms; } .star:nth-child(33) { top: calc(50% - -130px); left: calc(50% - 183px); -webkit-animation-delay: -292ms; animation-delay: -292ms; } .star:nth-child(34) { top: calc(50% - 107px); left: calc(50% - -105px); -webkit-animation-delay: -4783ms; animation-delay: -4783ms; } .star:nth-child(35) { top: calc(50% - -19px); left: calc(50% - -187px); -webkit-animation-delay: -1766ms; animation-delay: -1766ms; } .star:nth-child(36) { top: calc(50% - 30px); left: calc(50% - -168px); -webkit-animation-delay: -1695ms; animation-delay: -1695ms; } .star:nth-child(37) { top: calc(50% - -151px); left: calc(50% - 26px); -webkit-animation-delay: -4685ms; animation-delay: -4685ms; } .star:nth-child(38) { top: calc(50% - 106px); left: calc(50% - 6px); -webkit-animation-delay: -5810ms; animation-delay: -5810ms; } .star:nth-child(39) { top: calc(50% - 195px); left: calc(50% - -2px); -webkit-animation-delay: -4117ms; animation-delay: -4117ms; } .star:nth-child(40) { top: calc(50% - -140px); left: calc(50% - 10px); -webkit-animation-delay: -3367ms; animation-delay: -3367ms; } .star:nth-child(41) { top: calc(50% - -155px); left: calc(50% - -68px); -webkit-animation-delay: -1501ms; animation-delay: -1501ms; } .star:nth-child(42) { top: calc(50% - -154px); left: calc(50% - -136px); -webkit-animation-delay: -2895ms; animation-delay: -2895ms; } .star:nth-child(43) { top: calc(50% - 46px); left: calc(50% - -113px); -webkit-animation-delay: -1807ms; animation-delay: -1807ms; } .star:nth-child(44) { top: calc(50% - -91px); left: calc(50% - 111px); -webkit-animation-delay: -3761ms; animation-delay: -3761ms; } .star:nth-child(45) { top: calc(50% - 15px); left: calc(50% - 122px); -webkit-animation-delay: -5996ms; animation-delay: -5996ms; } .star:nth-child(46) { top: calc(50% - -131px); left: calc(50% - 110px); -webkit-animation-delay: -4450ms; animation-delay: -4450ms; } .star:nth-child(47) { top: calc(50% - 184px); left: calc(50% - 82px); -webkit-animation-delay: -3678ms; animation-delay: -3678ms; } .star:nth-child(48) { top: calc(50% - -119px); left: calc(50% - -102px); -webkit-animation-delay: -3295ms; animation-delay: -3295ms; } .star:nth-child(49) { top: calc(50% - -134px); left: calc(50% - -150px); -webkit-animation-delay: -2713ms; animation-delay: -2713ms; } .star:nth-child(50) { top: calc(50% - -51px); left: calc(50% - 140px); -webkit-animation-delay: -1626ms; animation-delay: -1626ms; } .star:nth-child(51) { top: calc(50% - -135px); left: calc(50% - -165px); -webkit-animation-delay: -1988ms; animation-delay: -1988ms; } .star:nth-child(52) { top: calc(50% - -84px); left: calc(50% - 8px); -webkit-animation-delay: -3926ms; animation-delay: -3926ms; } .star:nth-child(53) { top: calc(50% - -111px); left: calc(50% - -93px); -webkit-animation-delay: -5075ms; animation-delay: -5075ms; } .star:nth-child(54) { top: calc(50% - 128px); left: calc(50% - 101px); -webkit-animation-delay: -2155ms; animation-delay: -2155ms; } .star:nth-child(55) { top: calc(50% - -148px); left: calc(50% - -72px); -webkit-animation-delay: -1232ms; animation-delay: -1232ms; } .star:nth-child(56) { top: calc(50% - 60px); left: calc(50% - 159px); -webkit-animation-delay: -753ms; animation-delay: -753ms; } .star:nth-child(57) { top: calc(50% - 54px); left: calc(50% - 163px); -webkit-animation-delay: -77ms; animation-delay: -77ms; } .star:nth-child(58) { top: calc(50% - 96px); left: calc(50% - 1px); -webkit-animation-delay: -5133ms; animation-delay: -5133ms; } .star:nth-child(59) { top: calc(50% - -147px); left: calc(50% - 71px); -webkit-animation-delay: -3130ms; animation-delay: -3130ms; } .star:nth-child(60) { top: calc(50% - -49px); left: calc(50% - -23px); -webkit-animation-delay: -95ms; animation-delay: -95ms; } .star:nth-child(61) { top: calc(50% - -33px); left: calc(50% - 165px); -webkit-animation-delay: -2734ms; animation-delay: -2734ms; } .star:nth-child(62) { top: calc(50% - 37px); left: calc(50% - -160px); -webkit-animation-delay: -2082ms; animation-delay: -2082ms; } .star:nth-child(63) { top: calc(50% - -176px); left: calc(50% - -169px); -webkit-animation-delay: -2495ms; animation-delay: -2495ms; } .star:nth-child(64) { top: calc(50% - -122px); left: calc(50% - 32px); -webkit-animation-delay: -5667ms; animation-delay: -5667ms; } .star:nth-child(65) { top: calc(50% - -182px); left: calc(50% - -116px); -webkit-animation-delay: -2013ms; animation-delay: -2013ms; } .star:nth-child(66) { top: calc(50% - 55px); left: calc(50% - -192px); -webkit-animation-delay: -1167ms; animation-delay: -1167ms; } .star:nth-child(67) { top: calc(50% - 94px); left: calc(50% - -20px); -webkit-animation-delay: -912ms; animation-delay: -912ms; } .star:nth-child(68) { top: calc(50% - -107px); left: calc(50% - 56px); -webkit-animation-delay: -5107ms; animation-delay: -5107ms; } .star:nth-child(69) { top: calc(50% - -71px); left: calc(50% - -147px); -webkit-animation-delay: -404ms; animation-delay: -404ms; } .star:nth-child(70) { top: calc(50% - -60px); left: calc(50% - -85px); -webkit-animation-delay: -3932ms; animation-delay: -3932ms; } .star:nth-child(71) { top: calc(50% - -3px); left: calc(50% - -46px); -webkit-animation-delay: -5222ms; animation-delay: -5222ms; } .star:nth-child(72) { top: calc(50% - -145px); left: calc(50% - 4px); -webkit-animation-delay: -1906ms; animation-delay: -1906ms; } .star:nth-child(73) { top: calc(50% - -94px); left: calc(50% - 78px); -webkit-animation-delay: -5776ms; animation-delay: -5776ms; } .star:nth-child(74) { top: calc(50% - 37px); left: calc(50% - -195px); -webkit-animation-delay: -2977ms; animation-delay: -2977ms; } .star:nth-child(75) { top: calc(50% - -52px); left: calc(50% - 137px); -webkit-animation-delay: -5488ms; animation-delay: -5488ms; } .star:nth-child(76) { top: calc(50% - -173px); left: calc(50% - 99px); -webkit-animation-delay: -1778ms; animation-delay: -1778ms; } .star:nth-child(77) { top: calc(50% - 146px); left: calc(50% - -105px); -webkit-animation-delay: -5391ms; animation-delay: -5391ms; } .star:nth-child(78) { top: calc(50% - -117px); left: calc(50% - -29px); -webkit-animation-delay: -2134ms; animation-delay: -2134ms; } .star:nth-child(79) { top: calc(50% - -93px); left: calc(50% - -45px); -webkit-animation-delay: -3960ms; animation-delay: -3960ms; } .star:nth-child(80) { top: calc(50% - 101px); left: calc(50% - 87px); -webkit-animation-delay: -4771ms; animation-delay: -4771ms; } .star:nth-child(81) { top: calc(50% - -26px); left: calc(50% - 160px); -webkit-animation-delay: -4549ms; animation-delay: -4549ms; } .star:nth-child(82) { top: calc(50% - 43px); left: calc(50% - 153px); -webkit-animation-delay: -3268ms; animation-delay: -3268ms; } .star:nth-child(83) { top: calc(50% - -36px); left: calc(50% - -126px); -webkit-animation-delay: -2424ms; animation-delay: -2424ms; } .star:nth-child(84) { top: calc(50% - 57px); left: calc(50% - -166px); -webkit-animation-delay: -3794ms; animation-delay: -3794ms; } .star:nth-child(85) { top: calc(50% - 74px); left: calc(50% - -69px); -webkit-animation-delay: -5096ms; animation-delay: -5096ms; } .star:nth-child(86) { top: calc(50% - -69px); left: calc(50% - 4px); -webkit-animation-delay: -5953ms; animation-delay: -5953ms; } .star:nth-child(87) { top: calc(50% - -153px); left: calc(50% - -27px); -webkit-animation-delay: -5375ms; animation-delay: -5375ms; } .star:nth-child(88) { top: calc(50% - -18px); left: calc(50% - 64px); -webkit-animation-delay: -1681ms; animation-delay: -1681ms; } .star:nth-child(89) { top: calc(50% - -163px); left: calc(50% - -171px); -webkit-animation-delay: -5340ms; animation-delay: -5340ms; } .star:nth-child(90) { top: calc(50% - -26px); left: calc(50% - -97px); -webkit-animation-delay: -2348ms; animation-delay: -2348ms; } .star:nth-child(91) { top: calc(50% - 116px); left: calc(50% - -171px); -webkit-animation-delay: -4101ms; animation-delay: -4101ms; } .star:nth-child(92) { top: calc(50% - 23px); left: calc(50% - -186px); -webkit-animation-delay: -5907ms; animation-delay: -5907ms; } .star:nth-child(93) { top: calc(50% - -178px); left: calc(50% - -116px); -webkit-animation-delay: -3101ms; animation-delay: -3101ms; } .star:nth-child(94) { top: calc(50% - -147px); left: calc(50% - 191px); -webkit-animation-delay: -4410ms; animation-delay: -4410ms; } .star:nth-child(95) { top: calc(50% - -147px); left: calc(50% - -175px); -webkit-animation-delay: -1820ms; animation-delay: -1820ms; } .star:nth-child(96) { top: calc(50% - -173px); left: calc(50% - -176px); -webkit-animation-delay: -1938ms; animation-delay: -1938ms; } .star:nth-child(97) { top: calc(50% - -156px); left: calc(50% - 57px); -webkit-animation-delay: -2912ms; animation-delay: -2912ms; } .star:nth-child(98) { top: calc(50% - -2px); left: calc(50% - -133px); -webkit-animation-delay: -515ms; animation-delay: -515ms; } .star:nth-child(99) { top: calc(50% - 130px); left: calc(50% - 135px); -webkit-animation-delay: -2284ms; animation-delay: -2284ms; } .star:nth-child(100) { top: calc(50% - 81px); left: calc(50% - -144px); -webkit-animation-delay: -4725ms; animation-delay: -4725ms; } .star:nth-child(101) { top: calc(50% - 62px); left: calc(50% - -160px); -webkit-animation-delay: -667ms; animation-delay: -667ms; } .star:nth-child(102) { top: calc(50% - -163px); left: calc(50% - 81px); -webkit-animation-delay: -1101ms; animation-delay: -1101ms; } .star:nth-child(103) { top: calc(50% - -68px); left: calc(50% - 141px); -webkit-animation-delay: -190ms; animation-delay: -190ms; } .star:nth-child(104) { top: calc(50% - 150px); left: calc(50% - 11px); -webkit-animation-delay: -274ms; animation-delay: -274ms; } .star:nth-child(105) { top: calc(50% - 176px); left: calc(50% - 107px); -webkit-animation-delay: -4304ms; animation-delay: -4304ms; } .star:nth-child(106) { top: calc(50% - 184px); left: calc(50% - 139px); -webkit-animation-delay: -5152ms; animation-delay: -5152ms; } .star:nth-child(107) { top: calc(50% - -113px); left: calc(50% - 162px); -webkit-animation-delay: -4771ms; animation-delay: -4771ms; } .star:nth-child(108) { top: calc(50% - -173px); left: calc(50% - -121px); -webkit-animation-delay: -3973ms; animation-delay: -3973ms; } .star:nth-child(109) { top: calc(50% - -87px); left: calc(50% - -184px); -webkit-animation-delay: -5006ms; animation-delay: -5006ms; } .star:nth-child(110) { top: calc(50% - 108px); left: calc(50% - -101px); -webkit-animation-delay: -3795ms; animation-delay: -3795ms; } .star:nth-child(111) { top: calc(50% - 142px); left: calc(50% - -73px); -webkit-animation-delay: -3254ms; animation-delay: -3254ms; } .star:nth-child(112) { top: calc(50% - -97px); left: calc(50% - 53px); -webkit-animation-delay: -453ms; animation-delay: -453ms; } .star:nth-child(113) { top: calc(50% - 1px); left: calc(50% - -46px); -webkit-animation-delay: -1669ms; animation-delay: -1669ms; } .star:nth-child(114) { top: calc(50% - -44px); left: calc(50% - -179px); -webkit-animation-delay: -4507ms; animation-delay: -4507ms; } .star:nth-child(115) { top: calc(50% - 117px); left: calc(50% - -18px); -webkit-animation-delay: -2634ms; animation-delay: -2634ms; } .star:nth-child(116) { top: calc(50% - -126px); left: calc(50% - -89px); -webkit-animation-delay: -1252ms; animation-delay: -1252ms; } .star:nth-child(117) { top: calc(50% - -7px); left: calc(50% - -97px); -webkit-animation-delay: -1672ms; animation-delay: -1672ms; } .star:nth-child(118) { top: calc(50% - 152px); left: calc(50% - 32px); -webkit-animation-delay: -1761ms; animation-delay: -1761ms; } .star:nth-child(119) { top: calc(50% - 189px); left: calc(50% - 73px); -webkit-animation-delay: -5302ms; animation-delay: -5302ms; } .star:nth-child(120) { top: calc(50% - 131px); left: calc(50% - -101px); -webkit-animation-delay: -65ms; animation-delay: -65ms; } .star:nth-child(121) { top: calc(50% - -42px); left: calc(50% - -140px); -webkit-animation-delay: -3843ms; animation-delay: -3843ms; } .star:nth-child(122) { top: calc(50% - -116px); left: calc(50% - 89px); -webkit-animation-delay: -3426ms; animation-delay: -3426ms; } .star:nth-child(123) { top: calc(50% - -59px); left: calc(50% - 150px); -webkit-animation-delay: -829ms; animation-delay: -829ms; } .star:nth-child(124) { top: calc(50% - -49px); left: calc(50% - 200px); -webkit-animation-delay: -5563ms; animation-delay: -5563ms; } .star:nth-child(125) { top: calc(50% - 137px); left: calc(50% - 189px); -webkit-animation-delay: -2679ms; animation-delay: -2679ms; } .star:nth-child(126) { top: calc(50% - -124px); left: calc(50% - 97px); -webkit-animation-delay: -2821ms; animation-delay: -2821ms; } .star:nth-child(127) { top: calc(50% - 20px); left: calc(50% - 141px); -webkit-animation-delay: -3000ms; animation-delay: -3000ms; } .star:nth-child(128) { top: calc(50% - 117px); left: calc(50% - 143px); -webkit-animation-delay: -5664ms; animation-delay: -5664ms; } .star:nth-child(129) { top: calc(50% - 148px); left: calc(50% - 74px); -webkit-animation-delay: -2022ms; animation-delay: -2022ms; } .star:nth-child(130) { top: calc(50% - -63px); left: calc(50% - -112px); -webkit-animation-delay: -4207ms; animation-delay: -4207ms; } .star:nth-child(131) { top: calc(50% - 135px); left: calc(50% - -107px); -webkit-animation-delay: -163ms; animation-delay: -163ms; } .star:nth-child(132) { top: calc(50% - 43px); left: calc(50% - 66px); -webkit-animation-delay: -3272ms; animation-delay: -3272.........完整代码请登录后点击上方下载按钮下载查看
网友评论0