当前位置：首页 > CSS

css碎片效果制作

2026-03-12 08:39:52CSS

CSS碎片效果制作方法

碎片效果可以通过CSS的clip-path属性、transform属性和动画关键帧实现。以下是两种常见实现方式：

基础碎片动画

css碎片效果制作

.particle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #ff5722;
  border-radius: 50%;
  animation: explode 1s ease-out forwards;
}

@keyframes explode {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--x), var(--y)) scale(0);
    opacity: 0;
  }
}

高级多边形碎片

css碎片效果制作

.fragment {
  position: absolute;
  width: 40px;
  height: 40px;
  background: linear-gradient(45deg, #ff0, #f00);
  clip-path: polygon(0 0, 100% 50%, 50% 100%);
  animation: 
    spin 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    fade 1s ease-out forwards;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

@keyframes fade {
  100% { opacity: 0; }
}

JavaScript动态生成碎片

通过JavaScript动态创建碎片元素并设置随机运动参数：

function createParticles(x, y, count=20) {
  for(let i=0; i<count; i++) {
    const particle = document.createElement('div');
    particle.className = 'particle';
    particle.style.left = `${x}px`;
    particle.style.top = `${y}px`;
    particle.style.setProperty('--x', `${Math.random()*200-100}px`);
    particle.style.setProperty('--y', `${Math.random()*200-100}px`);
    document.body.appendChild(particle);

    particle.addEventListener('animationend', () => {
      particle.remove();
    });
  }
}

SVG路径碎片

使用SVG路径创建更复杂的碎片形状：

<svg class="fragment" viewBox="0 0 100 100">
  <path d="M10 10 L90 50 L50 90 Z" fill="#E91E63"/>
</svg>

.fragment {
  position: absolute;
  width: 30px;
  height: 30px;
  animation: 
    drift 1.5s ease-out forwards,
    rotate 2s linear;
}

@keyframes drift {
  to {
    transform: translate(150px, -80px);
    opacity: 0;
  }
}