From 20a94876cebdc22a4b28a8e1d1e7166a203e10a7 Mon Sep 17 00:00:00 2001
From: "wkylin.w" <wkylin.w@gmail.com>
Date: Sat, 9 Nov 2024 19:58:29 +0800
Subject: [PATCH] feat: animation background

---
 package-lock.json                |  6 ++-
 package.json                     |  4 +-
 src/i18n/i18n.js                 |  2 +-
 src/pages/home/index.jsx         |  4 ++
 src/pages/home/index.module.less | 74 ++++++++++++++++++++++++++++++++
 5 files changed, 85 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 728a6e10..d5f94f30 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -166,14 +166,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",
@@ -4961,6 +4961,7 @@
       "resolved": "https://registry.npmmirror.com/@eslint/js/-/js-9.14.0.tgz",
       "integrity": "sha512-pFoEtFWCPyDOl+C6Ift+wC7Ro89otjigCf5vcuWqWgqNSQbRrpjSvdeE6ofLz4dHmyxD5f7gIdGT4+p36L6Twg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
@@ -23877,6 +23878,7 @@
       "resolved": "https://registry.npmmirror.com/globals/-/globals-15.12.0.tgz",
       "integrity": "sha512-1+gLErljJFhbOVyaetcwJiJ4+eLe45S2E7P5UiZ9xGfeq3ATQf5DOv9G7MH3gGbKQLkzmNh2DxfZwLdw+j6oTQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=18"
       },
diff --git a/package.json b/package.json
index 2b4674ca..8c8eafa9 100644
--- a/package.json
+++ b/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",
diff --git a/src/i18n/i18n.js b/src/i18n/i18n.js
index 445f8fae..59085a12 100644
--- a/src/i18n/i18n.js
+++ b/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, // 不转义特殊字符
     },
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 8c8a6dc0..c37c6880 100644
--- a/src/pages/home/index.jsx
+++ b/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">
diff --git a/src/pages/home/index.module.less b/src/pages/home/index.module.less
index 55a085bf..ed0a6ebb 100644
--- a/src/pages/home/index.module.less
+++ b/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;
+  }
+}