feat: move dot

Author: wkylin

src/components/stateless/NumberViewCard/index.jsx

@@ -0,0 +1,32 @@
+import React, { useEffect, useState } from 'react'
+
+const NumberViewCard = () => {
+  return (
+    <div className="flex items-center justify-start">
+      <div
+        className="relative h-[150px] w-[360px] rounded-lg p-1"
+        style={{
+          backgroundImage: `radial-gradient(circle 230px at 0% 0%, #ffffff, #0c0d0d)`,
+        }}
+      >
+        <div className="animate-move-dot absolute top-[10%] right-[10%] z-20 h-2 w-2 rounded-full bg-white shadow-md"></div>
+
+        <div className="bg-gradient-radial relative z-10 flex h-full w-full flex-col items-center justify-center rounded-lg from-gray-600 to-gray-900">
+          <div className="absolute top-0 left-0 h-[45px] w-[220px] origin-left rotate-[40deg] transform rounded-full bg-neutral-300 opacity-40 shadow-[0_0_50px_#ffffff] blur-md"></div>
+
+          <div className="bg-gradient-to-r from-black via-white to-black bg-clip-text text-6xl font-extrabold text-transparent">
+            750k
+          </div>
+          <div className="text-lg text-white">浏览量</div>
+
+          <div className="absolute top-[10%] h-[1px] w-full bg-gradient-to-r from-neutral-400 to-neutral-700"></div>
+          <div className="absolute bottom-[10%] h-[1px] w-full bg-neutral-700"></div>
+          <div className="absolute left-[10%] h-full w-[1px] bg-gradient-to-b from-neutral-400 to-neutral-700"></div>
+          <div className="absolute right-[10%] h-full w-[1px] bg-neutral-700"></div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default NumberViewCard

src/pages/home/index.jsx

@@ -67,6 +67,7 @@ import BorderBeam from '@stateless/BorderBeam'
 import AutoSlider from '@stateless/AutoSlider'
 import AnimText from '@stateless/AnimText'
 import SlideButton from '@stateless/SlideButton'
+import NumberViewCard from '@stateless/NumberViewCard'
 import firstImage from '@assets/images/88-300x160.jpg'
 import secondImage from '@assets/images/2-300x160.jpg'
 import SpringPng from '@assets/images/spring.png'
@@ -418,6 +419,15 @@ const Home = () => {
       >
         <IconCloud images={images} />
       </section>
+      <section
+        style={{
+          marginBottom: 15,
+          position: 'relative',
+          overflow: 'hidden',
+        }}
+      >
+        <NumberViewCard />
+      </section>
       <section
         style={{
           marginBottom: 15,

src/styles/reset.css

@@ -108,6 +108,35 @@
         rotate(calc(var(--angle) * -1deg - 1turn));
     }
   }
+
+  --animate-move-dot: move-dot 6s linear infinite;
+
+  @keyframes move-dot {
+    0% {
+      top: 10%;
+      right: 10%;
+    }
+
+    25% {
+      top: 10%;
+      right: calc(100% - 40px);
+    }
+
+    50% {
+      top: calc(100% - 23px);
+      right: calc(100% - 45px);
+    }
+
+    75% {
+      top: calc(100% - 23px);
+      right: 10%;
+    }
+
+    100% {
+      top: 10%;
+      right: 10%;
+    }
+  }
 }
 
 .hue-clip {