CSS动画 学习

        css动画是使元素从一个样式逐渐变化为另一个样式的效果,可以改变任意多的样式任意多的次数。常见的动画效果很多,比如平移、旋转、缩放等,css实现动画的方式有以下几种:

  1. transition:实现渐变动画
  2. transform:实现转变动画
  3. animation:实现自定义动画
 transition实现渐变动画介绍:

  transition 属性用于在 CSS 中实现过渡动画,它可以让元素的样式在一定时间内平滑地从一个状态变化到另一个状态。

语法:

transition: property duration timing-function delay;
  • property:可选,指定要过渡的 CSS 属性名称,可以是单个属性,也可以是多个属性组成的列表,如果指定了多个属性,用逗号分隔。如果省略该属性值,则表示所有属性都会发生过渡。
  • duration:必需,指定过渡动画持续的时间,可以是秒(s)或毫秒(ms)。
  • timing-function:可选,指定过渡动画的时间函数,控制过渡过程中的速度变化,如 easelinearease-in-out 等。
  • delay:可选,指定过渡动画开始前的延迟时间。

完整示例:

        在这个示例中,.box 元素的宽度会在 1 秒内从原来的 100px 变为 200px,采用了 ease-out 的时间函数,延迟了 0.5 秒后开始动画效果。当鼠标悬停在 .box 元素上时,宽度会发生变化,触发渐变动画。

/* 定义元素hover时宽度渐变动画 */
.box {width: 100px;height: 100px;background-color: #3498db;transition: width 1s ease-out 0.5s;
}/* hover时改变宽度 */
.box:hover {width: 200px;
}
transform实现转变动画介绍:

        transform属性应用于2D 或 3D转换。可以实现倾斜、移动、旋转、缩放这四类动画效果。

语法:

transform: transform-function;
  • transform-function:变形函数指定了元素的具体变换效果,常见的变形函数包括:
    • translate():平移元素。
    • rotate():旋转元素。
    • scale():缩放元素。
    • skew():倾斜元素。
    • matrix():使用 2D 转换矩阵来定义变换。

每个变形函数可以接受不同的参数,以实现不同的效果。例如,translate() 函数可以接受一个或两个参数,分别表示水平和垂直方向上的偏移量。

完整示例:

        在这个示例中,.box 元素在 hover 状态下会向右平移 50px 并顺时针旋转 45 度,采用了 ease-out 的时间函数以及 1 秒的过渡时间。这样就实现了在鼠标悬停时的平移和旋转动画效

/* 定义元素hover时平移和旋转动画 */
.box {width: 100px;height: 100px;background-color: #3498db;transition: transform 1s ease-out;
}/* hover时改变平移和旋转 */
.box:hover {transform: translateX(50px) rotate(45deg);
}
animation实现自定义动画介绍:

         为了实现更灵活的动画效果,css3还提供了自定义动画的功能,通过关键帧动画@keyframes搭配 animation 属性一起使用来实现效果。

语法:

   animation 属性用于在 CSS 中实现自定义的动画效果,可以通过指定关键帧来定义动画的各个阶段。

        关键帧介绍:@keyframes 规则用于创建动画 。在 @keyframes 中规定某项 CSS 样式, 就能创建由当前样式逐渐改为新样式的动画效果 。必须定义动画的名称和时长 ,因为如果忽略时长, 则动画不会允许, 因为默认值是 0。同时请用百分比来规定变化发生的时间, 或用关键词 “from” 和 “to”(等同于 0% 和 100%) 。

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode;
  • animation-name:指定要应用的关键帧动画的名称,可以是自定义的名称或者预定义的关键字(如 none)。
  • animation-duration:指定动画持续的时间,可以是秒(s)或毫秒(ms)。
  • animation-timing-function:指定动画的时间函数,控制动画执行过程中的速度变化,如 easelinearease-in-out 等。
  • animation-delay:指定动画开始前的延迟时间,可以是秒(s)或毫秒(ms)。
  • animation-iteration-count:指定动画播放的次数,数字值,关键字 infinite
  • animation-direction:指定动画播放的方向,关键字 normalreversealternatealternate-reverse
  • animation-fill-mode:指定动画执行前后元素样式的变化,默认为none。使用forwards保留最后一帧样式,backwards保留第一帧样式,both同时保留首尾帧样式。

