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

CSS 逐帧动画

news 来源：原创 2025/6/26 12:39:29

CSS 逐帧动画实现指南

逐帧动画(frame-by-frame animation)是一种通过快速连续显示一系列静态图像来创造运动效果的技术。以下是使用CSS实现逐帧动画的几种方法。

1. 使用 `steps()` 计时函数

这是实现逐帧动画最常用的方法，通过animation-timing-function的steps()函数实现。

.sprite {width: 100px;height: 100px;background-image: url('sprite-sheet.png');animation: play 1s steps(6) infinite;
}@keyframes play {from { background-position: 0 0; }to { background-position: -600px 0; }
}

参数说明：

steps(6) - 表示动画分为6步完成
-600px - 雪碧图总宽度(6帧 × 每帧100px)

2. 完整雪碧图动画示例

<!DOCTYPE html>
<html>
<head>
<style>.character {width: 64px;height: 64px;background-image: url('https://example.com/walk-cycle.png');background-position: 0 0;animation: walk 1s steps(8) infinite;}@keyframes walk {from { background-position: 0 0; }to { background-position: -512px 0; } /* 8帧 × 64px */}
</style>
</head>
<body><div class="character"></div>
</body>
</html>

3. 多行雪碧图处理

对于包含多行动画的雪碧图：

.sprite {width: 64px;height: 64px;background-image: url('multi-row-sprite.png');animation: play 0.8s steps(8) infinite;
}/* 行走动画 */
.walk {animation-name: walk;
}@keyframes walk {from { background-position: 0 0; }to { background-position: -512px 0; }
}/* 跳跃动画 */
.jump {animation-name: jump;
}@keyframes jump {from { background-position: 0 -64px; } /* 第二行 */to { background-position: -512px -64px; }
}

4. 使用多个DOM元素实现逐帧动画

如果不使用雪碧图，可以通过切换多个元素的显示来实现：

<div class="frame-animation"><img src="frame1.png" class="frame active"><img src="frame2.png" class="frame"><img src="frame3.png" class="frame"><img src="frame4.png" class="frame">
</div>

.frame-animation {position: relative;width: 100px;height: 100px;
}.frame {position: absolute;top: 0;left: 0;opacity: 0;animation: frameAnimation 1s infinite;
}.frame.active {opacity: 1;
}@keyframes frameAnimation {0%, 25% { opacity: 0; }25.1%, 50% { opacity: 1;z-index: 1;}50.1%, 75% { opacity: 0;z-index: 0;}75.1%, 100% { opacity: 1;z-index: 1;}
}.frame:nth-child(1) { animation-delay: 0s; }
.frame:nth-child(2) { animation-delay: 0.25s; }
.frame:nth-child(3) { animation-delay: 0.5s; }
.frame:nth-child(4) { animation-delay: 0.75s; }

5. 使用CSS自定义属性控制动画帧

:root {--frame-count: 8;--frame-width: 64px;
}.sprite {width: var(--frame-width);height: 64px;background-image: url('sprite.png');animation: play 1s steps(var(--frame-count)) infinite;
}@keyframes play {to {background-position: calc(-1 * var(--frame-count) * var(--frame-width)) 0;}
}

性能优化建议

使用will-change:

.sprite {will-change: background-position;
}

减少复合操作:
- 优先使用opacity和transform属性
- 避免在动画中改变width/height等属性
合理使用硬件加速:
```
.sprite {transform: translateZ(0);
}
```

控制动画频率:

@media (prefers-reduced-motion: reduce) {.sprite {animation: none;}
}

浏览器兼容性

现代浏览器都支持steps()函数
IE10及以上支持，但可能需要前缀
对于更老的浏览器，可以使用JavaScript实现回退

高级技巧：与JavaScript结合

// 动态改变动画速度
const sprite = document.querySelector('.sprite');
sprite.style.animationDuration = '0.5s';// 暂停/播放动画
function toggleAnimation() {const animation = sprite.style.animationPlayState;sprite.style.animationPlayState = animation === 'paused' ? 'running' : 'paused';
}// 切换不同动画
function changeAnimation(type) {sprite.style.animationName = type;
}

