HTML(30)——动画

动画

实现步骤

  1. 定义动画

@keyframes 动画名称{

  from{}

  to{}

}

@keyframes 动画名称{

  0%{}

  10%{}

  ....

  100%{}

}

    

     2.使用动画

animation:动画名称  动画花费时间;

示例:盒子的宽度从200变到400px,两个状态一般用from to的形式

  <style>.box {width: 200px;height: 100px;background-color: pink;animation: change 2s;}@keyframes change {from {width: 200px;}to {width: 400px;}}</style>
</head><body><div class="box"></div>
</body>

多个状态变化:

  <style>.box {width: 200px;height: 100px;background-color: pink;animation: change 2s;}@keyframes change {10% {width: 200px;}50% {width: 400px;}100% {width: 800px;}}</style>
</head><body><div class="box"></div>
</body>

animation属性

animation是复合属性,包括:

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态

注意:

  • 动画名称和动画时长必须赋值
  • 取值不分先后顺序
  • 如果有两个时间值,第一个时间表示动画时长,第二个时间表示延迟时间

同时也可以拆分成多个属性

属性作用取值
animation-name动画名称
animation动画时长
animation延迟时间
animation动画执行完毕时状态forwards:最后一帧状态  backwards:第一帧状态
animation速度曲线step(数字):逐帧动画
animation重复次数infinite为无限循环
animation动画执行方向alternate为反向
animation暂停动画paused为暂停,通常配合hover使用

 

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

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

相关文章

解析Xml文件并修改QDomDocument的值

背景&#xff1a; 我需要解决一个bug&#xff0c;需要我从xml中读取数据到QDomDocument&#xff0c;然后获取到我想要的目标信息&#xff0c;然后修改该信息。 ---------------------------------------------------------------------------------------------------------…

各大常用代码编辑器的快捷键集合

visualstudio2017 快捷键 多行注释 crtl / 取消多行注释crtl Q 代码跳转返回 crtl /- visualcode快捷键 代码跳转返回 crtl 左键/右键 androidstudio快捷键 代码跳转返回 crtl alt 左键/右键

VUE中ECharts提示框tooltip自动切换

目录 前言1导入插件2定义参数3 插件API 前言 使用VUE开发的数据大屏统计&#xff0c;又需要将 echarts的提示框 tooltip 实现自动切换&#xff0c;网上有个很简单的插件&#xff08;echarts-tooltip-auto-show&#xff09;&#xff0c;使用教程简单分享给大家。 自动每隔几秒切…

哦华为仓颉语言

本来我不太想说的&#xff0c;奈何有不少粉丝提问提到了这语言&#xff0c;目前的情况我不透露太多&#xff0c;看过这课程C实现一门计算机编程语言到手撸虚拟机实战的懂的自然懂。 在互联网领域几乎大部分应用软件运行在X86 LINUX上居多&#xff0c;如果你有问题可以先学习这…

多版本python环境中,让python3固定指向其中一个python可执行文件

如果你只安装一个python环境&#xff0c;那么一般可执行文件名就叫python.exe和pythonw.exe 但是如果你有多个python环境时&#xff0c;可执行文件名是需要进行修改的&#xff0c;使得在安装库和调用时能够分辨python环境&#xff0c;比如我的电脑中装有python3.10和python2.x …

Transformer模型论文解读、源码分析和项目实践

本文是ChatGPT系列的开篇之作&#xff0c;为什么吧Transformer放到这里呢&#xff0c;因为不管是chatgpt-1&#xff0c; chatgpt-2&#xff0c; chatgpt-3都是以Transformer作为底层基础来实现&#xff0c;相当于chatgpt系列的老祖先了。如果想要深入的了解清楚chatgpt的来龙去…

AcWing 4173. 线段 (贪心)

数轴上有 n 条线段&#xff0c;选取其中 k 条线段使得这 k&#x1d458; 条线段两两没有重合部分&#xff0c;问 k 最大为多少。 输入格式 第一行为一个正整数 n&#xff1b; 在接下来的 n 行中&#xff0c;每行有 2 个数 ai,bi&#xff0c;描述每条线段的左右端点坐标。 输…

BUUCTF[堆][of_by_one]

