css制作幻影

CSS 制作幻影效果

幻影效果通常指元素呈现半透明、模糊或带有残影的视觉效果，可通过CSS的透明度、模糊滤镜和动画实现。

透明度与模糊效果

通过opacity和filter属性实现基础幻影效果：

.phantom {
  opacity: 0.7;
  filter: blur(2px);
}

残影动画

使用关键帧动画创建动态残影：

@keyframes phantom-trail {
  0% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.1); }
}

.phantom-animate {
  animation: phantom-trail 1.5s ease-out infinite;
}

多重阴影

通过box-shadow叠加多层阴影增强立体感：

.phantom-shadow {
  box-shadow: 
    0 0 8px rgba(255,255,255,0.6),
    0 0 16px rgba(255,255,255,0.4),
    0 0 24px rgba(255,255,255,0.2);
}

混合模式

使用mix-blend-mode让元素与背景混合：

.phantom-blend {
  mix-blend-mode: overlay;
  background: rgba(200,200,255,0.3);
}

渐变过渡

结合渐变背景与过渡效果：

.phantom-gradient {
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.5),
    transparent
  );
  transition: all 0.3s ease;
}