css3菊花动画制作

使用 CSS3 制作菊花动画

菊花动画通常指一种旋转的加载动画，类似于花瓣旋转的效果。以下是几种实现方法：

关键帧动画实现

通过 @keyframes 定义旋转动画，结合 transform 和 opacity 实现花瓣效果：

.loader {
  width: 60px;
  height: 60px;
  position: relative;
}

.loader .petal {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #3498db;
  border-radius: 50%;
  animation: spin 1.2s infinite ease-in-out;
}

@keyframes spin {
  0%, 100% { opacity: 0.3; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1); }
}

多花瓣布局

通过为每个花瓣设置不同的延迟和位置：

.loader .petal:nth-child(1) {
  top: 0;
  left: 20px;
  animation-delay: 0s;
}
.loader .petal:nth-child(2) {
  top: 5px;
  left: 40px;
  animation-delay: 0.1s;
}
/* 继续添加更多花瓣... */

简化版单元素实现

使用伪元素和 box-shadow 创建多个花瓣：

.loader {
  width: 20px;
  height: 20px;
  position: relative;
  animation: spin 1s infinite linear;
}

.loader:before, .loader:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 
    0 0 0 5px rgba(52, 152, 219, 0.2),
    30px 0 0 5px rgba(52, 152, 219, 0.3),
    -30px 0 0 5px rgba(52, 152, 219, 0.4);
}

性能优化建议

• 使用 will-change: transform 提升动画性能
• 避免过多使用 box-shadow，改用多个元素
• 考虑使用 transform: rotate() 替代 left/top 位移

完整示例通常需要 8-12 个花瓣元素，通过调整动画延迟和位置实现交替旋转效果。可根据实际需求调整花瓣数量、颜色和旋转速度。