逐帧动画是游戏开发和UI动效中常用的技术，合理使用可以创建出流畅的视觉效果，同时保持较好的性能表现。

CSS 逐帧动画

CSS 逐帧动画实现指南逐帧动画(frame-by-frame animation)是一种通过快速连续显示一系列静态图像来创造运动效果的技术。以下是使用CSS实现逐帧动画的几种方法。 1. 使用 steps() 计时函数这是实现逐帧动画最常用的方法，通过animation-timing-function的steps(…...

编程日记 2025/6/26 12:39:29

UE5 游戏模板 —— ThirdPersonGame

UE5 游戏模板 —— ThirdPersonGame 前言一、初始化旋转控制参数1.参数一2.参数二3.参数三4.参数四二、输入系统总结前言有了前面的铺垫，第三人称模板简直是手到擒来了，我们只需要注意一些初始化的变量是做什么的即可，因为UE的Character …...

编程日记 2025/6/26 9:19:47

java中关于异步转同步的一些解决方案的对比与思考。【spring mvc堵塞式】

文章目录 1、Spring MVC堵塞式编程中的技术方案a） 最简单的方案，使用 DeferredResult 代码如下，代码解读：最终控制台输出如下。用户收到的结果 b) 上点难度，使用redis监听事件，根据事件的不同返回不同的数据…...

编程日记 2025/6/23 9:16:07

【数据结构与算法】数据结构核心概念系统梳理

第一章绪论：基础概念体系 🚩算法：问题求解步骤的描述。 🚩非递归的算法效率更高。 1.1 逻辑结构 vs 存储结构维度逻辑结构存储结构（物理结构）定义数据元素之间的逻辑关系数据结构在计算机中的实现方式分类线性/树形/图/集合顺序/链式/索引/散列独立性独立于存储结构…...

编程日记 2025/6/26 10:27:30

《HTTP权威指南》第7章缓存

带着问题学习： 缓存如何提高性能如何衡量缓存的有效性缓存置于何处作用最大HTTP如何保持缓存副本的新鲜度缓存如何与其他缓存及服务器通信 web缓存是可以自动保存常见文档副本的HTTP设备。缓存优点减少冗余的数据传输，节省网络费用缓解网络瓶颈问题&…...

编程日记 2025/6/26 18:42:07

【Zephyr 系列 28】MCU 闪存文件系统详解：LittleFS + NVS + 块设备设计实战

🧠关键词：Zephyr 文件系统、LittleFS、NVS、Flash 分区、嵌入式存储、断电保护、wear leveling 📌 1. 为什么 MCU 上需要文件系统？ 在嵌入式开发中，很多开发者起初直接操作 Flash 保存参数，但随着需求增长…...

编程日记 2025/6/26 18:37:18

ICML 2025 | 时间序列(Time Series)论文总结

ICML 2025将在2025年7月13日至7月19日（周六）在温哥华会议中心举行，本文总结了ICML 2025有关时间序列(Time Series)相关文章，共计63篇。时间序列Topic：预测，分类，异常检测，生成&…...

编程日记 2025/6/23 8:41:32

理解后端开发中的中间件（以gin框架为例）

中间件(Middleware)是后端开发中的一个核心概念，它在请求(Request)和响应(Response)之间扮演着桥梁角色。以下是关于中间件的详细解释： 基本概念中间件是在请求到达最终处理程序之前或响应返回客户端之前执行的一系列函数或组件。它可以： 访…...

编程日记 2025/6/23 8:31:29

【分布式技术】Bearer Token以及MAC Token深入理解

Bearer Token以及MAC Token深入理解 **Bearer Token 详解****1. 什么是 Bearer Token？****2. Bearer Token 的构建详情****（1）生成流程****（2）Token 示例（JWT）****（3）Tok…...

编程日记 2025/6/23 8:31:28

WebRTC（七）：媒体能力协商

