逐帧动画demo

在这里插入图片描述
在这里插入图片描述
用这一张图实现一个在跑的猎豹的动画


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{width: 100px;height: 100px;border: 1px solid red;background: url(./animal.png) no-repeat;animation: run 1s infinite;animation-timing-function: steps(1);/* steps(1) 是一种特定的时间函数,它表示动画将在每个关键帧之间离散地切换,就像一步一步前进一样。 *//* 动画会在每个关键帧之间立即切换,而不会经过过渡动画 */}@keyframes run{0%{background-position: 0 0;}12.5%{background-position: -100px 0;}25%{background-position: -200px 0;}37.5%{background-position: -300px 0;}50%{background-position: 0 -100px;}62.5%{background-position: -100px -100px;}75%{background-position: -200px -100px;}87.5%{background-position: -300px -100px;}100%{background-position: 0 0;}}</style>
</head>
<body><div class="container"></div>
</body>
</html>

在这里插入图片描述
steps(1) 是一种特定的时间函数,它表示动画将在每个关键帧之间离散地切换,就像一步一步前进一样。
动画会在每个关键帧之间立即切换,而不会经过过渡动画

图片和代码文件点击获取

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/191119.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RabbitMq防止消息丢失

RabbitMq防止消息丢失 消息的传递路径出现消息丢失的位置解决 消息的传递路径 消息发送方 --> MQ --> 消息消费方 出现消息丢失的位置 消息发送方: 消息传输过程中丢失MQ: MQ收到消息后,存在内存中,还未被消费就宕机了,导致数据丢失消息消费方: 消息到达消费方后, 服务…

创建maven的 java web项目

创建maven的 java web项目 创建出来的项目样子 再添加java和resources文件夹 一定要如图有文件夹下有图标才代表被IDEA识别&#xff0c;不让是不行的 没有的话在File——ProjectStructure中进行设置

【KCC@南京】KCC南京数字经济-开源行

一场数字经济与开源的视听盛宴&#xff0c;即将于11月26日&#xff0c;在南京举办。本次参与活动的有&#xff1a; 庄表伟&#xff08;开源社理事执行长、天工开物开源基金会执行副秘书长&#xff09;、林旅强Richard&#xff08;开源社联合创始人、前华为开源专家&#xff09;…

Linux SSH免密登录

目录 简介 创建Linux用户和用户组 配置LINUX静态IP 编辑IP映射 SSH免密登录配置 登录测试 简介 SSH&#xff08;Secure shell&#xff09;是可以在应用程序中提供安全通信的一个协议&#xff0c;通过SSH可以安全地进行网络数据传输&#xff0c;它的主要原理是利用非对称加密…

Web后端开发_01

Web后端开发 请求响应 SpringBoot提供了一个非常核心的Servlet 》DispatcherServlet&#xff0c;DispatcherServlet实现了servlet中规范的接口 请求响应&#xff1a; 请求&#xff08;HttpServletRequest&#xff09;&#xff1a;获取请求数据响应&#xff08;HttpServletRe…

数据结构 顺序表和链表

1.线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列 线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串.. 线性表在逻辑上是线性结构&#xff0c;也就说是连续的一条直线…

手机厂商参与“百模大战”,vivo发布蓝心大模型

在2023 vivo开发者大会上&#xff0c;vivo发布自研通用大模型矩阵——蓝心大模型&#xff0c;其中包含十亿、百亿、千亿三个参数量级的5款自研大模型&#xff0c;其中&#xff0c;10亿量级模型是主要面向端侧场景打造的专业文本大模型&#xff0c;具备本地化的文本总结、摘要等…

数据可视化模板案例:制造业提高生产力的关键

一、模板背景 在这个信息爆炸的时代&#xff0c;数据对于企业的成功至关重要。制造业作为全球经济的重要组成部分&#xff0c;如何有效利用数据提高生产效率、降低成本、优化决策&#xff0c;已成为行业关注的焦点。 二、方案思路 配⾊ - 科技蓝&#xff0c;贴合⼯业主题。 …

AI大模型低成本快速定制秘诀:RAG和向量数据库

文章目录 1. 前言2. RAG和向量数据库3. 论坛日程4. 购票方式 1. 前言 当今人工智能领域&#xff0c;最受关注的毋庸置疑是大模型。然而&#xff0c;高昂的训练成本、漫长的训练时间等都成为了制约大多数企业入局大模型的关键瓶颈。 这种背景下&#xff0c;向量数据库凭借其独特…

