当前位置：首页 > React

动画实现react图标

2026-01-26 19:11:01React

使用CSS动画实现React图标旋转

安装React Icons库（如未安装）：

npm install react-icons

引入所需图标和CSS模块：

import { FaReact } from 'react-icons/fa';
import styles from './ReactIcon.module.css';

定义CSS动画：

/* ReactIcon.module.css */
.spin {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

组件实现：

function AnimatedReactIcon() {
  return <FaReact className={styles.spin} size={48} color="#61DAFB" />;
}

使用Framer Motion实现高级动画

安装Framer Motion：

npm install framer-motion

实现弹性缩放动画：

import { motion } from "framer-motion";

function BouncingReactIcon() {
  return (
    <motion.div
      animate={{
        scale: [1, 1.2, 1],
        rotate: [0, 180, 360],
      }}
      transition={{
        duration: 2,
        repeat: Infinity,
        ease: "easeInOut"
      }}
    >
      <FaReact size={64} color="#61DAFB" />
    </motion.div>
  );
}

使用GSAP实现路径动画

安装GSAP：

npm install gsap

创建路径追踪动画：

import { useRef, useEffect } from 'react';
import { gsap } from 'gsap';

function PathAnimatedIcon() {
  const iconRef = useRef(null);

  useEffect(() => {
    gsap.to(iconRef.current, {
      rotation: 360,
      duration: 3,
      repeat: -1,
      ease: "power1.out",
      transformOrigin: "center"
    });
  }, []);

  return <FaReact ref={iconRef} size={72} color="#61DAFB" />;
}

SVG路径动画实现

自定义SVG动画组件：

function SvgReactIcon() {
  return (
    <svg
      width="100"
      height="100"
      viewBox="0 0 100 100"
      className={styles.pulse}
    >
      <circle cx="50" cy="50" r="20" fill="#61DAFB" />
      <g fill="none" stroke="#61DAFB" strokeWidth="2">
        <ellipse cx="50" cy="50" rx="35" ry="20" />
        <ellipse cx="50" cy="50" rx="35" ry="20" transform="rotate(60 50 50)" />
        <ellipse cx="50" cy="50" rx="35" ry="20" transform="rotate(120 50 50)" />
      </g>
    </svg>
  );
}

配套CSS：

动画实现react图标

.pulse {
  animation: pulse 1.5s ease-in-out infinite alternate;
}

@keyframes pulse {
  from {
    transform: scale(0.9);
    opacity: 0.8;
  }
  to {
    transform: scale(1.1);
    opacity: 1;
  }
}