feat: mesh gradient background

Author: wkylin

src/components/stateless/MeshGradientBackground/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import styles from './index.module.less'
+
+const MeshGradientBackground = (props) => {
+  return (
+    <div style={{ position: 'relative', height: '100%' }}>
+      <div className={styles.background}>Mesh Gradient Background</div>
+    </div>
+  )
+}
+export default MeshGradientBackground
+
+// https://www.csshero.org/animator/
+// https://csshero.org/mesher/

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

@@ -0,0 +1,55 @@
+.background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #ff99df;
+  background-image: radial-gradient(circle at 52% 73%, hsla(310, 85%, 67%, 1) 0px, transparent 50%),
+    radial-gradient(circle at 0% 30%, hsla(197, 90%, 76%, 1) 0px, transparent 50%),
+    radial-gradient(circle at 41% 26%, hsla(234, 79%, 69%, 1) 0px, transparent 50%),
+    radial-gradient(circle at 41% 51%, hsla(41, 70%, 63%, 1) 0px, transparent 50%),
+    radial-gradient(circle at 41% 88%, hsla(36, 83%, 61%, 1) 0px, transparent 50%),
+    radial-gradient(circle at 76% 73%, hsla(346, 69%, 70%, 1) 0px, transparent 50%),
+    radial-gradient(circle at 29% 37%, hsla(272, 96%, 64%, 1) 0px, transparent 50%);
+
+  background-size: 150% 150%;
+  filter: blur(10px);
+  animation: moveBackground 10s linear infinite;
+}
+
+@keyframes moveBackground {
+  0% {
+    background-size: 100% 100%;
+  }
+  10% {
+    background-size: 120% 80%;
+  }
+  20% {
+    background-size: 190% 140%;
+  }
+  30% {
+    background-size: 130% 110%;
+  }
+  40% {
+    background-size: 150% 120%;
+  }
+  50% {
+    background-size: 180% 100%;
+  }
+  60% {
+    background-size: 220% 80%;
+  }
+  70% {
+    background-size: 100% 50%;
+  }
+  80% {
+    background-size: 120% 70%;
+  }
+  90% {
+    background-size: 110% 90%;
+  }
+  100% {
+    background-size: 100% 100%;
+  }
+}

src/pages/home/index.jsx

@@ -21,6 +21,7 @@ import ScrollAnimation from '@stateless/ScrollAnimation'
 import AnimateOnScreen from '@stateless/AnimateOnScreen'
 import AnimateRipple from '@stateless/AnimateRipple'
 import AnimateWave from '@stateless/AnimateWave'
+import MeshGradientBackground from '@stateless/MeshGradientBackground'
 
 import { oneApiChat, prettyObject } from '@utils/aidFn'
 
@@ -217,13 +218,21 @@ const Home = () => {
           </>
         </AnimateOnScreen.ScaleIn>
       </section>
+      <section style={{ marginBottom: 40, height: 200, width: 360, overflow: 'hidden' }}>
+        <MeshGradientBackground />
+      </section>
       <section style={{ marginBottom: 40 }}>
         <AnimateRipple>Click Me</AnimateRipple>
       </section>
       <section style={{ marginBottom: 40 }} className={styles.maskBox}>
         <section className={styles.watermark}>water mark</section>
         mask
       </section>
+      <section style={{ marginBottom: 40 }}>
+        <button className={styles['button']}>
+          <span className={styles['button-label']}>Click Me</span>
+        </button>
+      </section>
 
       <section style={{ width: 600, margin: '30px 0' }}>
         <Input defaultValue={apiKey} placeholder="api key" onChange={changeApiKey} style={{ marginBottom: 20 }} />
@@ -236,7 +245,7 @@ const Home = () => {
               onChange={changeChatText}
               onKeyDown={onInputKeyDown}
               autoSize
-              style={{ width: 300, height: 30 }}
+              style={{ width: 300, height: 30, caretColor: '#ff0000' }}
             />
           </LinearWrap>
           <Button

src/pages/home/index.module.less

@@ -65,3 +65,23 @@
     transform: translateY(50px);
   }
 }
+
+.button {
+  background: transparent;
+  padding: 0.5rem 1rem;
+  background-image: linear-gradient(90deg, white, white), linear-gradient(90deg, hsl(289, 65%, 64%), hsl(226, 78%, 67%));
+  background-clip: padding-box, border-box;
+  background-origin: border-box;
+  border: 5px solid transparent;
+  border-radius: 1.75rem;
+}
+
+.button-label {
+  background-image: linear-gradient(90deg, hsl(289, 65%, 64%), hsl(226, 78%, 67%));
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  font-weight: 600;
+  font-size: 1.25rem;
+  line-height: 1.5rem;
+}