css3菊花制作方法

CSS3菊花制作方法

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

基础旋转菊花

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

.spinner div {
  width: 6px;
  height: 6px;
  background-color: #333;
  border-radius: 50%;
  position: absolute;
  animation: spin 1.2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg) translate(20px) rotate(0deg); }
  100% { transform: rotate(360deg) translate(20px) rotate(-360deg); }
}

/* 创建12个点 */
.spinner div:nth-child(1) { animation-delay: 0.1s; }
.spinner div:nth-child(2) { animation-delay: 0.2s; }
/* ...依次为每个点设置延迟 */

渐变颜色菊花

.loader {
  width: 60px;
  height: 60px;
  border: 5px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  border-top-color: #3498db;
  animation: spin 1s ease-in-out infinite;
}

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

优化技巧

• 使用will-change: transform提升动画性能
• 调整animation-timing-function使用cubic-bezier()自定义缓动效果
• 通过修改border-width和元素尺寸控制菊花粗细
• 添加多个@keyframes实现更复杂的动画序列

浏览器兼容性

所有现代浏览器都支持CSS3动画，对于旧版IE需要使用JavaScript polyfill或降级方案。建议添加-webkit-等前缀确保兼容性。