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