css3菊花制作方法

使用CSS3制作菊花效果

菊花效果通常指由多个旋转的小圆点组成的加载动画，类似花瓣环绕的效果。以下是实现方法：

HTML结构

<div class="chrysanthemum">
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <!-- 添加更多花瓣元素 -->
</div>

CSS关键代码

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

.petal {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #3498db;
  border-radius: 50%;
  animation: rotate 1.5s infinite ease-in-out;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg) translate(30px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translate(30px) rotate(-360deg);
  }
}

花瓣数量与位置控制

通过CSS变量控制花瓣数量和位置分布：

.petal {
  --n: 12; /* 花瓣总数 */
  --i: 0; /* 当前花瓣索引 */
  animation-delay: calc(var(--i) * (1.5s / var(--n)));
  transform: rotate(calc(var(--i) * (360deg / var(--n))) 
             translate(30px) 
             rotate(calc(var(--i) * (-360deg / var(--n))));
}

颜色渐变效果

为花瓣添加颜色变化：

@keyframes color-change {
  0% { background-color: #3498db; }
  50% { background-color: #9b59b6; }
  100% { background-color: #3498db; }
}

.petal {
  animation: 
    rotate 1.5s infinite ease-in-out,
    color-change 3s infinite ease-in-out;
}

响应式调整

使用视窗单位实现响应式尺寸：

.chrysanthemum {
  width: 10vw;
  height: 10vw;
}

.petal {
  width: 1.5vw;
  height: 1.5vw;
  transform: rotate(calc(var(--i) * (360deg / var(--n))) 
             translate(5vw) 
             rotate(calc(var(--i) * (-360deg / var(--n))));
}

性能优化建议

使用will-change属性提升动画性能：

.petal {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

以上方法组合使用可以创建出流畅的CSS3菊花加载动画效果，通过调整花瓣数量、大小、颜色和动画时间可以产生不同的视觉效果。