三国杀中的概率学问题3——王荣

前言 本文是三国杀中的概率学问题系列文章中的一篇&#xff0c;将详细讨论王荣吉占的期望摸牌数问题。并加上连续情形作为拓展。 值得说明的是&#xff0c;本文的思路受到了一篇文章的启发&#xff0c;在此特别鸣谢&#xff0c;这是文章的链接。 王荣吉占的期望摸牌数 王荣的…

深入了解JVM和垃圾回收算法

1.什么是JVM&#xff1f; JVM是Java虚拟机&#xff08;Java Virtual Machine&#xff09;的缩写&#xff0c;是Java程序运行的核心组件。JVM是一个虚拟的计算机&#xff0c;它提供了一个独立的运行环境&#xff0c;可以在不同的操作系统上运行Java程序。 2.如何判断可回收垃圾…

HarmonyOS开发(一):开发工具起步

1、DevEco Studio 工具下载地址&#xff1a;HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者 DevEco Studio基础配置 Node.jsOhpm 这两个都可以在进入IDE时在工具上选择下载安装 2、HelloWorld工程 打开DevEco,那么会进入欢迎页&#xff0c;点击Create Project---…

数字三角形模型 笔记

方格取数 走两次的最大值 f[k][i1][i2]来表示 k i1 j1 i2 j2; 每一个状态可由四种状态转换来&#xff0c;分别为 第一条路走下&#xff0c;第二条路走下 第一条路走下&#xff0c;第二条路走右 第一条路走右&#xff0c;第二条路走下 第一条路走右&#xff0c;第二条…

ChatGPT重磅升级 奢侈品VERTU推出双模型AI手机

2023年11月7日,OpenAI举办了首届开发者大会,CEO Sam Altman(山姆奥尔特曼)展示了号称“史上最强”AI的GPT-4 Turbo。它支持长达约10万汉字的输入,具备前所未有的长文本处理能力,使更复杂的互动成为可能。此外,GPT-4 Turbo还引入了跨模态API支持,可以同时处理图片、视频和声音,从…

Layer 2 真的为以太坊扩容了吗?

构建一个安全、对用户友好的去中心化网络的愿景&#xff0c;依赖于关键基础设施的发展。这个愿景由一个共享的经济框架支持&#xff0c;得到了亿万人的拥护。Layer 2 的扩展解决方案在构建这一基础和增强以太坊的能力方面起着至关重要的作用。这些项目相互协作&#xff0c;形成…

Arduino ESP8266使用AliyunIoTSDK.h连接阿里云物联网平台

文章目录 1、AliyunIoTSDK简介2、相关库安装3、阿里云创建产品&#xff0c;订阅发布4、对开源的Arduino ESP8266源代码修改5、使用阿里云点亮一个LED灯6、设备向阿里云上传温度数据7、项目源码 1、AliyunIoTSDK简介 AliyunIoTSDK是arduino的一个库&#xff0c;可以在arduino的…

基于若依的ruoyi-nbcio流程管理系统增加流程设计器支持自定义表单的选择与处理

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 因为之前不支持在流程设计器进行自定义业务表单的关联选择&#xff0c;所以这部分实现这个。 1、前端 对…

域名反查Api接口——让您轻松查询域名相关信息

在互联网发展的今天&#xff0c;域名作为网站的唯一标识符&#xff0c;已经成为了企业和个人网络营销中不可或缺的一部分。为了方便用户查询所需的域名信息&#xff0c;API接口应运而生。本文将介绍如何使用挖数据平台《域名反查Api接口——让您轻松查询域名相关信息》进行域名…

青少年编程学习 等级考试 蓝桥杯/NOC/GESP等比赛资料合集

一、博主愚见 在当今信息技术高速发展的时代&#xff0c;编程已经成为了一种必备的技能。随着社会对于科技人才的需求不断增加&#xff0c;青少年编程学习正逐渐成为一种趋势。为了更好地帮助青少年学习编程&#xff0c;提升他们的技能和素质&#xff0c;博主结合自身多年从事青…

c语言-数据结构-链表分割

链表分割实际上是给定一个值&#xff0c;遍历链表把链表中小于该值的节点与大于该值的节点分开&#xff0c;一般是将小于该值的节点放到链表的前面部分&#xff0c;大于该值的节点放在链表的后面部分。 链表分割示意图如下&#xff1a; 思路&#xff1a; 首先创建两条带哨兵位节…