feat: star background

Author: wkylin

src/components/stateless/StarBackground/index.jsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from 'react'
+import styles from './index.module.less'
+// 生成随机阴影值的函数
+const generateBoxShadow = (n) => {
+  let shadowValues = []
+  for (let i = 0; i < n; i++) {
+    const randomX = Math.floor(Math.random() * 2000)
+    const randomY = Math.floor(Math.random() * 2000)
+    shadowValues.push(`${randomX}px ${randomY}px #333`)
+  }
+  return shadowValues.join(', ')
+}
+const StarBack = () => {
+  const [smallShadows] = useState(generateBoxShadow(1400))
+  const [mediumShadows] = useState(generateBoxShadow(400))
+  const [bigShadows] = useState(generateBoxShadow(200))
+  return (
+    <section className="absolute top-0 left-0">
+      <section className={styles.stars} style={{ '--box-shadow': smallShadows }}></section>
+      <section className={styles.medium} style={{ '--box-shadow': mediumShadows }}></section>
+      <section className={styles.big} style={{ '--box-shadow': bigShadows }}></section>
+    </section>
+  )
+}
+
+export default StarBack

src/components/stateless/StarBackground/index.module.less

@@ -0,0 +1,75 @@
+.stars {
+  --box-shadow: 0 0 10px 1px rgb(255 255 255 / 50%);
+
+  width: 1px;
+  height: 1px;
+  border-radius: 100%;
+  background: transparent;
+  box-shadow: var(--box-shadow);
+  animation: anim-star 50s linear infinite;
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    top: 2000px;
+    width: 1px;
+    height: 1px;
+    border-radius: 100%;
+    box-shadow: var(--box-shadow);
+    background: transparent;
+  }
+}
+
+.medium {
+  --box-shadow: 0 0 10px 1px rgb(255 255 255 / 50%);
+
+  width: 2px;
+  height: 2px;
+  border-radius: 100%;
+  background: transparent;
+  box-shadow: var(--box-shadow);
+  animation: anim-star 150s linear infinite;
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    top: 2000px;
+    width: 2px;
+    height: 2px;
+    border-radius: 100%;
+    box-shadow: var(--box-shadow);
+    background: transparent;
+  }
+}
+
+.big {
+  --box-shadow: 0 0 10px 1px rgb(255 255 255 / 50%);
+
+  width: 3px;
+  height: 3px;
+  border-radius: 100%;
+  background: transparent;
+  box-shadow: var(--box-shadow);
+  animation: anim-star 30s linear infinite;
+
+  &::after {
+    content: '*';
+    position: absolute;
+    top: 2000px;
+    width: 3px;
+    height: 3px;
+    border-radius: 100%;
+    box-shadow: var(--box-shadow);
+    background: transparent;
+  }
+}
+
+@keyframes anim-star {
+  from {
+    transform: translateY(-2000px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}

src/pages/demo/index.jsx

@@ -5,6 +5,7 @@ import AnimationTabs from '@stateless/AnimationTabs'
 import LogoSlider from '@stateless/LogoSlider'
 import FloatingIcon, { SocialIcon } from '@stateless/FloatingIcon'
 import Footer from '@stateless/Footer'
+import StarBack from '@stateless/StarBackground'
 
 import StickyCard from '@stateless/StickyCard'
 import SpringPng from '@assets/images/spring.png'
@@ -85,6 +86,7 @@ const tabs = [
 const ProDemo = () => {
   return (
     <FixTabPanel>
+      <StarBack />
       <StickyCard cards={[...Array.from({ length: 4 }, () => ({ id: Math.random() }))]} />
       <div className="relative w-full overflow-hidden bg-[#0a192f]">
         <div className="absolute top-0 right-0 h-full w-1/2">