CSS3新增的语法(三)【2D,3D,过渡,动画】

CSS3新增的语法(三)【2D,3D,过渡,动画】

    • 10.2D变换
      • 10.1. 2D位移
      • 10.2. 2D缩放
      • 10.3. 2D旋转
      • 10.4. 2D扭曲(了解)
      • 10.5. 多重变换
      • 10.6. 变换原点
    • 11. 3D变换
      • 11.1. 开启3D空间
      • 11.2. 设置景深
      • 11.3. 透视点位置
      • 11.4. 3D 位移
      • 11.5. 3D 旋转
      • 11.6. 3D 缩放
      • 11.7. 多重变换
      • 11.8. 背部可见性
    • 12. 过渡
      • 12.1. transition-property
      • 12.2. transition-duration
      • 12.3. transition-delay
      • 12.4. transition-timing-function
      • 12.5. transition 复合属性
    • 13. 动画
      • 13.1. 什么是帧
      • 13.2. 什么是关键帧
      • 13.3. 动画的基本使用
      • 13.4. 动画的其他属性
      • 13.5. 动画复合属性

10.2D变换

10.1. 2D位移

2D 位移可以改变元素的位置,具体使用方式如下:

  1. 先给元素添加 转换属性 transform;
  2. 编写 transform 的具体值,相关可选值如下:
含义
translateX设置水平方向位移,需指定长度值;若指定的是百分比,是参考自身宽度的百分比。
translateY设置垂直方向位移,需指定长度值;若指定的是百分比,是参考自身高度的百分比。
translate一个值代表水平方向,两个值代表:水平和垂直方向。
  1. 注意点:
  1. 位移与相对定位很相似,都不脱离文档流,不会影响到其它元素。
  2. 与相对定位的区别:相对定位的百分比值,参考的是其父元素;位移的百分比值,参考的是 其自身。
  3. 浏览器针对位移有优化,与定位相比,浏览器处理位移的效率更高。
  4. transform 可以链式编写,例如:
    transform: translateX(30px) translateY(40px);
  5. 位移对行内元素无效。
  6. 位移配合定位,可实现元素水平垂直居中
