css3菊花动画制作

使用CSS3制作菊花动画

菊花动画是一种常见的加载动画效果，通过CSS3的@keyframes和transform属性可以实现。以下是两种常见的实现方法：

旋转菊花动画

通过多个子元素的旋转和透明度变化实现菊花效果：

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

.loader div {
  width: 8px;
  height: 8px;
  background-color: #3498db;
  border-radius: 50%;
  position: absolute;
  top: 25px;
  animation: spin 1.2s linear infinite;
}

.loader div:nth-child(1) {
  left: 10px;
  animation-delay: -0.4s;
}
.loader div:nth-child(2) {
  left: 25px;
  animation-delay: -0.2s;
}
.loader div:nth-child(3) {
  left: 40px;
  animation-delay: 0s;
}

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

环形菊花动画

通过伪元素和旋转动画创建环形菊花效果：

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

.spinner::before,
.spinner::after {
  content: '';
  width: 15px;
  height: 15px;
  background-color: #333;
  border-radius: 50%;
  position: absolute;
}

.spinner::before {
  top: 0;
  left: 0;
  animation: bounce 1s infinite;
}

.spinner::after {
  bottom: 0;
  right: 0;
  animation: bounce 1s infinite -0.5s;
}

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

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

优化技巧

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

   

   .loader {
   will-change: transform;
   }

2. 通过调整animation-timing-function改变动画节奏：

   .loader {
   animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
   }

3. 响应式设计考虑：

   @media (max-width: 768px) {
   .loader {
    width: 40px;
    height: 40px;
   }
   }

这些CSS3动画方法不依赖JavaScript，性能较好，适合作为网页加载指示器使用。可以根据实际需求调整颜色、大小和动画速度等参数。