怎么用Bootstrap制作摇一摇抽奖视觉动画-Bootstrap教程-PHP中文网

摇一摇动画是用CSS动画模拟而非陀螺仪，推荐使用animate.css的shakeX类，时长控制在600ms内、位移±8px以内，需用JS控制增删class并监听animationend事件清理状态。

怎么用bootstrap制作摇一摇抽奖视觉动画

摇一摇动画不是靠手机陀螺仪，而是用 CSS 动画模拟

Bootstrap 本身不提供“摇一摇”动画，也没有内置的 shake 类。你看到的所谓“Bootstrap 摇一摇效果”，实际是用 CSS @keyframes 配合 Bootstrap 的工具类（比如 animate__animated）或自定义 class 实现的视觉抖动。真调用设备陀螺仪属于 JavaScript 层逻辑，和 Bootstrap 无关。

关键点在于：动画触发时机（比如点击按钮后）、抖动幅度与持续时间要克制，否则易引发用户眩晕。建议抖动总时长控制在 600ms 内，位移不超过 ±8px。

用 `animate.css` 快速接入 shake 效果（推荐）

animate.css 是最常用的第三方动画库，和 Bootstrap 兼容性好，且已预置 shakeX 和 shakeY 动画。别自己写 keyframes —— 容易漏掉 transform: translateZ(0) 导致 Safari 闪屏，也容易忽略 animation-fill-mode: both 造成动画结束后元素跳回原位。

通过 CDN 引入：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

给抽奖容器加 class：animate__animated animate__shakeX（注意前缀 animate__ 是 v4+ 强制要求）

用 JS 控制触发（避免页面加载就动）：

document.getElementById('lottery-btn').addEventListener('click', () => {<br>  const el = document.getElementById('prize-box');<br>  el.classList.add('animate__animated', 'animate__shakeX');<br>  setTimeout(() => {<br>    el.classList.remove('animate__animated', 'animate__shakeX');<br>  }, 600);<br>});

不用第三方库？手写一个轻量 `shake` class 也够用

如果项目不允许引入外部 CSS，直接在或 SCSS 中加一段即可。重点是用 transform: translateX() 而非 margin 或 left，保证硬件加速；同时补上 will-change: transform 提前提示浏览器优化。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

@keyframes shake {<br>  0%, 100% { transform: translateX(0); }<br>  25% { transform: translateX(-6px); }<br>  50% { transform: translateX(4px); }<br>  75% { transform: translateX(-2px); }<br>}<br><br>.shake {<br>  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;<br>  will-change: transform;<br>}

使用时只需：

，再配合 JS 切换 class 控制启停。摇完之后怎么“定格”显示中奖结果？别忘了重置动画状态
常见错误：连续点击多次，shake class 叠加导致动画卡顿或失效；或者动画结束没清 class，下次再点没反应。根本原因是 CSS 动画不会自动清除 class，也不支持“中断当前动画立即跳到下一帧”。

每次触发前先移除已有动画 class：el.classList.replace('shake', '') 或批量 remove()

用 animationend 事件比 setTimeout 更可靠，尤其在用户切页或系统卡顿时：el.addEventListener('animationend', () => {<br>  el.classList.remove('shake');<br>}, { once: true });

中奖结果展示建议用独立 DOM 节点（如 ），不要和动画容器混在一起 —— 否则抖动时文字也会模糊，影响可读性
真正难的不是让盒子晃，而是让晃得自然、停得及时、结果看得清。动画延迟、设备像素比、甚至用户是否开启了“减少运动”系统偏好，都会影响最终观感。上线前务必在 iOS Safari 和 Android Chrome 上实机点十次以上验证。