目的在 WebRTC 中，每个浏览器或终端支持的音视频编解码器、分辨率、码率、帧率等可能不同。媒体能力协商的目的就是： 确保双方能“听得懂”对方发的媒体流；明确谁发送、谁接收、怎么发送；保障连接的互操作性和兼容性。 P2P的基…...

编程日记 2025/6/23 8:01:00

（线性代数最小二乘问题）Normal Equation（正规方程）

Normal Equation（正规方程） 是线性代数中的一个重要概念，主要用于解决最小二乘问题（Least Squares Problem）。它通过直接求解一个线性方程组，找到线性回归模型的最优参数（如权重或系数&#xff…...

编程日记 2025/6/23 7:57:51

【机器学习】数学基础——标量

目录一、标量的定义二、标量的核心特征：无方向的纯粹量级 2.1 标量 vs 矢量直观对比三、标量的数学本质：零阶张量 3.1 张量阶数金字塔 3.2 标量的数学特性四、现实世界的标量图谱 4.1 常见标量家族 4.2 经典案例解析五、标量的运算奥秘…...

编程日记 2025/6/23 7:57:49

基于python代码的通过爬虫方式实现TK下载视频（2025年6月）

Tk的视频页面通常需要登录才能获取完整数据，但通过构造匿名游客的请求，我们可以绕过登录限制，提取视频的元信息（如标题、ID和播放地址）。核心思路如下：构造匿名Cookie：通过模拟浏览器的请求，获取Tk服务器分配的游客Cookie。解析网页：利用BeautifulSoup解析HTML，定位…...

编程日记 2025/6/26 18:33:22

Go 语言的堆糖图片爬虫

基于 Go 语言的堆糖图片爬取探索之旅在互联网的浩瀚海洋中，堆糖网以其丰富多样的高清图片、美图壁纸等内容吸引了众多用户。对于图片爱好者来说，能高效获取心仪的图片资源无疑是一件极具吸引力的事情。今天，就带大家走进一段基于 Go 语言的…...

编程日记 2025/6/23 7:34:30

python+uni-app基于微信小程序的儿童安全教育系统

文章目录具体实现截图本项目支持的技术路线源码获取详细视频演示：文章底部获取博主联系方式！！！！本系统开发思路进度安排及各阶段主要任务java类核心代码部分展示主要参考文献：源码获取/详细视频演示 ##项目…...

编程日记 2025/6/23 7:26:53

DAY 39 图像数据与显存

图像数据的格式：灰度和彩色数据模型的定义显存占用的4种地方模型参数梯度参数优化器参数数据批量所占显存神经元输出中间状态 batchisize和训练的关系 import torch import torch.nn as nn import torch.optim as optim from torch.utils.data import DataLoader ,…...

编程日记 2025/6/23 7:25:30

1、elasticsearch和kibana搭建配置见 https://blog.csdn.net/yh_zeng2/article/details/148812447?spm1001.2014.3001.5501 2、logstash 下载下载和elasticsearch版本一致的logstash，下载地址： Past Releases of Elastic Stack Software | Elastic …...

编程日记 2025/6/23 6:54:41

【ELK(Elasticsearch+Logstash+Kibana) 从零搭建实战记录：日志采集与可视化】

ELK(ElasticsearchLogstashKibana) 从零搭建实战记录：日志采集与可视化本文记录了我在搭建ELK(Elasticsearch, Logstash, Kibana)技术栈时的完整实战过程。使用Docker Compose快速搭建了ELK服务端（监控主机），并通过Filebeat实现…...

编程日记 2025/6/23 6:54:40

反无人机系统：技术利刃如何守护低空安全？

反无人机系统：技术利刃如何守护低空安全？ ——从军事防御到城市安防的全景解析一、技术体系：从“电磁软杀伤”到“激光硬摧毁”的立体防御网反无人机技术本质是一场“降维打击”：用百万级防御系统对抗千元级消费无人机。当前…...

编程日记 2025/6/23 6:51:20

第十章——8天Python从入门到精通【itheima】-102-Python基础综合案例-数据可视化（pyecharts的入门使用+数据处理）

