feat: animation gradient text

Author: wkylin

src/components/stateless/GradientAnimation/index.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import styles from './index.module.less'
+const GradientAnimationText = ({ text }) => {
+  return <span className={styles['package-name']}>{text}</span>
+}
+
+export default GradientAnimationText

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

@@ -0,0 +1,26 @@
+.package-name {
+  color: transparent;
+  background: linear-gradient(45deg, #ff6347, #ffd700, #32cd32, #1e90ff, #8a2be2);
+  background-size: 400% 400%;
+  background-clip: text;
+  background-clip: text;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.1;
+  animation: gradient-animation 5s ease infinite;
+  filter: drop-shadow(1px 2px 0 #fff);
+}
+
+@keyframes gradient-animation {
+  0% {
+    background-position: 0% 0%;
+  }
+
+  50% {
+    background-position: 100% 100%;
+  }
+
+  100% {
+    background-position: 0% 0%;
+  }
+}

src/pages/layout/proHeader/index.jsx

@@ -6,6 +6,7 @@ import { UserOutlined, LogoutOutlined, GithubOutlined, DownOutlined, SmileOutlin
 import { useNavigate } from 'react-router-dom'
 import { removeLocalStorage } from '@utils/publicFn'
 import LanguageSwitcher from '@stateless/LanguageSwitcher'
+import GradientAnimationText from '@stateless/GradientAnimation'
 // import { ReactComponent as LightSvg } from '@assets/svg/light.svg'
 // import { ReactComponent as DarkSvg } from '@assets/svg/dark.svg'
 // import LightSvg from '@assets/svg/light.svg'
@@ -81,7 +82,7 @@ const ProHeader = () => {
     >
       <div aria-hidden="true" className={styles.logo} onClick={() => redirectTo('/')}>
         {/* Pro React <Tag>{process.env.DEPLOYED_ENV}</Tag> */}
-        Pro React Admin
+        <GradientAnimationText text="Pro React Admin" />
       </div>
       <div className={styles.headerMeta}>
         <div className={styles.headerMenu}>