这里我为您提供两种主流的实现思路，并附上详细的代码和说明，您可以直接复制到 HBuilder 的 HTML 文件中使用。
（图片来源网络，侵删）
纯 CSS3 实现 (简单、轻量)
这种方法利用 CSS3 的 transform 和 transition 属性，通过添加/移除 CSS 类来触发动画，优点是代码量少，性能好，无需 JavaScript。
核心原理：
- 初始状态：所有图片重叠在一起（使用
position: absolute和top: 0; left: 0;）。 - 散开状态：为每张图片定义不同的
transform: translate()值,让它们向四周移动。 - 触发动画：通过一个父容器（
.gallery）的类（.gallery.scattered）来控制所有子图片是否应用散开状态的样式。 - 交互：用 JavaScript 监听点击事件，点击时添加
.scattered类,再次点击时移除。
完整代码示例 (复制到 HBuilder 的 HTML 文件即可运行)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">HBuilder 图片散开特效 (CSS3)</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.container {
text-align: center;
}
h1 {
margin-bottom: 30px;
color: #333;
}
/* 图片画廊容器 */
.gallery {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
cursor: pointer;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
/* 每张图片的公共样式 */
.gallery img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 保证图片不变形 */
border-radius: 10px;
/* 关键：设置过渡效果，让变化平滑 */
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 默认状态下，图片重叠 */
.gallery img:nth-child(1) { z-index: 5; }
.gallery img:nth-child(2) { z-index: 4; }
.gallery img:nth-child(3) { z-index: 3; }
.gallery img:nth-child(4) { z-index: 2; }
.gallery img:nth-child(5) { z-index: 1; }
/* 当添加 .scattered 类后，图片散开 */
.gallery.scattered img:nth-child(1) {
transform: translate(-150px, -150px) scale(0.8);
}
.gallery.scattered img:nth-child(2) {
transform: translate(150px, -150px) scale(0.8);
}
.gallery.scattered img:nth-child(3) {
transform: translate(-150px, 150px) scale(0.8);
}
.gallery.scattered img:nth-child(4) {
transform: translate(150px, 150px) scale(0.8);
}
.gallery.scattered img:nth-child(5) {
transform: translate(0, 0) scale(1.2); /* 中间的图片可以放大 */
}
/* 提示文字 */
.hint {
margin-top: 20px;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<h1>点击图片散开特效</h1>
<div class="gallery" id="myGallery">
<img src="https://picsum.photos/seed/pic1/300/300.jpg" alt="图片1">
<img src="https://picsum.photos/seed/pic2/300/300.jpg" alt="图片2">
<img src="https://picsum.photos/seed/pic3/300/300.jpg" alt="图片3">
<img src="https://picsum.photos/seed/pic4/300/300.jpg" alt="图片4">
<img src="https://picsum.photos/seed/pic5/300/300.jpg" alt="图片5">
</div>
<p class="hint">点击上方的图片查看效果</p>
</div>
<script>
// 获取画廊元素
const gallery = document.getElementById('myGallery');
// 为画廊添加点击事件监听器
gallery.addEventListener('click', function() {
// 切换 .scattered 类
this.classList.toggle('scattered');
});
</script>
</body>
</html>
JavaScript (GSAP) 实现 (灵活、强大)
GSAP (GreenSock Animation Platform) 是一个业界顶尖的 JavaScript 动画库，它能让动画控制变得极其简单和强大，这种方法可以实现更复杂的路径、缓动效果和交互。
核心原理：
- 引入 GSAP：通过 CDN 引入 GSAP 库。
- 创建时间线：使用 GSAP 的
gsap.timeline()创建一个动画序列。 - 定义动画：分别定义图片从初始位置到散开位置的动画,并添加到时间线中。
- 控制播放：监听点击事件，通过
timeline.play()和timeline.reverse()来控制动画的正向和反向播放。
完整代码示例 (复制到 HBuilder 的 HTML 文件即可运行)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">HBuilder 图片散开特效 (GSAP)</title>
<!-- 1. 引入 GSAP 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #2c3e50;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.container {
text-align: center;
}
h1 {
margin-bottom: 30px;
color: #ecf0f1;
}
/* 图片画廊容器 */
.gallery {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
cursor: pointer;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
/* 每张图片的公共样式 */
.gallery img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
/* 提示文字 */
.hint {
margin-top: 20px;
color: #bdc3c7;
}
</style>
</head>
<body>
<div class="container">
<h1>点击图片散开特效 (GSAP)</h1>
<div class="gallery" id="gsapGallery">
<img src="https://picsum.photos/seed/gsap1/300/300.jpg" alt="GSAP图片1">
<img src="https://picsum.photos/seed/gsap2/300/300.jpg" alt="GSAP图片2">
<img src="https://picsum.photos/seed/gsap3/300/300.jpg" alt="GSAP图片3">
<img src="https://picsum.photos/seed/gsap4/300/300.jpg" alt="GSAP图片4">
<img src="https://picsum.photos/seed/gsap5/300/300.jpg" alt="GSAP图片5">
</div>
<p class="hint">点击上方的图片查看效果</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 获取画廊和所有图片
const gallery = document.getElementById('gsapGallery');
const images = gallery.querySelectorAll('img');
// 2. 创建一个时间线，默认是暂停的
const tl = gsap.timeline({ paused: true });
// 3. 定义动画并添加到时间线
// 第一张图片：左上
tl.to(images[0], {
x: -150,
y: -150,
scale: 0.8,
duration: 0.8,
ease: "power2.out"
});
// 第二张图片：右上
tl.to(images[1], {
x: 150,
y: -150,
scale: 0.8,
duration: 0.8,
ease: "power2.out"
}, "-=0.6"); // 相对于前一个动画提前0.6秒开始
// 第三张图片：左下
tl.to(images[2], {
x: -150,
y: 150,
scale: 0.8,
duration: 0.8,
ease: "power2.out"
}, "-=0.6");
// 第四张图片：右下
tl.to(images[3], {
x: 150,
y: 150,
scale: 0.8,
duration: 0.8,
ease: "power2.out"
}, "-=0.6");
// 第五张图片：中间放大
tl.to(images[4], {
scale: 1.2,
duration: 0.8,
ease: "power2.out"
}, "-=0.6");
// 4. 添加点击事件来控制动画
let isScattered = false;
gallery.addEventListener('click', () => {
if (!isScattered) {
tl.play(); // 播放动画（散开）
isScattered = true;
} else {
tl.reverse(); // 反向播放动画（收拢）
isScattered = false;
}
});
});
</script>
</body>
</html>
两种方法的对比与选择
| 特性 | 纯 CSS3 方法 | GSAP 方法 |
|---|---|---|
| 实现难度 | 简单，只需 HTML/CSS/少量 JS | 中等，需要理解 GSAP API |
| 性能 | 非常高，由浏览器直接优化 | 非常高，GSAP 经过高度优化 |
| 灵活性 | 较低，动画路径和效果固定 | 极高，可创建任意复杂的动画路径、缓动效果 |
| 代码量 | 少，逻辑清晰 | 相对较多，但结构化好 |
| 适用场景 | 简单的展示效果，追求快速开发 | 复杂的交互、游戏、高级UI动效 |
如何选择？
- 如果你的需求只是一个简单的图片散开/收拢效果，并且希望代码尽可能简洁，选择方法一（纯 CSS3） 完全足够,而且性能最好。
- 如果你想让动画更炫酷，比如图片沿着曲线运动、有弹性效果、或者这个特效是更复杂交互的一部分，强烈推荐方法二（GSAP）,它能让你用更少的代码实现更强大的效果。
在 HBuilder 中，你可以直接新建一个 HTML 文件，将上述任一代码粘贴进去,然后运行到浏览器或手机模拟器上预览效果。
（图片来源网络，侵删）
（图片来源网络，侵删）