目录 102节——pyecharts的入门使用 1.学习目标 2.pyecharts入门——基础折线图 3.pyecharts的配置对象有哪些？ 4.全局配置——set_global_opts 5.小节总结 103节——数据处理 1.学习目标 2.无法继续关于第一阶段的pyecharts的相关学习因为关于JSON数据获…...

编程日记 2025/6/23 6:51:18

Neo4j 中存储和查询数组数据的完整指南

Neo4j 中存储和查询数组数据的完整指南图形数据库 Neo4j 不仅擅长处理节点和关系，还提供了强大的数组(Array)存储和操作能力。本文将全面介绍如何在 Neo4j 中高效地使用数组，包括存储、查询、优化以及实际应用场景。数组在 Neo4j 中的基本使用数组…...

编程日记 2025/6/23 6:29:01

云原生/容器相关概念记录

文章目录网络与虚拟化技术云平台与架构容器与编排容器网络方案性能优化与工具硬件与协议网络与虚拟化技术 P4可编程网关 P4: Programming Protocol-independent Packet Processors一种基于P4语言的可编程网络设备，支持自定义数据包处理逻辑。P4可编程技术详解&am…...

编程日记 2025/6/26 13:17:02

uni-app项目实战笔记21--uniapp缓存的写入和读取

一、缓存的写入 uni.setStorageSync("storageClassList",classifyList.value) 二、缓存的读取，如果缓存不存在，则返回空数组 const storageClassList uni.getStorageSync("storageClassList") || []; 三、对读取到的数据进行转…...

编程日记 2025/6/23 6:23:29

操作系统概述

覆盖了操作系统概述、运行机制、中断、异常、操作系统的五大结构、虚拟机。借鉴：王道、我的好朋友杨某、我的笔记。一、操作系统概念概念 1.操作系统体现了封装思想由于底层硬件只接受二进制的指令不方便用户操作，所以操作系统把这些封装成简易的…...

编程日记 2025/6/23 6:22:27

探索数据的力量：Elasticsearch中指定链表字段的统计查询记录

目录一、基本的数据结构说明二、基本的统计记录 （一）统计当前索引中sellingProducts的所有类型 （二）检索指定文档中sellingProducts的数据总量 （三）检索指定文档中sellingProducts指定类型的数量统计…...

编程日记 2025/6/23 6:22:26

【Datawhale组队学习202506】YOLO-Master task03 IOU总结

系列文章目录 task01 导学课程 task02 YOLO系列发展线文章目录系列文章目录前言1 功能分块1.1 骨干网络 Backbone1.2 颈部网络 Neck1.3 头部网络 Head1.3.1 边界框回归头1.3.2 分类头 2 关键概念3 典型算法3.1 NMS3.2 IoU 总结前言 Datawhale是一个专注于AI与数据科学的开…...

编程日记 2025/6/23 6:10:51

C/C++数据结构之静态数组

概述静态数组是C/C中一种基础的数据结构，它允许用户在编译时便确定数组的大小，并分配固定数量的连续存储空间来存放相同类型的元素。静态数组的主要特点是：其大小在声明时就必须指定，且在其生命周期内保持不变。这也意味着&#…...

编程日记 2025/6/23 5:50:48

pyqt f-string

文章目录一、f-string的基本语法二、代码中的具体应用拼接效果三、f-string的核心优势四、与其他字符串格式化方式的对比五、在Qt程序中的实际作用六、扩展用法：在f-string中添加格式说明 Python的 f-string（格式化字符串字面值） 特性&…...

编程日记 2025/6/23 5:45:03

夏普 AR-2348SV 打印机信息

基本信息：这是一款黑白 A3 激光多功能数码复合机，可实现打印、复印、扫描功能。性能参数打印 / 复印速度：23 张 / 分钟。分辨率：600x600dpi，能确保文字和图像清晰。最大打印 / 复印尺寸：A3。纸张支持&…...

编程日记 2025/6/23 5:38:53

跨个体预训练与轻量化Transformer在手势识别中的应用：Bioformer

