纯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;
}
.st.........完整代码请登录后点击上方下载按钮下载查看