feat: animation text

Author: wkylin

src/components/stateless/AnimText/index.jsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from 'react'
+
+import styles from './index.module.less'
+
+const AnimText = ({ animText = '' }) => {
+  const arrText = animText.split('') || []
+  const [letterClass, setLetterClass] = useState('text-animate')
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLetterClass('text-animate-hover')
+    }, 3000)
+  }, [])
+
+  return (
+    <span>
+      {arrText.map((item, index) => (
+        <span key={item + index} style={{ '--delay': index + 1 }} className={styles[letterClass]}>
+          {item}
+        </span>
+      ))}
+    </span>
+  )
+}
+
+export default AnimText

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

@@ -0,0 +1,84 @@
+.text-animate {
+  display: inline-block;
+  opacity: 0;
+  animation: bounce-in;
+  animation-duration: 1s;
+  animation-delay: 1s;
+  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  animation-fill-mode: forwards;
+  min-width: 10px;
+}
+
+.text-animate-hover {
+  --delay: 0;
+
+  min-width: 10px;
+  display: inline-block;
+  animation: rubber-band 1s;
+  animation-fill-mode: both;
+  animation-delay: var(--delay) s;
+
+  &:hover {
+    animation: none;
+    color: #ff4500;
+  }
+}
+
+@keyframes bounce-in {
+  0% {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  20% {
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    transform: scale3d(0.97, 0.97, 0.97);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes rubber-band {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+
+  30% {
+    transform: scale3d(1.25, 0.75, 1);
+  }
+
+  40% {
+    transform: scale3d(0.75, 1.25, 1);
+  }
+
+  50% {
+    transform: scale3d(1.15, 0.85, 1);
+  }
+
+  65% {
+    transform: scale3d(0.95, 1.05, 1);
+  }
+
+  75% {
+    transform: scale3d(1.05, 0.95, 1);
+  }
+
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}

src/components/stateless/StarBackground/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import styles from './index.module.less'
 // 生成随机阴影值的函数
 const generateBoxShadow = (n) => {

src/pages/home/index.jsx

@@ -65,6 +65,7 @@ import DottedStepper from '@stateless/DottedStepper'
 import FlipWords from '@stateless/FlipWords'
 import BorderBeam from '@stateless/BorderBeam'
 import AutoSlider from '@stateless/AutoSlider'
+import AnimText from '@stateless/AnimText'
 import firstImage from '@assets/images/88-300x160.jpg'
 import secondImage from '@assets/images/2-300x160.jpg'
 
@@ -327,6 +328,9 @@ const Home = () => {
       <section style={{ margin: '20px 0', fontSize: 20 }}>
         <MultiDirectionSlide textLeft="逐光前行，奔赴新程；" textRight="千山过尽，万里星辰！" />
       </section>
+      <section style={{ margin: '20px 0', fontSize: 20 }}>
+        <AnimText animText="逐光前行，奔赴新程；千山过尽，万里星辰！" />
+      </section>
       <section style={{ marginBottom: 15, fontSize: 20, overflow: 'hidden' }}>
         This is something
         <SlideText text={['amazing', 'new', 'wonderful', 'beautiful', 'smart']} />

src/styles/reset.css

@@ -96,12 +96,6 @@
   }
 }
 
-/* body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-} */
-
 html,
 body {
   height: 100%;