以下是一份逐步拆解教程，带你从零理解并复刻这个牛顿摆（Pendulum of Newton）动画效果，这是一个经典的物理演示模型，现在通过纯 HTML 和 CSS 实现出来，视觉效果炫酷、结构简洁。
🎯 动画效果说明
- 页面中央悬挂了五根线，每根线下方挂着一个小球。
- 最左和最右的小球依次以一定角度摆动。
- 中间三颗球静止，模仿现实中“动量守恒”的经典效果。
🧱 第 0 步：项目结构
newton-pendulum/
├── index.html # HTML结构
└── style.css # 样式与动画
🔤 第 1 步：HTML 结构
从 index.html 中可以看到如下结构【已简化注释】：
<!DOCTYPE html>
<html lang="pt-br"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>牛顿摆</title><link rel="stylesheet" href="style.css" type="text/css" media="all"><link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet"></head><body><div class="pendulo"><span></span><span></span><span></span><span></span><span></span></div></body>
</html>
✅ 说明
.pendulo是牛顿摆的总容器。- 5 个
<span>表示 5 根线，每根线下面有一个球（通过 CSS 中的::before实现）。
🎨 第 2 步：页面居中 + 背景色设置
在 style.css 中，先看看 body 和 .pendulo 的样式：
body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #2c3e50; /* 深蓝背景 */
}.pendulo {display: flex;border-top: 10px solid white; /* 顶部横杆 */
}
关键点
- 使用
flex实现内容居中。 border-top让.pendulo看起来像是“挂球的横梁”。
⚙️ 第 3 步：定义线条和球体
.pendulo span {display: block;width: 3px; /* 细线 */height: 300px; /* 绳子长度 */background-color: white;margin: 0 29px; /* 线与线之间间距 */position: relative;transform-origin: top; /* 旋转中心为上端 */
}
说明
- 每根线是一个细长的
div。 - 设置了
transform-origin: top，使动画时以顶部为旋转中心。
⚪ 第 4 步：添加球体（使用伪元素）
.pendulo span:before {content: "";position: absolute;bottom: 0;left: 0;width: 60px;height: 60px;border-radius: 50%; /* 圆形 */background-color: white;transform: translateX(-50%);
}
✨ 原理
::before是挂在每根绳子底部的球。width: 60px+border-radius: 50%形成一个白色圆形。transform: translateX(-50%)让球体居中于线条正下方。
🧩 第 5 步：添加左右摆动动画
为第一个和最后一个 span 添加动画：
.pendulo span:first-child {animation: left-arm 2s ease-in infinite;
}.pendulo span:last-child {animation: right-arm 2s ease-in infinite 1s;
}
⏱️ 动画延迟
left-arm动画立即开始。right-arm动画延迟1s开始，模拟能量从左球传递到右球的过程。
🎞️ 第 6 步：定义关键帧动画
左球动画
@keyframes left-arm {0% { transform: rotate(0deg); }25% { transform: rotate(60deg); }50% { transform: rotate(0deg); }100% { transform: rotate(0deg); }
}
右球动画
@keyframes right-arm {0% { transform: rotate(0deg); }25% { transform: rotate(-60deg); }50% { transform: rotate(0deg); }100% { transform: rotate(0deg); }
}
💡 分析
- 每个动画都是 2 秒一轮：
- 0%~25%：摆动到最大角度（60° 或 -60°）。
- 25%~50%：返回中间（静止）。
- 50%~100%：保持不动。
- 中间 3 个球没有动画，模拟现实中的受力后“保持静止”。
🔁 整体动画节奏
- 每两秒一次完整循环：
- 第 1 秒：左球摆动，撞击中间球。
- 第 2 秒：右球摆动，作为动量传递的结果。
- 循环往复，展示真实的牛顿摆动作。
🧪 可拓展方向
-
颜色变化
background-color: crimson; /* 红色球体 */ -
增加阴影或发光
box-shadow: 0 0 10px white; -
添加真实晃动曲线（贝塞尔曲线）
- 使用
cubic-bezier()替代ease-in，可以模拟更真实物理轨迹。
- 使用
-
交互性
- 使用 JavaScript 添加点击触发、暂停等功能。
✅ 总结
| 技术点 | 应用说明 |
|---|---|
flexbox | 页面元素居中 |
transform | 通过旋转实现绳子摆动 |
::before | 创建附着在元素上的球体 |
animation-delay | 控制动画交错，让左右球交替摆动 |
keyframes | 自定义动画流程，控制角度变化与节奏 |