堆中of_by_one 介绍&#xff1a; 严格来说 off-by-one 漏洞是一种特殊的溢出漏洞&#xff0c;off-by-one 指程序向缓冲区中写入时&#xff0c;写入的字节数超过了这个缓冲区本身所申请的字节数并且只越界了一个字节。溢出字节为可控制任意字节 &#xff1a;通过修改大小(size…

token无感刷新方法

1.这里推荐去看这个老师的视频,我的方案都是根据他的视频来的视频地址 2.这边使用的工具是axios import axios from axios const service axios.create({baseURL: ,headers: {Authorization: token 你自己的token,},timeout: 1000 * 60, })// 拦截响应 service.interceptors…

Spring AOP源码篇四之 数据库事务

了解了Spring AOP执行过程&#xff0c;再看Spring事务源码其实非常简单。 首先从简单使用开始, 演示Spring事务使用过程 Xml配置&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第一篇 嵌入式Linux入门篇-第十六章 Linux 第一个程序 HelloWorld

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

S271系列RTU在旅游景区人流监控中的应用案例

S271系列RTU在旅游景区人流监控中的应用案例 随着全球旅游业的迅猛发展&#xff0c;旅游景区的管理者越来越关注如何利用先进的技术手段提升游客体验、优化管理效率以及确保安全。S271系列RTU作为一款先进的无线工业物联网设备&#xff0c;在旅游景区的人流监控中展现出了其独…

数据结构:顺序表+链表

数据结构&#xff1a;顺序表链表 一。顺序表&#xff1a; 首先在了解顺序表和链表之前&#xff0c;先了解一下线性表&#xff0c;**线性表&#xff08;linear list&#xff09;**是n个具有相同特征元素的有限序列 &#xff0c;在逻辑上是线性结构&#xff0c;也就是一条连续的…

自动化升级:Conda包依赖的智能更新策略

自动化升级&#xff1a;Conda包依赖的智能更新策略 引言 在科学研究和软件开发中&#xff0c;依赖管理是确保项目顺利进行的关键环节。Conda作为流行的包管理器&#xff0c;提供了强大的依赖更新功能&#xff0c;帮助用户自动化和简化依赖项的更新过程。本文将深入探讨如何在…

WPF依赖附加属性

依赖附加属性的定义 基本过程&#xff1a;声明、注册、包装 依赖附加属性必须在依赖对象&#xff0c;附加属性不一定&#xff0c;关注的是被附加的对象是否是依赖对象 快捷方式&#xff1a;propa tab 关键字&#xff1a;RegisterAttached // 方法封装 public static int …

Unity3d C#实现基于UGUI ScrollRect的轮播图效果功能(含源码)

前言 轮播功能是一种常见的页面组件&#xff0c;用于在页面中显示多张图片/素材并自动或手动进行切换&#xff0c;以提高页面的美观度和用户体验。主要的功能是&#xff1a;自动/手动切换;平滑的切换效果;导航指示器等。可惜Unity的UGUI系统里没有现成的实现该功能&#xff0c…

第五次作业(多表联合查询)

新增员工表emp和部门表dept create table dept (dept1 int ,dept_name varchar(11)) charsetutf8; create table emp (sid int ,name varchar(11),age int,worktime_start date,incoming int,dept2 int) charsetutf8; insert into dept values (101,财务), (102,销售…

Shell学习——Shell echo命令

文章目录 echo命令 echo命令 1.显示普通字符串: echo "It is a test"这里的双引号完全可以省略&#xff0c;以下命令与上面实例效果一致&#xff1a; echo It is a test2.显示转义字符 echo "\"It is a test\""结果将是: "It is a tes…

掌握MOJO命令行:参数解析的艺术

在软件开发中&#xff0c;命令行接口&#xff08;CLI&#xff09;是一种与程序交互的强大方式&#xff0c;它允许用户通过终端输入指令和参数来控制程序的行为。对于MOJO语言&#xff0c;即使它是一个假想的编程语言&#xff0c;我们也可以设想它具备解析命令行参数的能力。本文…

初识C++【命名空间】【输入输出】【缺省参数】【函数重载】

前言 C是一种通用的编程语言&#xff0c;被广泛用于开发各种应用程序&#xff0c;包括系统软件、游戏、手机应用和高性能计算等。它是C语言的扩展&#xff0c;添加了许多新特性和功能&#xff0c;并支持面向对象编程。C可以在不同的平台上编译和运行&#xff0c;具有高效性、可…