当前位置：首页 > CSS

css3菊花动画制作

2026-01-08 20:14:34CSS

CSS3 菊花动画制作

CSS3 菊花动画（Loading Spinner）可以通过 @keyframes 和 transform 属性实现旋转效果，结合伪元素或子元素模拟花瓣。

基础旋转动画

通过 @keyframes 定义旋转动画，应用于容器元素：

.spinner {
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

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

多花瓣效果

使用伪元素或子元素创建花瓣，通过延迟动画实现交错效果：

.spinner {
  position: relative;
  width: 40px;
  height: 40px;
}

.spinner::before,
.spinner::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid transparent;
  border-radius: 50%;
  border-top-color: #3498db;
  animation: spin 1s ease-in-out infinite;
}

.spinner::after {
  border-top-color: #e74c3c;
  animation-delay: 0.5s;
}

点状花瓣

通过多个子元素（点）和动画延迟实现菊花效果：

css3菊花动画制作

<div class="dot-spinner">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <!-- 更多点 -->
</div>

.dot-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dot {
  width: 8px;
  height: 8px;
  margin: 0 4px;
  background-color: #333;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out;
}

.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

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

进阶优化

使用 will-change: transform 提升动画性能
调整 animation-timing-function 实现缓动效果

通过 CSS 变量控制颜色和大小：

.spinner {
--spinner-color: #3498db;
--spinner-size: 40px;
width: var(--spinner-size);
height: var(--spinner-size);
border: 4px solid rgba(0,0,0,0.1);
border-radius: 50%;
border-top-color: var(--spinner-color);
}

以上方法可根据实际需求组合调整，实现不同风格的菊花加载动画。