当前位置：首页 > CSS

css3菊花制作方法

2026-01-08 20:34:17CSS

CSS3菊花制作方法

使用CSS3的动画和旋转特性可以轻松实现菊花加载效果。以下是两种常见的实现方式：

方法一：使用多个元素旋转

创建12个子元素，每个元素代表菊花的一个花瓣，通过旋转和透明度变化实现动画效果。

<div class="chrysanthemum">
  <div class="petal"></div>
  <div class="petal"></div>
  <!-- 重复12个petal元素 -->
</div>

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

.petal {
  position: absolute;
  width: 6px;
  height: 20px;
  background: #3498db;
  border-radius: 3px;
  left: 27px;
  top: 0;
  transform-origin: 50% 30px;
}

.petal:nth-child(1) { transform: rotate(0deg); animation: fade 1s infinite; }
.petal:nth-child(2) { transform: rotate(30deg); animation: fade 1s infinite 0.083s; }
/* 继续为每个花瓣设置不同延迟 */

@keyframes fade {
  0% { opacity: 1; }
  100% { opacity: 0.2; }
}

方法二：使用伪元素和变量

通过CSS变量控制花瓣数量和动画延迟，减少HTML代码量。

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

.spinner {
  --petals: 12;
  --size: 60px;
  width: var(--size);
  height: var(--size);
  position: relative;
}

.spinner::before {
  content: "";
  position: absolute;
  width: calc(var(--size) / 10);
  height: calc(var(--size) / 3);
  background: #3498db;
  border-radius: calc(var(--size) / 20);
  left: calc(50% - var(--size) / 20);
  top: 0;
  transform-origin: 50% calc(var(--size) / 2);
  animation: spin 1.2s linear infinite;
}

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

关键参数调整