当前位置：首页 > CSS

css制作幻影

2026-02-13 00:10:25CSS

使用CSS制作幻影效果

幻影效果通常指元素呈现半透明、模糊或带有残影的视觉效果。以下是几种实现方法：

透明度与模糊效果

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

.phantom {
  opacity: 0.7;
  filter: blur(2px);
  transition: all 0.3s ease;
}

多重阴影创造残影

利用box-shadow叠加多层阴影模拟动态残影：

.phantom-shadow {
  box-shadow: 
    0 0 10px rgba(0,0,0,0.2),
    0 0 20px rgba(0,0,0,0.1),
    0 0 30px rgba(0,0,0,0.05);
}

动画关键帧实现浮动效果

通过@keyframes让元素若隐若现移动：

@keyframes phantom-float {
  0% { transform: translateY(0); opacity: 0.8; }
  50% { transform: translateY(-10px); opacity: 0.4; }
  100% { transform: translateY(0); opacity: 0.8; }
}
.phantom-animate {
  animation: phantom-float 3s infinite;
}

混合模式增强融合感

使用mix-blend-mode让元素与背景产生特殊混合：

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

伪元素创造分层效果

通过::before/::after增加虚幻层次：

css制作幻影

.phantom-layers::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  filter: blur(5px);
  opacity: 0.5;
}

实际应用中可根据需求组合这些技术，调整参数值以达到最佳视觉效果。