当前位置：首页 > CSS

css3菊花制作方法

2026-02-12 17:46:46CSS

CSS3菊花制作方法

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

HTML结构

css3菊花制作方法

<div class="spinner">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>

CSS样式

.spinner {
  margin: 100px auto;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;
  border-radius: 100%;
  display: inline-block;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  animation-delay: -0.16s;
}

.spinner .bounce3 {
  animation-delay: 0;
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0);
  } 40% { 
    transform: scale(1.0);
  }
}

另一种实现方式

通过旋转动画和伪元素可以创建更复杂的菊花效果：

css3菊花制作方法

.loader {
  width: 48px;
  height: 48px;
  border: 5px solid #FFF;
  border-bottom-color: #FF3D00;
  border-radius: 50%;
  display: inline-block;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

自定义菊花样式

调整以下属性可以自定义菊花效果：

颜色：修改background-color或border-color
大小：调整width和height值
速度：修改animation-duration值
动画类型：尝试不同的animation-timing-function

多色菊花效果

创建彩色菊花可以通过为每个点设置不同颜色：

.spinner > div {
  width: 12px;
  height: 12px;
  margin: 0 2px;
  border-radius: 50%;
  display: inline-block;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  background-color: #FF6384;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  background-color: #36A2EB;
  animation-delay: -0.16s;
}

.spinner .bounce3 {
  background-color: #FFCE56;
  animation-delay: 0;
}

这些方法都可以创建出流畅的菊花加载效果，根据项目需求选择最适合的实现方式。