.box {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

10.2. 2D缩放

2D 缩放是指:让元素放大或缩小,具体使用方式如下:

  1. 先给元素添加 转换属性 transform;
  2. 编写 transform 的具体值,相关可选值如下:
含义
scaleX设置水平方向的缩放比例,值为一个数字, 1 表示不缩放,大于 1 放大,小于 1 缩小。
scaleY设置垂直方向的缩放比例,值为一个数字, 1 表示不缩放,大于 1 放大,小于 1 缩小。
scale同时设置水平方向、垂直方向的缩放比例,一个值代表同时设置水平和垂直缩放;两个值分别代表:水平缩放、垂直缩放。
  1. 注意点:
  1. scale 的值,是支持写负数的,但几乎不用,因为容易让人产生误解。
  2. 借助缩放,可实现小于 12px 的文字。

10.3. 2D旋转

2D 旋转是指:让元素在二维平面内,顺时针旋转或逆时针旋转,具体使用方式如下:

  1. 先给元素添加 转换属性 transform;
    2.编写 transform 的具体值,相关可选值如下:
含义
rotate设置旋转角度,需指定一个角度值( deg ),正值顺时针,负值逆时针。

注意: rotateZ(20deg) 相当于 rotate(20deg) ,当然到了 3D 变换的时候,还能写: rotate(x,x,x)

10.4. 2D扭曲(了解)

2D 扭曲是指:让元素在二维平面内被“拉扯”,进而“走形”,实际开发几乎不用,了解即可,具体使用方
式如下:

  1. 先给元素添加 转换属性 transform;
  2. 编写 transform 的具体值,相关可选值如下:
    在这里插入图片描述

10.5. 多重变换

多个变换,可以同时使用一个 transform 来编写。
transform: translate(-50%, -50%) rotate(45deg);

注意点:多重变换时,建议最后旋转。(旋转后的坐标原点会变)

10.6. 变换原点

  • 元素变换时,默认的原点是元素的中心,使用 transform-origin 可以设置变换的原点。
  • 修改变换原点对位移没有影响, 对旋转和缩放会产生影响。
  • 如果提供两个值,第一个用于横坐标,第二个用于纵坐标。
  • 如果只提供一个,若是像素值,表示横坐标,纵坐标取 50% ;若是关键词,则另一个坐标取 50%
  1. transform-origin: 50% 50% , 变换原点在元素的中心位置,百分比是相对于自 身。—— 默认值
  2. transform-origin: left top ,变换原点在元素的左上角 。
  3. transform-origin: 50px 50px , 变换原点距离元素左上角 50px 50px 的位置。
  4. transform-origin: 0 ,只写一个值的时候,第二个值默认为 50% 。

11. 3D变换

11.1. 开启3D空间

重要原则:元素进行 3D 变换的首要操作:父元素必须开启 3D 空间!

  • 使用 transform-style 开启 3D 空间,可选值如下:

    • flat : 让子元素位于此元素的二维平面内( 2D 空间)—— 默认值
    • preserve-3d : 让子元素位于此元素的三维空间内( 3D 空间)

11.2. 设置景深

何为景深?—— 指定观察者与 z=0 平面的距离,能让发生 3D 变换的元素,产生透视效果,看来更加立体。

使用 perspective 设置景深,可选值如下:

  • none : 不指定透视 ——(默认值)
  • 长度值 : 指定观察者距离 z=0 平面的距离,不允许负值。

注意: perspective 设置给发生 3D 变换元素的父元素!

11.3. 透视点位置

所谓透视点位置,就是观察者位置;默认的透视点在元素的中心。

使用 perspective-origin 设置观察者位置(透视点的位置),例如:
/* 相对坐标轴往右偏移400px, 往下偏移300px(相当于人蹲下300像素,然后向右移动400像素看元素)*/
perspective-origin: 400px 300px;
注意:通常情况下,我们不需要调整透视点位置。

11.4. 3D 位移

3D 位移是在 2D 位移的基础上,可以让元素沿 z 轴位移,具体使用方式如下:

  1. 先给元素添加 转换属性 transform;
  2. 编写 transform 的具体值, 3D 相关可选值如下:
含义
translateZ设置 z 轴位移,需指定长度值,正值向屏幕外,负值向屏幕里,且不能写百分比。
translate3d第1个参数对应 x 轴,第2个参数对应 y 轴,第3个参数对应 z 轴,且均不能省略。

11.5. 3D 旋转

3D 旋转是在 2D 旋转的基础上,可以让元素沿 x 轴和 y 轴旋转,具体使用方式如下:

  1. 先给元素添加 转换属性 transform;
  2. 编写 transform 的具体值, 3D 相关可选值如下:
    在这里插入图片描述

11.6. 3D 缩放

3D 缩放是在 2D 缩放的基础上,可以让元素沿 z 轴缩放,具体使用方式如下:

  1. 先给元素添加 转换属性 transform;
  2. 编写 transform 的具体值, 3D 相关可选值如下:
含义
scaleZ设置 z 轴方向的缩放比例,值为一个数字, 1 表示不缩放,大于 1 放大,小于 1 缩小。(会影响景深)
scale3d第1个参数对应 x 轴,第2个参数对应 y 轴,第3个参数对应 z 轴,参数不允许省略。

11.7. 多重变换

多个变换,可以同时使用一个 transform 来编写。
transform: translateZ(100px) scaleZ(3) rotateY(40deg);

注意点:多重变换时,建议最后旋转。

11.8. 背部可见性

使用 backface-visibility 指定元素背面,在面向用户时是否可见,常用值如下:

  • visible : 指定元素背面可见,允许显示正面的镜像。—— 默认值
  • hidden : 指定元素背面不可见

注意: backface-visibility 需要加在发生 3D 变换元素的自身上。

12. 过渡

过渡可以在不使用 Flash 动画,不使用 JavaScript 的情况下,让元素从一种样式,平滑过渡为另一 种样式。

12.1. transition-property

  • 作用:定义哪个属性需要过渡,只有在该属性中定义的属性(比如宽、高、颜色等)才会以有过渡 效果。
  • 常用值:
    1. none :不过渡任何属性。
    2. all :过渡所有能过渡的属性。
    3. 具体某个属性名 ,例如: width 、 heigth ,若有多个以逗号分隔。

注意:

  1. 不是所有的属性都能过渡,值为数字,或者值能转为数字的属性,都支持过渡,否则不支持 过渡。
  2. 常见的支持过渡的属性有:颜色、长度值、百分比、 z-index 、 opacity 、 2D 变换属 性、 3D 变换属性、阴影。

12.2. transition-duration

  • 作用:设置过渡的持续时间,即:一个状态过渡到另外一个状态耗时多久。
  • 常用值:
    1. 0 :没有任何过渡时间 —— 默认值。
    2. s 或 ms :秒或毫秒。
    3. 列表 :
      • 如果想让所有属性都持续一个时间,那就写一个值。
      • 如果想让每个属性持续不同的时间那就写一个时间的列表。
        transition-duration:1s,2s;(两个过渡方式时)

12.3. transition-delay

  • 作用:指定开始过渡的延迟时间,单位: s 或 ms

12.4. transition-timing-function

  • 作用:设置过渡的类型
  • 常用值:
    1. ease : 平滑过渡 —— 默认值
    2. linear : 线性过渡
    3. ease-in : 慢 → 快
    4. ease-out : 快 → 慢
    5. ease-in-out : 慢 → 快 → 慢
    6. step-start : 等同于 steps(1, start)
    7. step-end : 等同于 steps(1, end)
    8. steps( integer,?) : 接受两个参数的步进函数。第一个参数必须为正整数,指定函数的
    步数。第二个参数取值可以是 start 或 end ,指定每一步的值发生变化的时间点。第二个
    参数默认值为 end 。
    9. cubic-bezie ( number, number, number, number): 特定的贝塞尔曲线类型。
    ------ 在线制作贝赛尔曲线:https://cubic-bezier.com

12.5. transition 复合属性

如果设置了一个时间,表示 duration ;
如果设置了两个时间,第一是 duration ,第二个是 delay ;
其他值没有顺序要求。

transition:1s 1s linear all;

13. 动画

13.1. 什么是帧

一段动画,就是一段时间内连续播放 n 个画面。每一张画面,我们管它叫做“帧”。一定时间内连续快速播放若干个帧,就成了人眼中所看到的动画。同样时间内,播放的帧数越多,画面看起来越流 畅。

13.2. 什么是关键帧

关键帧指的是,在构成一段动画的若干帧中,起到决定性作用的 2-3 帧。
在这里插入图片描述

13.3. 动画的基本使用

  • 第一步:定义关键帧(定义动画)
    1. 简单方式定义:

      	/*写法一*/
      	@keyframes 动画名 {
      		from {
      			/*property1:value1*/
      			/*property2:value2*/
      		}
      		to {
      			/*property1:value1*/
      		}
      	}
      
      
    2. 完整方式定义:

      @keyframes testKey {
      	0% {
      		/*property1:value1*/
      	}
      	20% {
      		/*property1:value1*/
      	}
      	40% {
      		/*property1:value1*/
      	}
      	60% {
      		/*property1:value1*/
      	}
      	80% {
      		/*property1:value1*/
      	}
      	100% {
      		/*property1:value1*/
      	}
      }
      
      
  • 第二步:给元素应用动画,用到的属性如下:
    1. animation-name :给元素指定具体的动画(具体的关键帧)
    2. animation-duration :设置动画所需时间
    3. animation-delay :设置动画延迟
      	box {
      		/* 指定动画 */
      		animation-name: testKey;
      		/* 设置动画所需时间 */
      		animation-duration: 5s;
      		/* 设置动画延迟 */
      		animation-delay: 0.5s;
      	}
      

13.4. 动画的其他属性

  • animation-timing-function ,设置动画的类型,常用值如下:

    1. ease : 平滑动画 —— 默认值
    2. linear : 线性过渡
    3. ease-in : 慢 → 快
    4. ease-out : 快 → 慢
    5. ease-in-out : 慢 → 快 → 慢
    6. step-start : 等同于 steps(1, start)
    7. step-end : 等同于 steps(1, end)
    8. steps( integer,?) : 接受两个参数的步进函数。第一个参数必须为正整数,指定
      函数的步数。第二个参数取值可以是 start 或 end ,指定每一步的值发生变化的时间
      点。第二个参数默认值为 end 。
    9. cubic-bezie ( number, number, number, number): 特定的贝塞尔曲线类型。
  • animation-iteration-count ,指定动画的播放次数,常用值如下:

    1. number :动画循环次数
    2. infinite : 无限循环
  • animation-direction ,指定动画方向,常用值如下:

    1. normal : 正常方向 (默认)
    2. reverse : 反方向运行
    3. alternate : 动画先正常运行再反方向运行,并持续交替运行
    4. alternate-reverse : 动画先反运行再正方向运行,并持续交替运行
  • animation-fill-mode ,设置动画之外的状态

    1. forwards : 设置对象状态为动画结束时的状态
    2. backwards : 设置对象状态为动画开始时的状态
  • animation-play-state ,设置动画的播放状态,常用值如下:

    1. running : 运动 (默认)
    2. paused : 暂停

13.5. 动画复合属性

只设置一个时间表示 duration ,设置两个时间分别是: duration 和 delay ,其他属性没有数量和 顺序要求。

.inner {
		animation: atguigu 3s 0.5s linear 2 alternate-reverse forwards;
}

备注: animation-play-state 一般单独使用。

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

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

相关文章

R语言中的常用数据结构

目录 R对象的基本类型 R对象的属性 R的数据结构 向量 矩阵 数组 列表 因子 缺失值NA 数据框 R的数据结构总结 R语言可以进行探索性数据分析,统计推断,回归分析,机器学习,数据产品开发 R对象的基本类型 R语言对象有五…

使用OMP复原一维信号(MATLAB)

参考文献 https://github.com/aresmiki/CS-Recovery-Algorithms/tree/master MATLAB代码 %% 含有噪声 % minimize ||x||_1 % subject to: (||Ax-y||_2)^2<eps; % minimize : (||Ax-y||_2)^2lambda*||x||_1 % y传输中可能含噪 yyw % %% clc;clearvars; close all; %% 1.构…

js类型转换

类型转换只有这四种&#xff0c;例如如果要对象转数字&#xff0c;那么就需要先把对象转成原始类型&#xff0c;再从原始类型转到数字。 空数组转原始类型是一个空字符串。空对象转原始类型是[object Object]。 let a {} console.log(a);// NaN //等价于 a->原始 然后原始…

线控悬架系统分析

线控悬架系统分析 附赠自动驾驶学习资料和量产经验&#xff1a;链接 1 线控悬架系统系统发展现状 • 车辆驾乘过程中&#xff0c;操控性和舒适性是两个重要的评价指标&#xff0c;两者很难兼顾&#xff1b; • 线控悬架就是根据路况实际情况自动调节悬架的高度、刚度、阻尼实…

OpenHarmony实战:小型系统移植概述

驱动主要包含两部分&#xff0c;平台驱动和器件驱动。平台驱动主要包括通常在SOC内的GPIO、I2C、SPI等&#xff1b;器件驱动则主要包含通常在SOC外的器件&#xff0c;如 LCD、TP、WLAN等 图1 OpenHarmony 驱动分类 HDF驱动被设计为可以跨OS使用的驱动程序&#xff0c;HDF驱动框…

【JAVA】基础学习03变量和关键字

文章目录 JAVA变量与运算符1.关键字&#xff08;keyword&#xff09;2.标识符( identifier)2.1命名规则2.2命名规范2.3变量作用和类型2.3.1整型变量2.3.2补充&#xff1a;计算机存储单位2.3.3浮点类型&#xff1a;float、double2.3.4 关于浮点型精度的说明2.3.5 字符类型&#…

Linux:ip和ip协议的初步认识

文章目录 ip协议基本认识ip协议的报头网段划分ip的类型划分 ip协议基本认识 前面对于TCP的内容已经基本结束了&#xff0c;那么这也就意味着在传输层也已经结束了&#xff0c;那么下一步要进入的是的是网络层&#xff0c;网络层中也有很多种协议&#xff0c;这里主要进行解析的…

【yolov5小技巧(1)】---可视化并统计目标检测中的TP、FP、FN

文章目录 &#x1f680;&#x1f680;&#x1f680;前言一、1️⃣相关名词解释二、2️⃣论文中案例三、3️⃣新建相关文件夹四、4️⃣detect.py推理五、5️⃣开始可视化六、6️⃣可视化结果分析 &#x1f440;&#x1f389;&#x1f4dc;系列文章目录 嘻嘻 暂时还没有~~~~ &a…

OpenHarmony实战:小型系统平台驱动移植

在这一步&#xff0c;我们会在源码目录//device/vendor_name/soc_name/drivers目录下创建平台驱动。 建议的目录结构&#xff1a; device ├── vendor_name │ ├── drivers │ │ │ ├── common │ │ │ ├── Kconfig # 厂商驱动内核菜单入口 │ …

线上线下陪玩,APP小程序H5。源码交付,支持二开!

线下陪玩的风险与管理方式 1、陪玩者的身心健康风险 线下陪玩的模式决定了陪玩者需要与不同的需求方见面&#xff0c;并满足他们的陪伴和娱乐需求。这种工作方式可能会给陪玩者带来身心上的压力和负担。因为陪玩者需要面对各种需求方的要求&#xff0c;有时还需要虚拟出一种完…

mac/win使用pyinstaller打包app/exe文件,活着执行脚本,双击运行

&#x1f338; 踩坑记录 python环境最好使用虚拟环境&#xff0c;推荐使用conda管理&#xff0c;并且若本地有python环境&#xff0c;不要使用和 本地环境版本 相同的虚拟环境 这里踩坑较多&#xff0c;已经记不清楚注意点 虚拟环境python版本不要和本地环境一样 mac/win只能…

day03-Docker

1.初识 Docker 1.1.什么是 Docker 1.1.1.应用部署的环境问题 大型项目组件较多&#xff0c;运行环境也较为复杂&#xff0c;部署时会碰到一些问题&#xff1a; 依赖关系复杂&#xff0c;容易出现兼容性问题开发、测试、生产环境有差异 例如一个项目中&#xff0c;部署时需要依…

Git的简单入门使用

文章目录 拷贝项目的步骤创建项目的步骤提交项目或项目文件的步骤恢复项目文件的步骤 拷贝项目的步骤 找到需要用来存放项目的文件夹&#xff1b;在文件夹页面空白处右键点击&#xff0c;然后再菜单中选择“Open Git Bash here”。在Github上找到需要进行拷贝的项目&#xff0…

算法复习:链表

链表定义 struct ListNode { int val;ListNode *next;ListNode(int x) : val(x), next(nullptr) {} }; 链表的遍历&#xff1a;ListNode phead; while(p!null) pp.next; 找到链表的尾结点&#xff1a;phead; while(p.next!null)pp.next; 链表节点的个数&#xff1a; phead…

基于SSM的网络视频播放器

目录 背景 技术简介 系统简介 界面预览 背景 互联网的迅猛发展彻底转变了全球各类组织的管理策略。自20世纪90年代起&#xff0c;中国政府和企业便开始探索利用网络系统进行信息管理。然而&#xff0c;早期的网络覆盖不广泛、用户接受度不高、相关法律法规不完善以及技术开…

备战蓝桥杯---DP刷题2

1.树形DP&#xff1a; 即问那几个点在树的直径上&#xff0c;类似ROAD那题&#xff0c;我们先求一下每一个子树根的子树的最大值与次大值用d1,d2表示&#xff0c;直径就是d1d2的最大值&#xff0c;那么我们如何判断是否在最大路径上&#xff0c;其实就是看一下从某一点出发的所…

YUNBEE云贝-技术分享:PostgreSQL分区表

引言 PostgreSQL作为一款高度可扩展的企业级关系型数据库管理系统&#xff0c;其内置的分区表功能在处理大规模数据场景中扮演着重要角色。本文将深入探讨PostgreSQL分区表的实现逻辑、详细实验过程&#xff0c;并辅以分区表相关的视图查询、分区表维护及优化案例&#xff0c;…

详解网络攻击的发生原因、类型及如何防范

网络攻击是访问计算机系统或者大小&#xff0c;修改或窃取数据的未经授权的企图。网络破坏分子可以使用多种攻击媒介&#xff0c;推出包括网络攻击的恶意软件&#xff0c;网络钓鱼&#xff0c;勒索&#xff0c;以及人在这方面的中间人攻击。固有风险和残余风险使这些攻击中的每…

LLM:检索增强生成(RAG)

1 Embedding技术 简单地说&#xff0c;嵌入(Embedding)思想可以视为一种尝试通过用向量来表示所有东西的“本质”的方法&#xff0c;其特性是“相近的事物”由相近的数表示。 1.1 文本向量(Text Embedding) 在GPT中&#xff0c;文本嵌入(Text Embedding)是通过将输入文本中的每…

Web Animations API 动画

Element.animate() dom.animate动画可以避免污染dom原有的css动画 参考资料 Element.animate() - Web API 接口参考 | MDN Element: getAnimations() method - Web APIs | MDN .tunnel{width:200px;height:200px;background-color:#38f;}<div class"tunnel" …