纯css繁星滚动效果-html代码-BFW代码库

代码语言：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(.........完整代码请登录后点击上方下载按钮下载查看