css制作旋转幻影

CSS 旋转幻影效果实现

旋转幻影效果通常通过 CSS 动画、透明度和多重阴影实现，以下是一种常见的实现方法：

HTML 结构

<div class="phantom-rotate"></div>

CSS 样式

.phantom-rotate {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, #ff00ff, #00ffff);
  border-radius: 50%;
  position: relative;
  animation: rotate 3s infinite linear;
  box-shadow: 
    0 0 20px #ff00ff,
    0 0 40px #00ffff;
}

.phantom-rotate::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  border-radius: inherit;
  animation: inherit;
  animation-delay: 0.5s;
  opacity: 0.7;
  z-index: -1;
}

.phantom-rotate::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  border-radius: inherit;
  animation: inherit;
  animation-delay: 1s;
  opacity: 0.4;
  z-index: -2;
}

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

效果增强技巧

增加更多伪元素可以创造更丰富的幻影效果。每个伪元素设置不同的 animation-delay 和 opacity 值，形成时间差和透明度层次。

调整 box-shadow 的模糊半径和颜色可以改变光晕强度：

box-shadow: 
  0 0 10px rgba(255, 0, 255, 0.8),
  0 0 30px rgba(0, 255, 255, 0.6),
  0 0 60px rgba(255, 0, 255, 0.4);

性能优化建议

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

.phantom-rotate {
  will-change: transform, box-shadow;
}

考虑使用 filter 属性替代多重阴影：

.phantom-rotate {
  filter: drop-shadow(0 0 10px #ff00ff) 
          drop-shadow(0 0 20px #00ffff);
}