完整示例:

        在这个示例中,定义了一个名为 slide-in 的自定义动画,使 .box 元素在水平方向上从左侧滑入到正常位置。然后,通过 animation 属性将该动画应用于 .box 元素,设置了动画持续时间为 1 秒,时间函数为 ease-out,延迟 0.5 秒开始执行,无限循环播放,并且在每次循环中改变动画的方向。

/* 定义自定义动画 */
@keyframes slide-in {from {transform: translateX(-100%);}to {transform: translateX(0);}
}/* 应用动画 */
.box {width: 100px;height: 100px;background-color: #3498db;animation: slide-in 1s ease-out 0.5s infinite alternate;
}
部分属性值的取值:

         X-timing-function: 比如 transition-timing-function、 animation-timing-function

描述示例效果
linear匀速变化,属性值在整个过渡期间保持匀速变化。
ease默认值,慢-快-慢,开始时缓慢,然后加速,最后再缓慢。
ease-in慢-快,开始时缓慢,然后加速。
ease-out快-慢,开始时快速,然后减速。
ease-in-out慢-快-慢,开始和结束时缓慢,中间时加速。
cubic-bezier(n,n,n,n)自定义时间函数,通过贝塞尔曲线控制速度变化,可定义四个参数,分别是 P1(x1, y1)P2(x2, y2) 的两个控制点坐标。

        X-direction: 比如 transition-direction、 animation-direction

描述示例效果
normal默认值,动画按正常方向播放。
reverse动画反向播放,动画效果将与正向播放相反。
alternate动画交替播放,动画在正向和反向之间交替进行。
alternate-reverse动画反向交替播放,动画先反向播放一次,然后正向播放一次,以此类推。

 

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

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

相关文章

郑州建筑设计资质对于企业社会责任的体现有哪些考量?

员工权益:是否为员工提供公平的薪酬、健康的工作环境、职业培训和发展机会。 企业是否遵守劳动法律法规,保障员工的合法权益,如工作时间和休假、职业安全和健康。 工程质量与安全:设计项目是否遵循高标准的工程质量和安全规范&a…

抓包工具 Wireshark 的下载、安装、使用、快捷键

目录 一、什么是Wireshark?二、Wireshark下载三、Wireshark安装四、Wireshark使用4.1 基本使用4.2 过滤设置1)捕获过滤器2)显示过滤器 4.3 过滤规则1)捕获过滤器-规则语法2)显示过滤器-规则语法 4.4 常用的显示过滤器规…

94. 二叉树的中序遍历(Swift实现, 迭代)

