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