Css3梳理篇——animation(动画)

news/2024/5/3 2:50:13/文章来源:https://blog.csdn.net/weixin_61791370/article/details/137410332

   1、 animation

        name --动画名

        duration --设置动画所需时间(先)

        timing-function --动画类型(线性 linear)

        delay --延迟时间(后)

        iteration-count --动画的播放次数(无限循环 infinite / n --n次)

        direction --方向(正向/反向reverse)

        fill-mode; --动画之外的状态(forwards)


   2、animation-play-state(一般单独使用)

        动画的播放状态(播放/暂停)

        播放--running

        暂停--paused


   3、代码

.earth-con {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 500px;height: 500px;border-radius: 50%;z-index: 2;/* TODO:待补充代码,添加动画 *//* 复合属性 */animation: orbit 36.5s linear infinite;/* 单独只用 */animation-play-state: running;animation-play-state: paused;}

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

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

相关文章

华为ensp中PPP(点对点协议)中的PAP认证 原理和配置命令

作者主页:点击! ENSP专栏:点击! 创作时间:2024年4月8日14点31分 PPP协议(Point-to-Point Protocol)是点到点协议,是一种常用的串行链路层协议,用于在两个节点之间建立点…

如何保证消息不丢失?——使用rabbitmq的死信队列!

如何保证消息不丢失?——使用rabbitmq的死信队列! 1、什么是死信 在 RabbitMQ 中充当主角的就是消息,在不同场景下,消息会有不同地表现。 死信就是消息在特定场景下的一种表现形式,这些场景包括: 消息被拒绝访问&am…

全国水科技大会 免费征集《水环境治理减污降碳协同增效示范案例》

申报时间截止到2024年4月15日,请各单位抓紧申报,申报条件及申报表请联系:13718793867 围绕水环境治理减污降碳协同增效领域,以资源化、生态化和可持续化为导向,面向生态、流城、城市、农村、工业园区、电力、石化、钢…

前端mock数据——使用mockjs进行mock数据

前端mock数据——使用mockjs进行mock数据 一、安装二、mockjs的具体使用 一、安装 首选需要有nodejs环境安装mockjs:npm install mockjs 若出现像上图这样的错,则只需npm install mockjs --legacy-peer-deps即可 src下新建mock文件夹: mo…

基于Java SpringBoot+Vue的体育用品库存管理系统

博主介绍:✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&#x1f3…

LeetCode | 数组 | 二分查找 | 35.搜索插入位置【C++】

题目链接 题目描述 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 示例 1: 输入: nums [1,3,5,6], target 5 输出…

C++ 线程库(thread)与锁(mutex)

一.线程库(thread) 1.1 线程类的简单介绍 thread类文档介绍 在C11之前,涉及到多线程问题,都是和平台相关的,比如windows和linux下各有自己的接口,这使得代码的可移植性比较差。C11中最重要的特性就是对线程进行支持了&#xff…

eNSP-抓包解析TCP三次握手和四次挥手的过程

一、环境搭建 1.设备连接 并 启动所有设备 2.服务器配置 3.客服端配置 二、抓包测试 1.打开抓包软件 2.客户端获取数据 三、抓包结果

HEC-HMS水文模型

HEC-HMS是美国陆军工程兵团水文工程中心开发的一款水文模型。HMS能够模拟各种类型的降雨事件对流域水文,河道水动力以及水利设施的影响,在世界范围内得到了广泛的应用。它有着完善的前后处理软件,能有效减轻建模的负担;能够与HEC开…

如何用Vue实现实时网络状态监控:一篇让你轻松掌握前端网络连通性管理的指南

1、演示 2、网络监控目的 网络性能优化: 通过监控用户的网络状态,可以了解网络延迟、带宽利用率、丢包率等信息,从而优化网络性能,提升用户体验。 故障排除: 可以监控网络状态以及网络设备的运行情况,及时…

【现代C++】线程支持库

现代C&#xff08;C11及其之后的版本&#xff09;引入了标准的线程支持库&#xff0c;使得多线程编程变得更加简单和可移植。这个库提供了线程管理、互斥量、条件变量和其他同步原语。 1. std::thread - 基本线程 std::thread允许创建执行特定任务的线程。 #include <ios…

蓝桥杯-油漆面积

代码及其解析:(AC80%&#xff09; 思路:是把平面划成单位边长为1&#xff08;面积也是1&#xff09;的方格。每读入一个矩形&#xff0c;就把它覆盖的方格标注为已覆盖&#xff1b;对所有矩形都这样处理&#xff0c;最后统计被覆盖的方格数量即可。编码极其简单&#xff0c;但…

gradio简单搭建——关键词匹配筛选【进一步优化】

gradio简单搭建——关键词匹配筛选[进一步优化] 任务回顾新的想法&#xff1a;无效元素筛选界面搭建数据处理与生成过程交互界面展示 任务回顾 在 apply \text{apply} apply方法的使用一节中&#xff0c;简单提到了任务目标&#xff1a;通过关键词的形式&#xff0c;在文本数据…

三维点云:对原始点云数据进行体素化

文章目录 一、原始点云二、对原始点云进行体素化三、结果展示 一、原始点云 &#x1f349;原始点云为.pts文件&#xff0c;内容为x, y, z的坐标 原始点云展示 二、对原始点云进行体素化 使用open3d库实现&#xff0c;如果没有需要在命令行执行pip install open3d import o…

【STL】vector

目录 1. vector的使用 1.1 vector的定义 1.2 vector iterator 的使用 1.3 vector 空间增长问题 1.4 vector 增删查改 1.5 vector 迭代器失效问题&#xff08;重点&#xff09; 2.vector模拟实现 1. vector的使用 1.1 vector的定义 1.2 vector iterator 的使用 1.3 vecto…

【PDF-XSS攻击】Java项目-上传文件-解决PDF文件XSS攻击

文章目录 背景解决pdfbox依赖控制器代码PdfUtils工具类 验证最后源码参考 背景 上传xss-pdf造成存储型xss因为在浏览器直接预览的PDF&#xff0c;而不是预览&#xff0c;所以安全部门认为会有XSS漏洞 解决 安全部门修复建议 1、根据白名单的标签和属性对数据进行过滤&#…

linux大文件IO

在Linux中处理大文件&#xff08;通常指大小超过2GB的文件&#xff09;时&#xff0c;需要使用特定的系统调用和标志&#xff0c;以确保程序能够正确地处理大文件的读写。这主要是因为在32位系统上&#xff0c;传统的文件偏移量和文件大小使用off_t类型表示&#xff0c;它通常是…

揭秘ChatGPT预训练数据集

自大语言模型引领新一代的AI浪潮之后&#xff0c;对于Open AI发布的GPT系列LLM使用的数据集一直是行业内的谜&#xff0c;我们都知道&#xff0c;随着模型的参数量提升&#xff0c;预训练数据的使用量也同步增加&#xff0c;下面就让我们从相关论文和分析从探索GPT-X大模型的预…

地理信息系统(ArcGIS)在水文水资源、水环境中的应用

刘老师&#xff08;副教授&#xff09;&#xff1a;来自北京重点高校资深专家&#xff0c;长期从事水资源与水环境、流域污染控制与管理、非点源模拟与控制、环境信息系统开发、环境遥感与GIS应用等领域的研究&#xff0c;发表多篇Sci论文、具有资深的技术底蕴和专业背景。 1、…

wps可以打钩的框框

方法一&#xff1a; 输入2611&#xff0c;按下altx 方法二&#xff1a; R 选中后->开始->字体wingdings字体