题目描述 使用迭代方法解题 class TreeNode {var val: Intvar left: TreeNode?var right: TreeNode?init(_ val: Int) {self.val valself.left nilself.right nil} }func inorderTraversal(_ root: TreeNode?) -> [Int] {var result [Int]() // 用于存储中序遍历…

kali中安装zsteg教程

1、下载文件 git clone http://www.github.com/zed-0xff/zsteg 2、第一步需要保证虚拟机是有网络的,不然无法克隆 3、可以将网络设置成如下后重启,访问百度看看能不能访问,若可以访问,则进行下一步 4、查看源,删除源&…

elasticsearch结构化搜索

Elasticsearch的结构化搜索(Structured Search)是指对具有明确格式和结构的数据进行搜索的过程。这类数据包括日期、时间、数字、布尔值等,它们都有精确的格式,可以进行逻辑操作,比如比较数值范围或判断值的大小。结构…

Python-程序流程控制

目录 1. 分支语句 1.1 if 1.2 if-else 1.3 if-elif-else 2. 循环语句 2.1 while 2.2 for 3.跳转语句 3.1 break 3.2 continue 1. 分支语句 1.1 if aint(input("请输入成绩")) if a>100:print ("牛逼") if a<60:print("不牛逼")1.2 if-e…

css预处理是什么?作用是什么?

CSS预处理器是一种增强和扩展标准CSS的工具。它们允许开发者使用变量、嵌套规则、Mixin&#xff08;混合&#xff09;以及函数等高级功能&#xff0c;以更模块化和可维护的方式编写CSS代码。预处理器如Sass&#xff08;SCSS&#xff09;、Less和Stylus等&#xff0c;通过引入这…

期末复习5---PTA

以下是提交正确的代码&#xff1a; int max_len( char *s[], int n ) {int i;int max0;for(i1;i<n;i){if(strlen(s[i])>strlen(s[max]))maxi;}return strlen(s[max]); } 以下是我自己写的代码&#xff1a; 出现的问题是 &#xff1a;括号加的不对&#xff0c;需要细心…

同城如何异地共享文件?

在现代社会中&#xff0c;跨地区的合作变得越来越普遍&#xff0c;而这也带来了共享文件的需求。当我们身处不同的城市&#xff0c;如何高效地共享文件已经成为一项迫切的需求。本文将介绍一种名为“同城异地共享文件”的解决方案&#xff0c;帮助解决这一问题。 2. 天联组网—…

hiberfil.sys文件在Windows系统作用

hiberfil.sys文件在Windows系统中起着关键的作用&#xff0c;主要涉及到计算机的休眠功能。以下是关于hiberfil.sys的详细解释&#xff1a; 定义与功能&#xff1a; hiberfil.sys是Windows休眠功能&#xff08;Windows Hibernation&#xff09;将内存数据与会话保存至硬盘所需…

struct易错点

namespace FXTest {class Program{static void Main(string[] args){List<Ast> l1 new List<Ast>();List<IAst> l2 new List<IAst>();l1.Add(new Ast());l2.Add(new Ast());l1[0].id 2;//报错}}interface IAst{}struct Ast:IAst{public int id;} }以…

程序员应该有什么职业素养?Doge

程序员应该有什么职业素养&#xff1f; 1.关爱家人第一&#xff0c;工作第二 2.享受生活第一&#xff0c;工作第二 3.身体健康第一&#xff0c;工作第二 4.取悦自己第一&#xff0c;工作第二

二手物品交易系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;商家管理&#xff0c;用户管理&#xff0c;商品管理&#xff0c;用户咨询管理 商家账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;商品管理&#xff0c;用…

C++设计模式----桥接模式

1、介绍 桥接模式&#xff08;Bridge Pattern&#xff09;是一种结构型设计模式&#xff0c;它将抽象部分与实现部分分离&#xff0c;使得它们可以独立地变化。桥接模式的核心思想是利用组合关系代替继承关系&#xff0c;将系统划分成多个独立的、功能不同的类层次结构&#xf…

LogicFlow 学习笔记—7. LogicFlow 基础 背景 Background

背景 Background 提供可以修改画布背景的方法&#xff0c;包括背景颜色或背景图片&#xff0c;背景层位于画布的最底层。 info 创建画布时&#xff0c;通过 background 选项来设置画布的背景层样式&#xff0c;支持透传任何样式属性到背景层。默认值为 false 表示没有背景。 …

SAP Web IDE 安装使用

For training SAP Web IDE 是基于 Eclipse 内核的在线开发 IDE&#xff0c;可以使用在线的试用版本&#xff0c;但服务器在德国&#xff0c;访问的网速特别慢。也可以使用 Personal Edition&#xff0c;在本机启动和编写代码。 打开官网下载WEBIDE工具包&#xff0c;包含 Tri…

开源AGV调度系统OpenTCS中的路由器(router)详解

OpenTCS中的任务分派器router详解 1. 引言2. 路由器(router)2.1 代价计算函数&#xff08;Cost functions&#xff09;2.2 2.1 Routing groups2.1 默认的停车位置选择2.2 可选停车位置属性2.3 默认的充电位置选择2.4 即时运输订单分配 3. 默认任务分派器的配置项4. 参考资料与源…

C#——析构函数详情

析构函数 C# 中的析构函数&#xff08;也被称作“终结器”&#xff09;同样是类中的一个特殊成员函数&#xff0c;主要用于在垃圾回收器回收类实例时执行一些必要的清理操作。 析构函数: 当一个对象被释放的时候执行 C# 中的析构函数具有以下特点&#xff1a; * 析构函数只…

简单了解RS485与RS232(UART)

简单了解RS485与RS232&#xff08;UART&#xff09; 一、UART和RS232、RS485的关系1、UART2、RS232/RS4853、RS232 与 RS485 的区别与联系 二、Modbus协议说明1、什么是协议2、Modbus协议说明3、Modebus通信过程4、Modbus存储区5、Modbus协议类型6、Modbus功能码 三、stm32HC-S…

短视频压缩与编码技术在短剧APP小程序开发中的应用:技术选择与工具推荐

在短剧APP小程序开发中&#xff0c;选择合适的短视频压缩与编码技术及工具对于实现高效的视频处理至关重要。本文将探讨如何选择合适的技术和工具&#xff0c;以及推荐一些在实际开发中常用的解决方案。 技术选择的原则 平衡压缩率与视频质量&#xff1a;在选择压缩技术时&…