css制作旋转幻影

旋转幻影效果实现方法

旋转幻影效果通常通过CSS动画和滤镜组合实现，核心是利用transform旋转和filter模糊/透明度变化。以下是两种典型实现方式：

基础旋转模糊效果

.ghost-element {
  width: 100px;
  height: 100px;
  background: rgba(255, 0, 0, 0.5);
  border-radius: 50%;
  animation: spin 3s infinite linear;
  filter: blur(5px);
}

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

关键点：

• filter: blur()添加模糊效果
• 半透明颜色（如rgba()）增强幻影感
• 无限循环的旋转动画

多重幻影进阶版

通过伪元素创建多个层叠的幻影：

.advanced-ghost {
  position: relative;
  width: 80px;
  height: 80px;
}

.advanced-ghost::before,
.advanced-ghost::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, cyan, transparent 70%);
  border-radius: 50%;
  opacity: 0.7;
}

.advanced-ghost::before {
  animation: ghost-spin 4s infinite ease;
  filter: blur(10px);
}

.advanced-ghost::after {
  animation: ghost-spin 6s infinite ease reverse;
  filter: blur(5px);
}

@keyframes ghost-spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.5); }
  100% { transform: rotate(360deg) scale(1); }
}

特性：

• 伪元素创建双重幻影层
• 反向动画增强动态效果
• 缩放动画配合旋转
• 径向渐变背景提升视觉层次

性能优化建议

• 使用will-change: transform, filter;提前告知浏览器变化
• 避免过度模糊（blur()值过大影响性能）
• 考虑mix-blend-mode实现特殊混合效果
• 对移动端设备减少动画复杂度

调试时可使用animation-play-state: paused;逐帧检查效果。