feat: animation background

package.json

@@ -143,14 +143,14 @@
     "dotenv-webpack": "^8.1.0",
     "es6-promise": "^4.2.8",
     "esbuild-loader": "^4.2.2",
-    "eslint": "^9.12.0",
+    "eslint": "^9.14.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-formatter-pretty": "^6.0.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-promise": "^7.1.0",
-    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-unicorn": "^56.0.0",
     "eslint-webpack-plugin": "^4.2.0",

src/i18n/i18n.js

@@ -18,7 +18,7 @@ i18n
     },
     lng: 'zh',
     fallbackLng: 'en', // 默认语言
-    debug: process.env.NODE_ENV !== 'production', // 开启调试模式
+    // debug: process.env.NODE_ENV !== 'production', // 开启调试模式
     interpolation: {
       escapeValue: false, // 不转义特殊字符
     },

src/pages/home/index.jsx

@@ -170,6 +170,7 @@ const Home = () => {
       <section style={{ marginBottom: 40 }}>
         <AutoLink text="foo bar baz http://example.org bar https://github.com/wkylin/pro-react-admin" />
       </section>
+      <section className={styles.line}></section>
       <section>
         <AvatarCard avatar="https://picsum.photos/seed/picsum/300/160" text="Hi, I'm a developer." />
       </section>
@@ -241,6 +242,9 @@ const Home = () => {
         <div className={styles['circle-4']}></div>
       </section>
 
+      <section style={{ marginBottom: 40 }} className={styles.eHElAY}>
+        Hi, React!
+      </section>
       <section style={{ width: 600, margin: '30px 0' }}>
         <Input defaultValue={apiKey} placeholder="api key" onChange={changeApiKey} style={{ marginBottom: 20 }} />
         <Flex align="center">

src/pages/home/index.module.less

@@ -173,3 +173,77 @@
     transform: scale(1.295);
   }
 }
+
+.line {
+  height: 2px;
+  width: 360px;
+  background-image: linear-gradient(97deg, #0096ff, #bb64ff 42%, #f2416b 74%, #eb7500);
+}
+
+.eHElAY {
+  cursor: pointer;
+  display: inline-block;
+  margin-bottom: 1rem;
+  font-size: 1.1rem;
+  height: 2.8rem;
+  letter-spacing: 0.1rem;
+  line-height: 2.8rem;
+  padding: 0px 1.8rem;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  position: relative;
+  z-index: 0;
+  color: rgb(255, 255, 255);
+  border-color: transparent;
+  &::before {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    z-index: -1;
+    filter: blur(5px);
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+    animation-timeline: auto;
+    animation-range-start: normal;
+    animation-range-end: normal;
+    opacity: 1;
+    background: linear-gradient(
+        45deg,
+        rgb(255, 0, 0),
+        rgb(255, 115, 0),
+        rgb(255, 251, 0),
+        rgb(72, 255, 0),
+        rgb(0, 255, 213),
+        rgb(0, 43, 255),
+        rgb(122, 0, 255),
+        rgb(255, 0, 200),
+        rgb(255, 0, 0)
+      )
+      0% 0% / 400%;
+    animation: 20s linear 0s infinite normal none running dv-wu;
+    transition: opacity 0.3s ease-in-out;
+  }
+  &::after {
+    z-index: -1;
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: rgb(17, 17, 17);
+    left: 0px;
+    top: 0px;
+  }
+}
+@keyframes dv-wu {
+  0% {
+    background-position: 0px 0px;
+  }
+  50% {
+    background-position: 400% 0px;
+  }
+  100% {
+    background-position: 0px 0px;
+  }
+}