当前位置：首页 > 行业动态 > 正文

html图片爆炸效果

admin
行业动态
2025-05-03
2627

通过HTML结合CSS3动画或Canvas绘制，利用JavaScript监听点击事件触发爆炸效果，实现图片破碎为多图块并

实现原理

通过CSS将图片分割为多个小块,配合JavaScript控制动画触发，使图片呈现“爆炸”分散效果，核心思路：

html图片爆炸效果第1张

图片分割：将图片拆分为多个可独立运动的碎片
绝对定位：所有碎片使用绝对定位覆盖原图位置
动画控制：通过变换（transform）实现碎片的位移和旋转
事件触发：点击/悬停时启动动画

实现步骤

步骤	说明	示例代码
准备图片	选择需要制作特效的图片，建议尺寸适中（如400×400px）	`<img src="image.jpg" id="explode-img">`
覆盖定位层	创建透明容器覆盖图片，用于放置碎片	`css<br>#container {<br> position: relative;<br> width: 400px;<br> height: 400px;<br>}<br>#overlay {<br> position: absolute;<br> top: 0;<br> left: 0;<br> width: 100%;<br> height: 100%;<br> pointer-events: none;<br>}`
生成碎片	用JavaScript动态创建碎片元素	js<br>const pieces = 8;<br>for(let i=0; i<pieces; i++) {<br> const piece = document.createElement('div');<br> piece.className = 'piece';<br> piece.style.backgroundPosition = `-${i%250}% -${Math.floor(i/2)50}%`;<br> container.appendChild(piece);<br>}
定义碎片样式	设置碎片基本样式和背景图	`css<br>.piece {<br> position: absolute;<br> width: 50%;<br> height: 50%;<br> background-image: url('image.jpg');<br> background-size: 200% 200%;<br>}`
添加动画	通过CSS动画实现爆炸效果	`css<br>@keyframes explode {<br> 0% { transform: translate(0,0) rotate(0deg); opacity: 1 }br> 100% { transform: translate(-200px,-200px) rotate(720deg); opacity: 0 }br>}<br>.piece.active {<br> animation: explode 1s ease-out forwards;<br>}`

完整示例代码

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">图片爆炸效果</title>
<style>
#container {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 50px auto;
  overflow: hidden;
}
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.piece {
  position: absolute;
  width: 50%;
  height: 50%;
  background-image: url('https://via.placeholder.com/400x400');
  background-size: 200% 200%;
  transition: transform 0.5s;
}
.piece:nth-child(1) { left: 0; top: 0; background-position: 0 0; }
.piece:nth-child(2) { left: 50%; top: 0; background-position: -100% 0; }
.piece:nth-child(3) { left: 0; top: 50%; background-position: 0 -100%; }
.piece:nth-child(4) { left: 50%; top: 50%; background-position: -100% -100%; }
</style>
</head>
<body>
<div id="container">
  <img src="https://via.placeholder.com/400x400" id="source-img">
  <div id="overlay"></div>
</div>
<script>
const container = document.getElementById('container');
const pieces = 4; // 分割为4块（2x2）
const overlay = document.getElementById('overlay');
// 创建碎片元素
for(let i=0; i<pieces; i++) {
  const piece = document.createElement('div');
  piece.className = 'piece';
  piece.style.left = `${i%250}%`;
  piece.style.top = `${Math.floor(i/2)50}%`;
  overlay.appendChild(piece);
}
// 点击触发爆炸效果
container.addEventListener('click', () => {
  const pieces = overlay.children;
  [...pieces].forEach((piece, index) => {
    const angle = index  90; // 根据碎片索引计算旋转角度
    const distance = Math.random()200 + 100; // 随机飞行距离
    piece.style.transform = `translate(${Math.cos(angleMath.PI/180)distance}px, ${Math.sin(angleMath.PI/180)distance}px) rotate(${720 + Math.random()360}deg)`;
    piece.style.transition = 'transform 1s ease-out';
    piece.style.opacity = '0.5';
  });
});
</script>
</body>
</html>