当前位置：首页 > news >正文

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

news 来源：原创 2025/7/27 19:15:25

以下是一份逐步拆解教程，带你从零理解并复刻这个牛顿摆（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`	自定义动画流程，控制角度变化与节奏

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

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

编程日记 2025/7/27 19:15:25

对三维物体模型的阈值操作

对三维物体模型的阈值操作 1. 使用point_coord_x、point_coord_y、point_coord_z阈值分割麻辣兔头2. point_normal_x、point_normal_y、point_normal_z有什么区别？3. 去除离群点 1. 使用point_coord_x、point_coord_y、point_coord_z阈值分割麻辣兔头 dev_open_win…...

编程日记 2025/7/18 10:31:30

【Unity网络编程知识】使用Socket实现简单TCP通讯

1、Socket的常用属性和方法创建Socket TCP流套接字 Socket socketTcp new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp); 1.1 常用属性 1）套接字的连接状态 socketTcp.Connected 2）获取套接字的类型 socketTcp.So…...

编程日记 2025/7/11 22:16:38

简记_单片机硬件最小系统设计

以STM32为例： 一、电源 1.1、数字电源 IO电源：VDD、VSS：1.8~3.6V，常用3.3V，去耦电容1 x 10u N x 100n ； 内核电源：内嵌的稳压器输出：1.2V，给内核、存储器、数字外设…...

编程日记 2025/7/27 19:15:24

Android Launcher实战：完美复刻iOS风格Hotseat布局优化

一、需求背景与效果呈现在Android 13系统深度定制过程中，原生Launcher的Hotseat布局因视觉效果平庸需要进行UI重构。产品团队要求仿照iOS系统设计，实现以下核心特性： 取消传统横屏铺满效果采用居中显示布局方案支持圆角背景与智能边距调…...

编程日记 2025/7/24 9:35:00

2025-3-25算法打卡

一，走迷宫 1.题目描述： 给定一个 NMNM 的网格迷宫 GG。GG 的每个格子要么是道路，要么是障碍物（道路用 11 表示，障碍物用 00 表示）。已知迷宫的入口位置为 (x1,y1)(x1,y1)，出口位置为 (x…...

编程日记 2025/7/22 2:21:55

Python：进程的常用方法，注意细节，进程线程对比

进程常用方法： start()：启动进程实例 is_alive()：判断子进程的存活状态，返回True或False，子进程执行完后的状态为False join([timeout])：是否等待子进程执行结束(在当前位置阻塞主进程)主进程等子进程多长…...

编程日记 2025/7/23 12:10:45

北京交通大学第三届C语言积分赛

作者有言在先： 题解的作用是交流思路，不是抄作业的。可以把重点放在思路分析上而不是代码上，毕竟每个人的代码风格是不一样的，看别人的代码就跟做程序填空题一样。先看明白思路再看代码。还有就是，deepseek真的很好用…...

编程日记 2025/7/17 7:01:45

架构设计之自定义延迟双删缓存注解(下)

架构设计之自定义延迟双删缓存注解(下) 小薛博客官方架构设计之自定义延迟双删缓存注解(下)地址为了保证Cache和ClearAndReloadCache的灵活性，特意加入EL表达式解析 1、Cache package com.xx.cache;import java.lang.annotation.*; import java.util.concurren…...

编程日记 2025/7/14 1:46:38

SingleMod

SingleMod SingleMod是一种深度学习模型，专为利用纳米孔直接RNA测序（DRS）数据在单RNA分子中精确检测m6A修饰而设计。该模型通过深度多实例回归框架进行训练，能够充分利用广泛的甲基化率标签。SingleMod是一个通用框架，可轻松适配其他核酸修饰的检测模型训练。注意： Si…...

编程日记 2025/7/23 13:56:23

SQL-查询漏洞

一、查询注入的数据类型 //list.php<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatiable" content"IEedge"><meta name"viewport" content&…...

编程日记 2025/7/22 23:54:11

Maven 多模块项目（如微服务架构）中，父 POM（最外层）和子模块 POM（具体业务模块）的区别和联系

文章目录 **1. 父 POM 的核心职责****1.1 依赖管理 (dependencyManagement)****1.2 插件管理 (pluginManagement)****1.3 其他公共配置** **2. 子模块 POM 的核心职责****2.1 依赖声明 (dependencies)****2.2 插件启用与覆盖 (plugins)** **3. 核心对比表****4. 使用场景示例**…...

编程日记 2025/7/20 22:50:51

【AIGC】图片变视频 - SD ComfyUI视频生成

效果图完整过程 SD ComfyUI 下载下载 https://pan.quark.cn/s/64b808baa960 解压密码：bilibili-秋葉aaaki 完整 https://www.bilibili.com/video/BV1Ew411776J/ SD ComfyUI 安装 1.解压 2.将controlnet内部文件复制到 ComfyUI-aki-v1.6\ComfyUI\models\control…...

编程日记 2025/7/21 10:54:53

思考我的未来职业

李升伟编译关于我我是一名专注于后端开发的软件工程师，拥有十年专业编程经验。从学生时代起，编程就是我的热情所在，并一直保持着这个长期爱好。此外，我也热爱动漫和电影。然而过去几年，婚姻、家庭责任和育儿让生…...

编程日记 2025/7/27 7:09:36

StarRocks数据导入

文章目录 StarRocks数据导入Broker LoadETL 集群导数非 ETL 集群导数Broker Load 任务查看BrokerLoad⼤数据量导⼊优化参数推荐配置BrokerLoad 排查思路 Insert IntoInsert Into大数据量导入优化参数 Stream LoadStreamLoad⼤数据量导⼊优化参数推荐配置Stream Load 排查思路 R…...

编程日记 2025/7/27 19:14:06

mmdetection安装

链接: link...

编程日记 2025/6/28 1:56:56

光学像差的类型与消除方法

### **光学像差的类型、理解与消除方法** 光学像差是指实际光学系统成像时，由于透镜或反射镜的非理想特性导致的光线偏离理想路径，从而影响成像质量的现象。像差可分为**单色像差**（与波长无关）和**色差**（与波长相关…...

编程日记 2025/7/25 16:34:56

Manus AI 破局多语言手写识别，解锁智能新天地

Manus AI 破局多语言手写识别，解锁智能新天地前言在人工智能技术不断渗透各行各业的背景下，手写识别领域长期面临多语言适配难、复杂场景泛化能力弱等挑战。ManusAI凭借其创新的算法架构和多模态融合技术，成功突破传统OCR（光学…...

编程日记 2025/6/28 2:55:13

文字颜色的渐变（svg实现）

一上下渐变（有底部阴影） 效果如图： svg代码如下： <svg width"300" height"100" xmlns"http://www.w3.org/2000/svg"><defs><linearGradient id"textGradient" x1"…...

编程日记 2025/7/25 12:16:59

Java-设计模式

Java-设计模式 ⓪设计模式基础 ❶设计模式分类创建型模式用于描述对象实例化（创建对象）的模式，即用于解耦对象的实例化过程 GoF（四人组）书中提供了单例、原型、工厂方法、抽象工厂、建造者等 5 种创建型模式。 …...

编程日记 2025/7/26 23:50:46

“我是GM”之NAS搭建Luanti游戏服务器，开启沙盒游戏新体验

“我是GM”之NAS搭建Luanti游戏服务器，开启沙盒游戏新体验哈喽小伙伴们好，我是Stark-C~ 曾几何时，哪怕是现在，估计依然有很多小伙伴沉迷于开放性和自由度极高的《我的世界》这种沙盒游戏吧~。我个人到现在手机上还有这款游戏…...

编程日记 2025/7/22 8:31:04

K8S学习之基础五十：k8s中pod时区问题并通过kibana查看日志

k8s中pod默认时区不是中国的，挂载一个时区可以解决 vi pod.yaml apiVersion: v1 kind: Pod metadata:name: counter spec:containers:- name: countimage: 172.16.80.140/busybox/busybox:latestimagePullPolicy: IfNotPresentargs: [/bin/sh,-c,i0;while true;do …...

编程日记 2025/7/16 4:31:16

光电效应及普朗克常数的测定数据处理 Python实现

内容仅供参考，如有错误，欢迎指正，如有疑问，欢迎交流。因为我不会Excel所以只能用Python来处理祝大家早日摆脱物理实验的苦海用到的一些方法 PCHIP （分段三次埃尔米特插值多项式） 因为实验时记录的数…...

编程日记 2025/7/27 11:44:58

hyperf中关于时间的设定

下面我来总结这三者的用法和它们之间的关系： 1. protected ?string $dateFormat U; 作用： 定义数据库日期字段的存储格式‘U’ 表示使用 Unix 时间戳格式（秒级，10位数字） 影响范围： 决定了模型从数据…...

编程日记 2025/7/26 21:30:41

编程实现自我指涉（self-reference）

从计算机的组成原理出发，编程实现自我指涉（self-reference）本质上是通过代码操纵代码，形成逻辑上的闭环。这种能力不仅是编程语言设计中的一个奇妙现象，更是计算理论、计算机架构、乃至哲学层面的一种深刻映射。让我们…...

编程日记 2025/7/22 9:34:26

数据类设计_图片类设计_矩阵图类型和像素图类型设计的补充

前言以矩阵图类型和像素图类型作为图像类数据的基础,但在使用过程中有个问题:矩阵图形和像素图形的尺寸---长和高没有表现出来,本贴对此做出分析. 引入原帖数据类设计_图片类设计之7_矩阵图形类设计更新_实战之页面简单设计（前端架构）-CSDN博客里有对…...

编程日记 2025/7/22 9:56:39

php写入\查询influxdb数据

namespace app\index\controller;use InfluxDB2\Client; use InfluxDB2\Model\WritePrecision; use InfluxDB2\Point;class Demo {/*** 显示资源列表** return \think\Response*/public function index(){$token 你的TOKEN;$org zzlichi;$bucket initdb;$client new Client…...

编程日记 2025/7/22 5:07:31

新手村：逻辑回归-理解02：逻辑回归中的伯努利分布

新手村：逻辑回归-理解02：逻辑回归中的伯努利分布伯努利分布在逻辑回归中的潜在含义及其与后续推导的因果关系 1. 伯努利分布作为逻辑回归的理论基础 ⭐️ 逻辑回归的核心目标是: 建模二分类问题中目标变量 y y y 的概率分布。伯努利分布&#xff08…...

编程日记 2025/7/13 23:34:35

Python正则表达式（一）

目录一、正则表达式的基本概念 1、基本概念 2、正则表达式的特殊字符二、范围符号和量词 1、范围符号 2、匹配汉字 3、量词三、正则表达式函数 1、使用正则表达式： 2、re.match()函数 3、re.search()函数 4、findall()函数 5、re.finditer()函数 6…...

编程日记 2025/7/24 18:54:09

JavaScript基础-事件委托（代理、委派）

在Web开发中，处理用户交互时经常需要监听DOM元素上的事件。然而，当页面上存在大量的动态生成的元素时，直接给每个元素绑定事件处理器可能会导致性能问题和代码管理复杂度增加。这时，事件委托提供了一种更加高效且易于维护的解决方…...

编程日记 2025/7/22 5:07:15

《TCP/IP网络编程》学习笔记 | Chapter 22：重叠 I/O 模型

《TCP/IP网络编程》学习笔记 | Chapter 22：重叠 I/O 模型《TCP/IP网络编程》学习笔记 | Chapter 22：重叠 I/O 模型理解重叠 I/O 模型重叠 I/O本章讨论的重叠 I/O 的重点不在于 I/O 创建重叠 I/O 套接字执行重叠 I/O 的 WSASend 函数进行重叠 I/O 的 WSA…...

编程日记 2025/7/25 23:44:09

【区块链安全 | 第二篇】区块链概念详解

文章目录概述1. 区块链类型2 区块链五层架构3 账本模型4. 节点（Node）5. 区块（Block）6. 区块链（Blockchain）7. 区块链工作流程核心技术1. 共识机制2. 智能合约主要组件1. 交易（Transaction&am…...

编程日记 2025/7/23 4:35:06

Android实践开发制作小猴子摘桃小游戏

Android实践制作小猴子摘桃小游戏实践素材项目源文件获取：Android可以存在版本差异项目如果不能正确运行，可以使用里面的素材自己构建项目Android实践制作小猴子摘桃小游戏Android实践制作小猴子摘桃小游戏https://mp.weixin.qq.com/s/jNU_hVfj9xklsil…...

编程日记 2025/7/26 17:36:24

“11.9元“引发的系统雪崩：Spring Boot中BigDecimal反序列化异常全链路狙击战 ✨

💥 "11.9元"引发的系统雪崩：Spring Boot中BigDecimal反序列化异常全链路狙击战 🎯 🔍 用 Mermaid原生防御体系图 #mermaid-svg-XZtcYBnmHrF9bFjc {font-family:"trebuchet ms",verdana,arial,sans-serif;fon…...

编程日记 2025/7/24 9:50:32

【C++】回调函数和回调对象

文章目录回调可调用对象函数指针作回调函数对象作回调函数对象的使用std::function【C11】作回调使用【C11】Lambda表达式作回调【C11】bind对象作回调std::bind的使用作回调使用回调当发生某种事件时需要调用或触发另一个事件即为回调，回调的核心即为将可调用…...

编程日记 2025/7/26 18:08:31

电子产品可靠性预计怎么做？

目录 1、电子产品可靠性预计的目的 2、电子产品可靠性预计的常用方法 2.1、基于统计数据的预计方法 2.2、物理模型预计方法 2.3、加速寿命试验 2.4、基于仿真的预计方法 3、电子产品可靠性预计的步骤 3.1、定义可靠性指标 3.2、收集数据 3.3、建立模型 3.4、进行仿真…...

编程日记 2025/7/26 1:29:59

Ubuntu20.0.4创建ssh key以及repo命令的使用

创建ssh key ssh-keygen //一路回车，不用输入任何东西cat ~/.ssh/id_rsa.pub 配置git config git config --global user.name xxx // 设置git用户名git config --global user.email xxx.com.cn //设置git 邮箱git config --list// remove the git config// rm -fr …...

编程日记 2025/7/27 1:48:03

Java动态代理的使用和安全问题

前言： java的动态代理是指进行明确的分工的操作（多接口比如我是酒店的老板有人找我合作需要先经过前台我的助理而不是直接找我） 序列化 ：为什么序列化序列化的对象是一个类我们也叫对象 class一堆东西里面有很多函…...

编程日记 2025/7/14 18:12:15

Linux云计算SRE-第二十一周

构建单节点prometheus，部署node exporter和mongo exporter。构建kibana大盘。包含主机PU使用率，主机MEM使用率，主机网络包速度。mongo db大盘，包含节点在线状态，读操作延迟等一、实验环境准备 - 节点信息&#xff1…...

编程日记 2025/7/24 1:14:06

《Python实战进阶》第33集：PyTorch 入门-动态计算图的优势

第33集：PyTorch 入门-动态计算图的优势摘要 PyTorch 是一个灵活且强大的深度学习框架，其核心特性是动态计算图机制。本集将带您探索 PyTorch 的张量操作、自动求导系统以及动态计算图的特点与优势，并通过实战案例演示如何使用 PyTorch 实现…...

编程日记 2025/7/22 5:40:23

python dict转换成json格式

一开始你变成字典格式 data [ { a : 1, b : 2, c : 3, d : 4, e : 5 } ] import json data [ { a : 1, b : 2, c : 3, d : 4, e : 5 } ] data2 json.dumps(data) print(data2)json.dumps(data) 是将数组json化。 json格式化输出 data2 json.dumps({a: Runoob, b: 7…...

编程日记 2025/7/24 10:41:23

美亚科技业绩波动明显：现金流为负，四起未决诉讼涉金额1700万

《港湾商业观察》施子夫近期，广东美亚旅游科技集团股份有限公司（以下简称，美亚科技）披露第二轮审核问询函的回复。从两轮问询函监管层提出的问题来看，有关美亚科技业绩增长的合理性、募投项目的必要性及合理性、经营…...

编程日记 2025/7/25 23:02:06

Java面试总结+算法

目录 Java 中和 equals 的区别是什么？ 什么是类加载器，Java 中有哪些类加载器？它们的职责分别是什么？ Redis 有哪些数据结构？它们分别适用于哪些场景？ 什么是索引？MySQL 有哪些常见的索引类…...

编程日记 2025/7/24 9:43:57

深度优先搜索（DFS）在排列组合问题中的应用详解：C++实现与优化

一、排列问题（Permutations） 目标：生成所有可能的排列（元素顺序不同视为不同结果）。示例：输入 [1,2,3]，输出所有长度为3的排列，共6种。 C实现代码 #include <iostream> #i…...

编程日记 2025/7/24 15:54:46

GeoChat : Grounded Large Vision-Language Model for Remote Sensing论文精读

GeoChat : Grounded Large Vision-Language Model for Remote Sensing 是一个针对遥感场景的llm，提供支持多任务对话（对高分辨率遥感图像）。也造了个数据集。一些思考： 文中提到的局限性：小物体和多框预测较难。小物…...

编程日记 2025/7/24 10:06:14

Postman使用02、断点、fiddler弱网测试

脚本操作一、脚本导出 1.导出json脚本 2.打包json文件 3.下载的文件二 .导入脚本 1.选择文件 2.点击导入 3.导入的接口三.多接口运行 1.集合右键，点击run ，运行多个接口 2.编辑环境，集合，执行次数等 3.运行多个接口四.运行…...

编程日记 2025/7/23 10:07:38

深入解析 C++20 中的 std::bind_front：高效函数绑定与参数前置

文章目录 1. 什么是 std::bind_front？2. 使用 std::bind_front2.1 基本用法2.2 绑定多个参数 3. 优势与特点3.1 简化代码3.2 支持可调用对象3.3 支持完美转发 4. 实际应用场景4.1 事件处理4.2 算法通用化4.3 成员函数调用 5. 总结在现代 C 编程中，函数绑…...

编程日记 2025/7/23 5:28:08