图标动画实现指南 ✨

使用 CSS 实现图标动画 🎨

1. 基础动画属性
   通过 @keyframes 定义动画效果，如旋转、缩放或闪烁。
   示例代码：

   @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
   }
   .icon { animation: spin 2s linear infinite; }
   

   

2. 动画优化技巧

   • 使用 transform 替代 top/left 提升性能
   • 通过 opacity 实现淡入淡出效果
   • 利用 will-change 提前声明动画属性
   

JavaScript 动态控制动画 ⚙️

• 通过 DOM 操作触发动画

  const icon = document.querySelector('.icon');
  icon.addEventListener('click', () => {
    icon.classList.toggle('animate');
  });
  

• 结合 requestAnimationFrame 实现流畅动画

  function animateIcon() {
    // 动画逻辑
    requestAnimationFrame(animateIcon);
  }
  animateIcon();
  

  

SVG 动画方案 📐

1. 直接嵌入 SVG 动画代码

   <svg width="100" height="100">
     <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="3" fill="white" />
     <animate attributeName="r" from="40" to="60" dur="2s" repeatCount="indefinite" />
   </svg>
   

2. 使用 SMIL 动画语法

   <svg>
     <rect width="100" height="100" fill="green">
       <animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite" />
     </rect>
   </svg>
   

   

扩展阅读 📚

点击查看动画基础教程 了解更全面的动画实现方法。