【开源宝藏】30天学会CSS - DAY9 第九课 牛顿摆动量守恒动画

以下是一份逐步拆解教程 ,带你从零理解并复刻这个牛顿摆(Pendulum of Newton)动画效果,这是一个经典的物理演示模型,现在通过纯 HTML 和 CSS 实现出来,视觉效果炫酷、结构简洁。


🎯 动画效果说明

  • 页面中央悬挂了五根线,每根线下方挂着一个小球。
  • 最左和最右的小球依次以一定角度摆动。
  • 中间三颗球静止,模仿现实中"动量守恒"的经典效果。

🧱 第 0 步:项目结构

复制代码
newton-pendulum/
├── index.html       # HTML结构
└── style.css        # 样式与动画

🔤 第 1 步:HTML 结构

index.html 中可以看到如下结构【已简化注释】:

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 的样式:

css 复制代码
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 步:定义线条和球体

css 复制代码
.pendulo span {
	display: block;
	width: 3px;              /* 细线 */
	height: 300px;           /* 绳子长度 */
	background-color: white;
	margin: 0 29px;          /* 线与线之间间距 */
	position: relative;
	transform-origin: top;   /* 旋转中心为上端 */
}

说明

  • 每根线是一个细长的 div
  • 设置了 transform-origin: top,使动画时以顶部为旋转中心。

⚪ 第 4 步:添加球体(使用伪元素)

css 复制代码
.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 添加动画:

css 复制代码
.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 步:定义关键帧动画

左球动画

css 复制代码
@keyframes left-arm {
	0%   { transform: rotate(0deg); }
	25%  { transform: rotate(60deg); }
	50%  { transform: rotate(0deg); }
	100% { transform: rotate(0deg); }
}

右球动画

css 复制代码
@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 秒:右球摆动,作为动量传递的结果。
    • 循环往复,展示真实的牛顿摆动作。

🧪 可拓展方向

  1. 颜色变化

    css 复制代码
    background-color: crimson; /* 红色球体 */
  2. 增加阴影或发光

    css 复制代码
    box-shadow: 0 0 10px white;
  3. 添加真实晃动曲线(贝塞尔曲线)

    • 使用 cubic-bezier() 替代 ease-in,可以模拟更真实物理轨迹。
  4. 交互性

    • 使用 JavaScript 添加点击触发、暂停等功能。

✅ 总结

技术点 应用说明
flexbox 页面元素居中
transform 通过旋转实现绳子摆动
::before 创建附着在元素上的球体
animation-delay 控制动画交错,让左右球交替摆动
keyframes 自定义动画流程,控制角度变化与节奏
相关推荐
前端老鹰4 分钟前
JavaScript Array.prototype.some ():数组判断的 “快捷侦探”
前端·javascript
张元清5 分钟前
揭秘JS事件循环:一道字节跳动面试题带你深入理解async/await、Promise与RAF
前端·react.js·面试
KenXu8 分钟前
F2C-Chrome插件-Figma免费的DevMode来了!
前端
北海几经夏14 分钟前
React组件中的this指向问题
前端·react.js
passer98127 分钟前
列表项切换时同步到可视区域
前端
FogLetter29 分钟前
移动端适配的终极奥义:从lib-flexible到postcss-pxtorem的全方位指南
前端·postcss
易元30 分钟前
设计模式-访问者模式
前端·后端·设计模式
兵临天下api30 分钟前
Elasticsearch 查询性能优化:从 3 秒到 300ms 的 6 个核心参数调优指南
前端
子林super38 分钟前
y1新建cluster集群redis
前端
liangdabiao41 分钟前
一篇文章尽快介绍入门级智能体Agent是什么回事, Starter AI Agents 项目 来自 awesome-llm-apps
前端·后端