【css】动画:行走的人

news2024/11/16 22:01:31

 素材:

链接:

https://img1.baidu.com/it/u=3361754298,960828090&fm=253&fmt=auto&app=138&f=PNG?w=1472&h=325

 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box{
            background-image: url(https://img1.baidu.com/it/u=3361754298,960828090&fm=253&fmt=auto&app=138&f=PNG?w=1472&h=325);
            height:325px;/*平均高度*/
            width: 184px;/*平均宽度*/
            margin: 0 auto;
            animation-name: run;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-timing-function: steps(8);
           
        }
        @keyframes run{
            from{
                background-position: 0 0;
            }
            to{
                background-position: -1472px 0;
            }
                
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

主要运用animation-timing-function: steps(8)将图片分为8份,然后一份份播放。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

熊哥保佑你 数据结构复习

构造哈夫曼树&#xff1a; 先带权值最小的&#xff0c;再找有关系的&#xff08;一般是相等或相近&#xff09;&#xff0c;没关系的放一边&#xff0c;最后将有关系的和没关系的组成一个哈夫曼树。 . 最小生成树&#xff1a; 顶点数&#xff1a;n 边数&#xff1a;n-1 kru…

AI绘画:切换黑色风格,安装更棒的主题!

从Stable Diffusion 出现的第一天起&#xff0c;我就开始关注这个项目&#xff0c;后来也出过几期教程。 一直以来都是只追求功能实现&#xff0c;不管界面的问题。现在我突然想要换一个帅气的主题了…就是这么突然&#xff01; 默认的白色主题太….普通…既没有设计感啊&…

蓝桥杯专题-试题版-【FJ的字符串】【Huffuman树】【Sine之舞】【报时助手】

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 &#x1f449;关于作者 专注于Android/Unity和各种游…

代谢组学及网络药理学研究技术与实践

一、背景: 代谢组学是近年发展快速的一门学科&#xff0c;目前在医学、植物学、微生物学、毒理学、药物研发等多个领域中得到了广泛的应用。如何从复杂的代谢组学数据中提取出有价值的信息&#xff0c;筛选出潜在的生物标志物成为近年来代谢组学研究的热点和难点。网络药理学能…

supervisor-eventlistener

了解supervisor-eventlistener 本文主要介绍 supervisor Event 的功能。 supervisor 作为一个进程管理工具&#xff0c;在 3.0 版本之后&#xff0c;新增了 Event 的高级特性, 主要用于做(进程启动、退出、失败等)事件告警服务。 Event 特性是将监听的服务(listener)注册到su…

Axure教程—中继器筛查与排序

当工作中需要进行数据筛查排序操作时&#xff0c;我们可以如何使用Axure来进行相关操作呢&#xff1f;本篇文章里&#xff0c;作者利用中继器为我们展示了数据筛查与排序&#xff0c;让我们一起来看一下。 预览效果 预览地址&#xff1a;https://6q6ajh.axshare.com 功能介绍…

【AI模型部署】基于gradio和python的网页交互界面(web-ui)——简易使用方法

使用gradio&#xff0c;只需在原有的代码中增加几行,快速部署机器学习模型&#xff0c;就能自动化生成交互式web页面&#xff0c;并支持多种输入输出格式&#xff0c;比如图像分类中的图>>标签&#xff0c;超分辨率中的图>>图等。 同时还支持生成能外部网络访问的链…

最小二乘法的原理及实现

1.最小二乘法的原理及实现 笔记来源于《白话机器学习的数学》 1.1 最小二乘法的原理 预测一个变量 x x x与一个变量 y y y的关系 例如&#xff1a;广告费 x x x与点击量 y y y 用直线拟合数据 1.2 最小二乘法的实现 广告费x和点击量y&#xff0c;找到一条直线表达式&#x…

基于matlab多运动目标跟踪监测算法实现(附源码)

一、前言 此示例演示如何对来自固定摄像机的视频中的移动对象执行自动检测和基于运动的跟踪。 二、介绍 移动物体检测和基于运动的跟踪是许多计算机视觉应用的重要组成部分&#xff0c;包括活动识别、交通监控和汽车安全。基于运动的对象跟踪问题可以分为两部分&#xff1a; 检…

【KitBash3D Cargo插件】向UE中直接导入免费模型

步骤 1. 进入KitBash3D官网&#xff0c;点击右上角按钮来下载Cargo 2. 下载好后是个压缩包&#xff0c;需要进行解压 3. 解压后运行安装程序 4. 我就安装到默认的安装路径 5. 安装好后打开软件&#xff0c;注册账号&#xff08;如果点击创建账户按钮没反应就去KitBash3D官网注…

VS依赖注入(DI)构造函数自动生成局部私有变量

前言 依赖注入(DI)在开发中既是常见的也是必需的技术。它帮助我们优化了代码结构&#xff0c;使得应用更加灵活、易于扩展&#xff0c;同时也降低了各个模块之间的耦合度&#xff0c;更容易进行单元测试&#xff0c;提高了编码效率和质量。我们经常会先定义局部变量&#xff0…

OpenCL编程指南-6.2程序对象

创建和构建程序 要创建程序对象&#xff0c;可以传入OpenCL C源代码文本&#xff0c;或者利用程序二进制码来创建。由OpenCL C源代码创建程序对象是开发人员创建程序对象的一般做法。OpenCL C程序的源代码放在一个外部文件中&#xff08;例如&#xff0c;就像我们的示例代码中…

【网络知识面试】初识协议栈和套接字及连接阶段的三次握手

接上一篇&#xff1a;【网络面试必问】浏览器如何委托协议栈完成消息的收发 1. 协议栈 一直对操作系统系统的内核协议栈理解的模模糊糊&#xff0c;借着这一篇博客做一下简单梳理。 我觉得最直白的理解&#xff0c;内核协议栈就是操作系统中的一个网络控制软件&#xff0c;就是…

【git】git常用指令(项目一般使用流程示例)

文章目录 创建开发环境clone到本地查看分支创建自己的开发分支切换到开发分支 开发完成上传到仓库判断目前本地仓库的状态新内容提交到暂存区新内容更新到本地仓库新内容推到远端仓库dev1.0并入主分支1.切换到主分支2.合并3.推主分支上远端仓库 回退版本主分支更新了&#xff0…

软件产品登记测试为何如此重要?

软件产品登记测试为何如此重要&#xff1f; 软件产品登记测试报告&#xff0c;是对客户的软件产品进行功能性的检测和验证&#xff0c;确保这些功能都得以实现并能正常运行&#xff0c;可作为国家高新、增值税退税、双软评估、首套台软件的检测证明材料。 软件登记测试是“双软…

three.js中聚光灯及其属性介绍

一、聚光灯及其属性介绍 Three.js中的聚光灯&#xff08;SpotLight&#xff09;是一种用于在场景中创建聚焦光照的光源类型。它有以下属性&#xff1a; color&#xff1a;聚光灯的颜色。 intensity&#xff1a;聚光灯的强度。 distance&#xff1a;聚光灯的有效距离。 angl…

知识管理工具:在信息时代下的组织智慧管理

随着信息时代的到来&#xff0c;企业面临着前所未有的信息爆炸和快速变化的挑战。如何高效地管理和利用这些信息已经成为了企业生存和发展的关键。在这种背景下&#xff0c;知识管理工具应运而生&#xff0c;为企业提供了优秀的解决方案。 知识管理工具的定义与特点 知识管理的…

DAMA数据治理CDGA/CDGP认证考试备考经验分享

一&#xff0c;关于DAMA中国和CDGA/CDGP考试 国际数据管理协会&#xff08;DAMA国际&#xff09;是一个全球性的专业组织&#xff0c;由数据管理和相关的专业人士组成&#xff0c;非营利性机构&#xff0c;厂商中立。协会自1980年成立以来&#xff0c;一直致力于数据管理和数字…

gralylog介绍与安装

介绍 Graylog是一个开源的日志管理和分析平台&#xff0c;用于收集、存储、分析和可视化大量日志数据。它提供了一个集中化的解决方案&#xff0c;可以帮助组织有效地处理分散在各种系统和应用程序中的日志信息。 以下是Graylog的主要特点和功能&#xff1a; 日志收集&#x…

【AI工具】-MockingBird-语音合成语音克隆

简介 MockingBird&#xff1a; 英文翻译&#xff1a;反舌鸟&#xff0c;也可能来自《杀死一只知更鸟》&#xff08;英语&#xff1a;To Kill a Mockingbird&#xff09;&#xff0c;台译“梅冈城故事”&#xff0c;中国大陆译“杀死一只知更鸟”&#xff0c;直译应为“杀死一…