必须用JavaScript生成随机位置和动画参数，CSS仅定义可复用的float动画并读取自定义属性；图片设position:fixed、transform位移、pointer-events:none，JS动态设置--tx/--ty/--rot/--dur/--delay及初始坐标。
用 CSS 动画 + JavaScript 随机定位实现漂浮效果
纯 CSS 无法生成真正随机的位置，必须靠 JavaScript 每次生成不同的 top、left、transform 和动画时长。核心是：用 JS 动态设置元素的初始位置和动画参数，再触发 CSS 关键帧动画。
- 图片需设为
position: absolute或fixed，脱离文档流才能自由漂浮 - 每个漂浮图应有独立的
animation-duration和animation-delay，避免同步抖动 - 推荐用
transform: translate()而非直接改top/left，性能更好且不触发重排
关键 CSS 动画定义（@keyframes + class）
定义一个可复用的漂浮动画，用 transform 实现平滑位移，避免使用 top/left 导致 layout 波动：
```css
@keyframes float {
0% {
transform: translate(0, 0) rotate(0deg);
}
50% {
transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
}
100% {
transform: translate(0, 0) rotate(0deg);
}
}
.float-img {
position: fixed;
animation: float linear infinite;
animation-duration: var(--dur, 8s);
animation-delay: var(--delay, 0s);
/* 确保不会被其他元素遮挡 */
pointer-events: none;
z-index: -1;
}
```注意：--tx、--ty、--rot 是自定义属性，由 JS 注入，CSS 本身不生成随机值。
JavaScript 动态注入随机参数并挂载
对每张图，生成独立的偏移量、旋转角、持续时间和延迟，并写入元素 style：
立即学习“前端免费学习笔记（深入）”；
```js
function createFloatImage(src) {
const img = document.createElement('img');
img.src = src;
img.className = 'float-img';
<p>// 随机范围：水平 ±20vw，垂直 ±20vh，旋转 ±10deg，时长 6–12s，延迟 0–3s
const tx = (Math.random() - 0.5) <em> 40 + 'vw';
const ty = (Math.random() - 0.5) </em> 40 + 'vh';
const rot = (Math.random() - 0.5) <em> 20 + 'deg';
const dur = 6 + Math.random() </em> 6 + 's';
const delay = Math.random() * 3 + 's';</p><p>img.style.setProperty('--tx', tx);
img.style.setProperty('--ty', ty);
img.style.setProperty('--rot', rot);
img.style.setProperty('--dur', dur);
img.style.setProperty('--delay', delay);</p><p>// 防止图片加载失败时占位错乱
img.style.width = '40px';
img.style.height = '40px';
img.style.objectFit = 'contain';</p><p>document.body.appendChild(img);
}</p><p>// 调用示例（可循环多次）
createFloatImage('bubble.png');
createFloatImage('star.svg');</p><pre class='brush:</pre>;toolbar:false;'>
<ul>
<li>务必限制图片尺寸（如 <code>width</code>/<code>height</code>），否则大图会撑满视口甚至溢出</li>
<li><code>pointer-events: none</code> 很关键——不然漂浮图会挡住下方按钮或链接</li>
<li>若需响应式适配，可监听 <code>resize</code> 事件并重新计算 <code>--tx</code>/<code>--ty</code>，但通常没必要</li>
</ul>
<H3>常见问题：图片卡在角落 / 不动 / 闪退</H3>
<p>这些基本都源于初始定位或动画配置错误：</p>
<ul>
<li><code>position: fixed</code> 但没设 <code>top</code>/<code>left</code> → 浏览器按默认（0, 0）渲染，所有图叠在左上角 → 解决：JS 中加 <code>img.style.top = '50vh'; img.style.left = '50vw';</code> 再微调</li>
<li>动画 <code>duration</code> 太短（如 <code>0.5s</code>）→ 视觉上像抽搐而非漂浮 → 建议下限设为 <code>4s</code>，上限 <code>15s</code></li>
<li>图片跨域或路径错误 → 控制台报 <code>GET http://... 404</code> 或 <code>CORS</code> 错误 → 检查 <code>src</code> 是否可访问，优先用相对路径或同源资源</li>
<li>大量图片同时启动动画 → 页面卡顿 → 控制总数（建议 ≤ 8 张），或用 <code>requestAnimationFrame</code> 分批挂载</li>
</ul>
<p>真正难的是让“随机”看起来自然：太规律像程序生成，太混乱又像 bug。多调几次 <code>Math.random()</code> 范围，比写一堆条件判断更有效。 
