feat: wave

Author: wkylin

src/pages/demo/index.jsx

@@ -16,6 +16,8 @@ import XuePng from '@assets/images/xue.png'
 
 import { Command, Cannabis, Beer, Mail } from 'lucide-react'
 
+import styles from './index.module.less'
+
 const companies = [SpringPng, HePng, SongPng, XuePng]
 const columns = [
   {
@@ -220,6 +222,11 @@ const ProDemo = () => {
           </div>
         </div>
       </section>
+      <section className={styles['section-gradient']}>
+        <div className={styles.wave}></div>
+        <div className={styles.wave}></div>
+        <div className={styles.wave}></div>
+      </section>
       <Footer />
     </FixTabPanel>
   )

src/pages/demo/index.module.less

@@ -65,3 +65,81 @@ body {
 .button:hover::after {
   transform: rotate(0deg);
 }
+
+.section-gradient {
+  margin: 0 auto;
+  background: linear-gradient(
+    315deg,
+    rgb(252 208 158) 3%,
+    rgb(144 200 255) 38%,
+    rgb(104 245 250) 68%,
+    rgb(45 151 250) 98%
+  );
+  animation: gradient 25s ease infinite;
+  background-size: 400% 400%;
+  background-attachment: fixed;
+  position: relative;
+  overflow: hidden;
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 0%;
+  }
+
+  50% {
+    background-position: 100% 100%;
+  }
+
+  100% {
+    background-position: 0% 0%;
+  }
+}
+
+.wave {
+  background: rgb(255 255 255 / 25%);
+  border-radius: 1000% 1000% 0 0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 200%;
+  height: 200px;
+  animation: wave 10s -3s linear infinite;
+  transform: translate3d(0, 0, 0);
+  opacity: 0.8;
+  z-index: 1;
+}
+
+.wave:nth-of-type(2) {
+  bottom: -30px;
+  animation: wave 8s linear reverse infinite;
+  opacity: 0.8;
+}
+
+.wave:nth-of-type(3) {
+  bottom: -60px;
+  animation: wave 10s -1s reverse infinite;
+  opacity: 0.9;
+}
+
+@keyframes wave {
+  2% {
+    transform: translateX(1);
+  }
+
+  25% {
+    transform: translateX(-25%);
+  }
+
+  50% {
+    transform: translateX(-50%);
+  }
+
+  75% {
+    transform: translateX(-25%);
+  }
+
+  100% {
+    transform: translateX(1);
+  }
+}