css碎片效果制作

CSS碎片效果制作方法

使用clip-path属性创建不规则碎片形状 通过@keyframes定义动画使碎片移动或旋转 为每个碎片设置不同的延迟时间增强视觉效果

/* 基础碎片样式 */
.particle {
  width: 20px;
  height: 20px;
  background: #ff5722;
  position: absolute;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

碎片爆炸动画实现

定义关键帧动画控制碎片运动轨迹 利用transform属性实现旋转和缩放效果 通过opacity变化创造渐隐效果

@keyframes explode {
  0% {
    transform: translate(0) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) scale(0) rotate(360deg);
    opacity: 0;
  }
}

动态生成碎片技术

使用CSS变量控制碎片位置和动画参数 JavaScript动态创建DOM元素并设置样式 随机生成碎片大小和颜色增强真实感

const container = document.querySelector('.container');
for(let i=0; i<20; i++) {
  const particle = document.createElement('div');
  particle.classList.add('particle');
  particle.style.setProperty('--tx', `${Math.random()*200-100}px`);
  particle.style.setProperty('--ty', `${Math.random()*200-100}px`);
  particle.style.animationDelay = `${i*0.1}s`;
  container.appendChild(particle);
}

性能优化技巧

限制同时显示的碎片数量 使用will-change属性提示浏览器优化 考虑使用CSS硬件加速

.particle {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

进阶效果扩展

添加重力模拟使碎片自然下落 实现碎片碰撞检测和反弹效果 结合SVG创建更复杂的碎片形状

@keyframes fall {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100vh);
  }
}