div+css实现小星星滚动模糊效果代码-html代码-BFW代码库

代码语言：html
代码描述：div+css实现小星星滚动模糊效果代码示时间走动效果代码，滚动鼠标就能看到效果。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
 

  
<style>
* {
  box-sizing: border-box;
}

body {
  background: black;
  min-height: 800lvh;
  width: 100lvw;
}
body h1 {
  position: fixed;
  width: 100lvw;
  height: 100lvh;
  text-align: center;
  line-height: 100lvh;
  font-size: 5lvh;
  font-family: sans-serif;
  color: rgba(255, 255, 255, 0.8);
  animation-name: disappear;
  animation-duration: 1ms;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-timeline: scroll(block nearest);
  animation-range: 0 40%;
}
body .effect-wrapper {
  position: fixed;
  top: -2lvh;
  bottom: -2lvh;
  right: -2vw;
  left: -2vw;
}
body .effect-wrapper .asteroids {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
body .effect-wrapper .asteroids .asteroid {
  --firstColor: hsl(0 100% 65%);
  --secondColor: hsl(315 100% 75%);
  --thirdColor: hsl(270 100% 55%);
  padding: 2vw;
  height: 250px;
  aspect-ratio: 1/1.3;
  transform-origin: 0 0;
  opacity: 0;
  transform: rotate3d(0, 0, 1, -25deg) translate3d(0, 400%, 0);
  animation-name: fly;
  animation-duration: 1ms;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-timeline: scroll(block nearest);
}
body .effect-wrapper .asteroids .asteroid::after {
  display: block;
  content: "";
  width: 3px;
  height: 100%;
  background: linear-gradient(var(--firstColor) 0%, var(--secondColor) 25%, var(--thirdColor) 50%, var(--firstColor) 75%, var(--secondColor) 100%);
  background-size: 100% 300%;
  background-position-y: 0%;
  -webkit-mask-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0));
  border-radius: 3px 3px 100% 100%;
  animation: shine 4s ease-in-out infinite;
}
body .effect-wrapper .asteroids .asteroid:nth-child(1) {
  --animation-start-percentage: 37%;
  --animation-stop-percentage: 92%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(1)::after {
  animation-delay: -0.8087070147s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(2) {
  --animation-start-percentage: 17%;
  --animation-stop-percentage: 92%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(2)::after {
  animation-delay: -0.1959522349s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(3) {
  --animation-start-percentage: 26%;
  --animation-stop-percentage: 94%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(3)::after {
  animation-delay: -0.5973821389s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(4) {
  --animation-start-percentage: 38%;
  --animation-stop-percentage: 71%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(4)::after {
  animation-delay: -0.6744065684s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(5) {
  --animation-start-percentage: 29%;
  --animation-stop-percentage: 71%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(5)::after {
  animation-delay: -0.1316773067s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(6) {
  --animation-start-percentage: 33%;
  --animation-stop-percentage: 92%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(6)::after {
  animation-delay: -1.0185946282s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(7) {
  --animation-start-percentage: 4%;
  --animation-stop-percentage: 61%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(7)::after {
  animation-delay: -0.8532019272s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(8) {
  --animation-start-percentage: 37%;
  --animation-stop-percentage: 98%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(8)::after {
  animation-delay: -1.624367698s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(9) {
  --animation-start-percentage: 27%;
  --animation-stop-percentage: 101%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(9)::after {
  animation-delay: -0.5271704813s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(10) {
  --animation-start-percentage: 2%;
  --animation-stop-percentage: 34%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(10)::after {
  animation-delay: -1.0186737535s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(11) {
  --animation-start-percentage: 11%;
  --animation-stop-percentage: 49%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(11)::after {
  animation-delay: -0.0971237946s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(12) {
  --animation-start-percentage: 12%;
  --animation-stop-percentage: 64%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(12)::after {
  animation-delay: -0.4910962678s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(13) {
  --animation-start-percentage: 8%;
  --animation-stop-percentage: 61%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(13)::after {
  animation-delay: -0.6643155828s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(14) {
  --animation-start-percentage: 27%;
  --animation-stop-percentage: 82%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(14)::after {
  animation-delay: -1.0754423925s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(15) {
  --animation-start-percentage: 24%;
  --animation-stop-percentage: 85%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(15)::after {
  animation-delay: -1.6213481857s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(16) {
  --animation-start-percentage: 1%;
  --animation-stop-percentage: 64%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(16)::after {
  animation-delay: -1.2935612208s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(17) {
  --animation-start-percentage: 20%;
  --animation-stop-percentage: 95%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(17)::after {
  animation-delay: -0.2788531085s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(18) {
  --animation-start-percentage: 32%;
  --animation-stop-percentage: 93%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(18)::after {
  animation-delay: -1.9756688381s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(19) {
  --animation-start-percentage: 27%;
  --animation-stop-percentage: 86%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(19)::after {
  animation-delay: -1.9387183382s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(20) {
  --animation-start-percentage: 33%;
  --animation-stop-percentage: 94%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(20)::after {
  animation-delay: -0.7146728093s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(21) {
  --animation-start-percentage: 28%;
  --animation-stop-percentage: 78%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(21)::after {
  animation-delay: -1.043755563s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(22) {
  --animation-start-percentage: 36%;
  --animation-stop-percentage: 96%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(22)::after {
  animation-delay: -0.4913823902s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(23) {
  --animation-start-percentage: 25%;
  --animation-stop-percentage: 75%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(23)::after {
  animation-delay: -1.2916332958s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(24) {
  --animation-start-percentage: 16%;
  --animation-stop-percentage: 49%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(24)::after {
  animation-delay: -0.171201834s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(25) {
  --animation-start-percentage: 14%;
  --animation-stop-percentage: 60%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(25)::after {
  animation-delay: -1.8320632535s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(26) {
  --animation-start-percentage: 29%;
  --animation-stop-percentage: 63%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(26)::after {
  animation-delay: -1.9471428886s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(27) {
  --animation-start-percentage: 22%;
  --animation-stop-percentage: 89%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(27)::after {
  animation-delay: -0.7499726181s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(28) {
  --animation-start-percentage: 34%;
  --animation-stop-percentage: 65%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(28)::after {
  animation-delay: -0.1088582729s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(29) {
  --animation-start-percentage: 26%;
  --animation-stop-percentage: 67%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(29)::after {
  animation-delay: -0.3735274747s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(30) {
  --animation-start-percentage: 25%;
  --animation-stop-percentage: 63%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(30)::after {
  animation-delay: -0.4478474337s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(31) {
  --animation-start-percentage: 16%;
  --animation-stop-percentage: 60%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(31)::after {
  animation-delay: -0.1454911445s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(32) {
  --animation-start-percentage: 31%;
  --animation-stop-percentage: 70%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(32)::after {
  animation-delay: -1.02235069s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(33) {
  --animation-start-percentage: 40%;
  --animation-stop-percentage: 100%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(33)::after {
  animation-delay: -0.1170139245s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(34) {
  --animation-start-percentage: 38%;
  --animation-stop-percentage: 74%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(34)::after {
  animation-delay: -0.0104779969s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(35) {
  --animation-start-percentage: 21%;
  --animation-stop-percentage: 52%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(35)::after {
  animation-delay: -0.0559517303s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(36) {
  --animation-start-percentage: 1%;
  --animation-stop-percentage: 51%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(36)::after {
  animation-delay: -0.4350230484s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(37) {
  --animation-start-percentage: 41%;
  --animation-stop-percentage: 94%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(37)::after {
  animation-delay: -1.9995752235s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(38) {
  --animation-start-percentage: 35%;
  --animation-stop-percentage: 83%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(38)::after {
  animation-delay: -1.2465419755s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(39) {
  --animation-start-percentage: 5%;
  --animation-stop-percentage: 43%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(39)::after {
  animation-delay: -0.4385730666s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(40) {
  --animation-start-percentage: 15%;
  --animation-stop-percentage: 56%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(40)::after {
  animation-delay: -0.2062395148s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(41) {
  --animation-start-percentage: 5%;
  --animation-stop-percentage: 80%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(41)::after {
  animation-delay: -1.143636062s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(42) {
  --animation-start-percentage: 21%;
  --animation-stop-percentage: 80%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(42)::after {
  animation-delay: -1.0768967684s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(43) {
  --animation-start-percentage: 12%;
  --animation-stop-percentage: 91%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(43)::after {
  animation-delay: -1.3198296026s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(44) {
  --animation-start-percentage: 12%;
  --animation-stop-percentage: 83%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(44)::after {
  animation-delay: -0.4057459169s;
}
body .effect-wrapper .asteroids .asteroid:nth-child(45) {
  --animation-start-percentage: 12%;
  --animation-stop-percentage: 85%;
  animation-range: var(--animation-start-percentage) var(--animation-stop-percentage);
}
body .effect-wrapper .asteroids .asteroid:nth-child(45)::after {
  animation-delay: -1.635978671s;
}
body .effect-wrapper .asteroids .asteroid:n.........完整代码请登录后点击上方下载按钮下载查看