当前位置：首页 > CSS

css3菊花动画制作

2026-04-01 01:12:52CSS

使用 CSS3 制作菊花动画

菊花动画（Loading Spinner）是一种常见的加载动画效果，通过旋转的线条或点模拟花瓣效果。以下是几种实现方法：

css3菊花动画制作

基础旋转动画

通过 @keyframes 和 transform: rotate 实现旋转效果：

css3菊花动画制作

.spinner {
  width: 40px;
  height: 40px;
  position: relative;
  animation: rotate 1s linear infinite;
}

.spinner::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top-color: #3498db;
  border-radius: 50%;
}

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

多花瓣效果

通过多个子元素和延迟动画实现花瓣效果：

<div class="spinner">
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
</div>

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

.petal {
  position: absolute;
  width: 100%;
  height: 100%;
}

.petal::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: #3498db;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.petal:nth-child(1) { transform: rotate(0deg); }
.petal:nth-child(2) { transform: rotate(90deg); }
.petal:nth-child(3) { transform: rotate(180deg); }
.petal:nth-child(4) { transform: rotate(270deg); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.petal::before {
  animation: pulse 1.2s ease-in-out infinite;
}

.petal:nth-child(1)::before { animation-delay: 0s; }
.petal:nth-child(2)::before { animation-delay: 0.3s; }
.petal:nth-child(3)::before { animation-delay: 0.6s; }
.petal:nth-child(4)::before { animation-delay: 0.9s; }

使用 `box-shadow` 简化结构

通过单个元素和 box-shadow 生成多个花瓣：

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

.spinner::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 
    0 -18px 0 #3498db,
    12.7px -12.7px 0 #3498db,
    18px 0 0 #3498db,
    12.7px 12.7px 0 #3498db,
    0 18px 0 #3498db,
    -12.7px 12.7px 0 #3498db,
    -18px 0 0 #3498db,
    -12.7px -12.7px 0 #3498db;
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}