目录一、从深度学习到边缘部署，手势识别的新突破 （一）可穿戴设备边缘计算个性化医疗新可能 （二）肌电信号（sEMG）：手势识别的关键媒介 （三）挑战&#…...

编程日记 2025/6/23 4:46:21

探索常识性概念图谱：构建智能生活的知识桥梁

目录一、知识图谱背景介绍 （一）基本背景 （二）与NLP的关系 （三）常识性概念图谱的引入对比二、常识性概念图谱介绍 （一）常识性概念图谱关系图示例 （二&#xff09…...

编程日记 2025/6/24 14:44:25

人人都是音乐家？腾讯开源音乐生成大模型SongGeneration

目录前言一、SongGeneration 带来了什么？ 1.1 文本控制与风格跟随：你的想法，AI 精准实现 1.2 多轨生成：从“成品”到“半成品”的巨大飞跃 1.3 开源：推倒“高墙”，共建生态二、3B 参数如何媲美商业…...

编程日记 2025/6/25 16:50:53

一，python语法教程.内置API

一，字符串相关API string.strip([chars])方法：移除字符串开头和结尾的空白字符（如空格、制表符、换行符等），它不会修改原始字符串，而是返回一个新的处理后的字符串 chars（可选）&…...

编程日记 2025/6/25 20:02:34

python中学物理实验模拟：凸透镜成像和凹透镜成像

python中学物理实验模拟：凸透镜成像和凹透镜成像凸透镜成像凸透镜是指中间厚、边缘薄的透镜。它对光线有会聚作用，即光线通过凸透镜后会向主光轴方向偏折。成像原理基于光的折射，平行于主光轴的光线经凸透镜折射后会聚于焦点&#xff…...

编程日记 2025/6/22 21:57:24

【AGI】突破感知-决策边界：VLA-具身智能2.0

突破感知-决策边界：VLA-具身智能2.0 （一）技术架构核心（二）OpenVLA：开源先锋与性能标杆（三）应用场景：从实验室走向真实世界（四）挑战与未来方向&…...

编程日记 2025/6/26 12:38:30

2D曲线点云平滑去噪

2D曲线点云，含许多噪声，采用类似移动最小二乘的方法（MLS)分段拟合抛物线并投影至抛物线，进行点云平滑去噪。更通俗的说法是让有一定宽度的曲线点云，变成一条细曲线上的点。分两种情况进行讨论： 1&#…...

编程日记 2025/6/26 7:23:16

靶场（二十一）---小白心得靶场体会---DVR4

先看端口，看到了一个dvr的服务，老规矩只要有服务就先去看看 PORT STATE SERVICE VERSION 22/tcp open ssh Bitvise WinSSHD 8.48 (FlowSsh 8.48; protocol 2.0; non-commercial use) | ssh-hostkey: | 3072 21:25:f0:53:b4…...

编程日记 2025/6/25 1:21:13

Qt + C++ 入门2(界面的知识点)

补充前面没有说到的一点就是，qt的页面你可以用qt自带的也就是前面所说的自动生成.UI文件生成前端所谓的界面，然后往里面拖控件就可以了，这个UI界面非常的适合用于新手，以及某些软件少量的界面应用。但是有一个难点就是后期这个UI…...

编程日记 2025/6/22 20:45:58

计算机网络第九章——数据链路层《流量控制和可靠传输》

一、回顾概念前面上一章讲了数据链路层的《差错控制》，那么回顾一下差错控制和可靠传输的区别： 差错控制：发现一个帧里的【位错（比特错）】检错（奇偶校验码、CRC循环冗余校验码）：接…...

编程日记 2025/6/22 20:45:56

Zephyr 调试实用指南：日志系统、Shell CLI 与 GDB 全面解析

本文深入讲解 Zephyr 的调试利器，包括统一日志系统（logging subsystem）、内置命令行（Shell CLI）、与 GDB 调试集成方法，帮助开发者快速定位问题、分析运行时行为，实现高效开发与排障。一、日志…...

编程日记 2025/6/22 20:13:50

【知识图谱提取】【阶段总结】【LLM4KGC】LLM4KGC项目提取知识图谱推理部分

文章目录前言LLM4KGC的三个部分显卡使用效果前言之前在学习基于大模型的知识图谱提取，就找到了LLM4KGC这个项目：项目地址： https://github.com/ChristopheCruz/LLM4KGC/ 总体来说，这个项目没有什么比较高深的idea，年份也比较古老，但确实挺适合入手的。主要是绝对简…...

编程日记 2025/6/24 16:23:36

基于YOLO的智能车辆检测与记录系统

基于YOLO的智能车辆检测与记录系统摘要本报告总结了智能车辆检测系统的开发工作，主要包括车辆数据标注、YOLO模型训练及QT交互系统搭建三部分。通过使用专业标注工具完成车辆目标数据集的标注与预处理，基于YOLO模型构建车辆检测算法并优化训练流程&a…...

编程日记 2025/6/22 20:02:18

5.2 Qt Creator 使用FFmpeg库

一、目录结构 ├─3rdparty # 第三方依赖库 │ └─ffmpeg-4.4.3 # ffmpeg库 │ ├─mingw # 用MinGW64编译的库 │ │ ├─bin │ │ ├─include │ │ └─lib │ └─msvc # 用MSVC编译的库 │ ├─bin │ …...

编程日记 2025/6/24 5:02:28

C++基础练习 sort函数，用于排序函数

题目： https://acm.hdu.edu.cn/showproblem.php?pid2039 解答： #include <iostream> #include <cmath> #include <algorithm> using namespace std;double a[3]; int main(){int n;cin>>n;while(n--){cin>>a[0]>>…...

编程日记 2025/6/26 6:20:29

【Docker 08】Compose - 容器编排

🌈 一、Docker Compose 介绍 ⭐ 1. Docker Compose 是什么 Docker Compose 是由 Docker 官方提供的一个用于定义和运行多容器应用的工具，它让用户可以通过一个 YAML 文件（通常是 docker-compose.yml）来配置应用所需要的服务&…...

编程日记 2025/6/22 19:10:40

docker执行yum报错Could not resolve host: mirrorlist.centos.org

解决办法： -- 依次执行以下命令cd /etc/yum.repos.d/sed -i s|#baseurlhttp://mirror.centos.org|baseurlhttp://vault.centos.org|g /etc/yum.repos.d/CentOS-*sed -i s/mirrorlist/#mirrorlist/g /etc/yum.repos.d/CentOS-*yum update -yecho "export LC_ALL…...

编程日记 2025/6/24 21:00:38

信贷域——信贷授信业务

摘要本文详细介绍了信贷授信业务，包括其核心目标、典型流程、不同机构授信流程的对比、授信业务的其他类型以及授信模块的技术实现。信贷授信是金融机构在放贷前对客户信用额度的评估与审批流程，旨在控制风险、合理设定额度和期限、确保合规&#xff0…...

编程日记 2025/6/26 5:28:27

python的校园兼职系统

目录技术栈介绍具体实现截图系统设计研究方法：设计步骤设计流程核心代码部分展示研究方法详细视频演示试验方案论文大纲源码获取/详细视频演示技术栈介绍 Django-SpringBoot-php-Node.js-flask 本课题的研究方法和研究步骤基本合理，难度适中&#xf…...

编程日记 2025/6/24 19:53:21

深度剖析 PACK_SESSIONID 实现原理与安全突破机制

🌐 深度剖析 PACK_SESSIONID 实现原理与安全突破机制 🖼️ 1. 完整数据处理流程 #mermaid-svg-TW7jVIcz81hCZVS9 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-TW7jVIcz81hCZVS9 .error-ico…...

编程日记 2025/6/22 19:02:43

从0开始学习计算机视觉--Day02--数据驱动

上次我们在课程里了解到，亚马逊网站在当时构建了一个在那时候最大的供AI训练的数据集，为了推广这个测试，他们举办了比赛邀请了许多的参赛者，识别图片的标准是输出的类别中只要在前面五个里包含了正确答案就算识别成功。在这个过程…...

编程日记 2025/6/26 18:05:32