CSS 空间转换 动画

目录

  • 1. 空间转换
    • 1.1 视距 - perspective
    • 1.2 空间转换 - 旋转
    • 1.3 立体呈现 - transform-style
    • 1.4 空间转换 - 缩放
  • 2. 动画 - animation
    • 2.1 动画的基本用法
    • 2.1 animation 复合属性
    • 2.2 animation 拆分属性
    • 2.3 多组动画


正文开始

1. 空间转换

空间:是从坐标轴角度定义的 X、Y 和 Z 三条坐标轴构成了一个立体空间,Z 轴正方向是垂直页面向外的方向。空间转换又叫 3D转换。

属性

<style>transform: translate3d(x,y,z);transform: translateX();transform: translateY();transform: translateZ();
</style>

取值

  • 像素单位数值
  • 百分比(以盒子自身尺寸为参照)

例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: pink;margin: 100px auto;transition: all 0.5s;}div:hover {transform: translate3d(100px,200px,200px);}</style>
</head>
<body><div></div>
</body>
</html>

需要注意的是,默认情况下,Z 轴上的变化是无法生效的,因为屏幕是二维的,并不能显示 Z 轴的效果,观察 Z 轴变化的通过设置视距的方式来实现

1.1 视距 - perspective

作用:指定了观察者与 Z=0 平面的距离,为元素添加近大远小的透视效果。

属性:添加给直接父级,取值范围800-1200效果最佳

perspective: 视距;

例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {perspective: 1000px;}.son {width: 100px;height: 100px;background-color: pink;margin: 100px auto;transition: all 0.5s;}.son:hover {transform: translateZ(200px);}</style>
</head>
<body><div class="father"><div class="son"></div>    </div>
</body>
</html>

1.2 空间转换 - 旋转

作用:设置对象以指定坐标轴为轴旋转,配合视距属性可使空间转换更为真实

属性

<style>/* 绕 Z 轴转 */transform: rotateZ(转动角度);/* 绕 X 轴转 */transform: rotateX(转动角度);/* 绕 Y 轴转 */transform: rotateY(转动角度);/* 自定义旋转轴位置 */transform: rotate3d(x,y,z,角度度数)
</style>

transform:rotate3d(x,y,z,角度度数):

  • x,y,z 取值为0-1之间的数字
  • 根据 x,y,z 的值会自动生成一个新的旋转轴,指定盒子会绕着这个轴旋转指定角度

左手法则:用以根据旋转方向确定取值正负。
-左手握住旋转轴,拇指指向正值方向,其他四个手指弯曲方向为旋转正值方向:
在这里插入图片描述
例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {perspective: 1000px;width: 500px;margin: 100px auto;}img {width: 500px;transition: all 0.5s;}.father img {transform: rotateX(45deg);}</style>
</head>
<body><div class="father"><img src="img.jpg" alt=" ">    </div>
</body>
</html>

页面效果:
在这里插入图片描述

1.3 立体呈现 - transform-style

作用:设置元素的子元素是位于 3D 空间中还是平面中。

属性

<style>/* 子集处于平面中 */transform-style:flat;/* 子集处于 3D 空间 */transform-style:preserve-3d;
</style>

呈现立体图形步骤:

  1. 父级元素添加 transform-style:preserve-3d;
  2. 子集定位,使所有子集都在盒子内部
  3. 调整子盒子的位置
    请添加图片描述
    例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {/* 给父级盒子添加 3D 属性 */margin: 100px auto;width: 200px;position: relative;transform-style: preserve-3d;transition: all .5s;perspective: 1000px;}.box div {/* 子集定位 */position: absolute;top: 0;left: 0;width: 200px;height: 200px;}.back {transform: translateZ(-100px);background-color: red;}.front {transform: translateZ(100px);background-color: green;}.box:hover {transform: rotateY(60deg);}</style>
</head>
<body><div class="box"><div class="back">后面</div><div class="front">前面</div></div>
</body>
</html>

页面效果:
请添加图片描述
静态的图片很难展示出动态的效果,所以大家可以试着自己运行一下来看看动画效果。

需要注意的是,当盒子在空间中转换的时候,他的坐标轴也会随之改变。

1.4 空间转换 - 缩放

作用:在空间中缩放指定对象。

属性

<style>transform: scale3d(x,y,z);transform: scaleX();transform: scaleY();transform: scaleZ();
</style>

属性值

  • 属性值为具体数值,即缩放倍数,小于1缩小,大于1放大。

2. 动画 - animation

  • 过渡:实现两个状态间的变化过程
  • 动画:实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停)

2.1 动画的基本用法

动画实现步骤:

  1. 定义动画:有两种写法
<style>/* 只有初始和末尾状态 */@keyframes 动画名称1 {from {状态1}to {状态2}}/* 将整个动画过程分为若干部分 *//* 百分比表示占动画时长的百分比 */@keyframes 动画名称2 {0% {状态1}10% {状态2}.....100% {状态10}}
</style>
  1. 使用动画
<style>animation: 动画名称 动画花费时长(s);
</style>

例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1 {width: 100px;height: 100px;background-color: pink;animation: change1 1s;}.div2 {width: 100px;height: 100px;background-color: green;animation: change2 1s;}@keyframes change1 {from{width: 100px;}to{width: 300px;}}@keyframes change2 {0% {width: 100px;}30% {width: 300px;}50% {width: 500px;}100% {width: 200px;}}</style>
</head>
<body><div class="div1"></div><div class="div2"></div>
</body>
</html>

动画效果不便展示,请大家自行运行浏览

2.1 animation 复合属性

使用动画的属性值不止上面两种,具体为:

<style>animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
</style>
  • 动画名称和动画时长必须要写
  • 属性值不分先后顺序
  • 如果有两个时间值,第一个时间表示动画时长,第二个时间表示延迟时间

速度曲线取值

  • linear:匀速
  • steps(x):x为数字,表示把动画分为x步完成。工作中可配合精灵图实现精灵图动画

重复次数取值

  • 数字:表示重复次数
  • infinite:表示无限循环

动画方向取值

  • alternate:反向动画

执行完毕时状态取值

  • forwards:完毕时状态为动画最后状态
  • backwards:默认值,完毕时状态为初始状态

例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: green;animation: change 1s linear 2s infinite alternate;}@keyframes change {0% {width: 100px;}30% {width: 300px;}50% {width: 500px;}100% {width: 200px;}}</style>
</head>
<body><div></div>
</body>
</html>

动画效果不便展示,请大家自行运行浏览

2.2 animation 拆分属性

属性作用取值
animation-name动画名称动画名称
animation-duration动画时长时长(s)
animation-delay延迟时间时长(s)
animation-fill-mode动画执行完毕时状态forwaeds(最后一帧状态);backwards(第一帧状态)
animation-timing-function速度曲线steps():逐帧动画
animation-iteration-count重复次数infinite(无限循环)
animation-direction动画执行方向alternate(反向)
animation-play-state暂停动画paused(暂停),通常配合 :hover 使用

例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: green;animation-name: change;animation-duration: 1s;animation-iteration-count: infinite;animation-delay: 1s;animation-timing-function: linear;}div:hover {animation-play-state: paused;}@keyframes change {0% {width: 100px;}30% {width: 300px;}50% {width: 500px;}100% {width: 200px;}}</style>
</head>
<body><div></div>
</body>
</html>

动画效果不便展示,请大家自行运行浏览

2.3 多组动画

作用:设置一个标签使用多个动画

属性

<style>animation:动画1,动画2,...动画N;
</style>

例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: green;/* 使用多个动画 */animation: change 1s linear infinite,move 3s;}div:hover {animation-play-state: paused;}@keyframes move {from {transform: translate(0,0);}to {transform: translate(100px,0);}}@keyframes change {0% {width: 100px;}100% {width: 200px;}}</style>
</head>
<body><div></div>
</body>
</html>

动画效果不便展示,请大家自行运行浏览

注:若动画初始状态与盒子默认样式相同,那么初始状态可以省略。


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

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

相关文章

Paddle实现单目标检测

单目标检测 单目标检测&#xff08;Single Object Detection&#xff09;是人工智能领域中的一个重要研究方向&#xff0c;旨在通过计算机视觉技术&#xff0c;识别和定位图像中的特定目标物体。单目标检测可以应用于各种场景&#xff0c;如智能监控、自动驾驶、医疗影像分析等…

短视频矩阵系统搭建开发,ai智能剪辑系统,矩阵发布,一键管理多个账户

前言&#xff1a; 企业短视频矩阵是企业通过搭建多个短视频平台账号&#xff0c;形成一个多元化的内容传播网络。它旨在通过多平台内容的同步传播&#xff0c;实现企业品牌价值的最大化。短视频矩阵包括抖音、快手、视频号、小红书、百家号等热门短视频平台&#xff0c;其核心…

LeetCode 每日一题 数学篇 2520.统计能整除数字的位数

给你一个整数 num &#xff0c;返回 num 中能整除 num 的数位的数目。 如果满足 nums % val 0 &#xff0c;则认为整数 val 可以整除 nums 。 int countDigits(int num) {int t num, res 0;while (t) {if (num % (t % 10) 0) {res 1;}t / 10;}return res; }解题思路&…

AT_abc348_c [ABC348C] Colorful Beans 题解

题目传送门 解题思路 对于每种颜色的豆子&#xff0c;我们先找到美味度最小的那个&#xff0c;最后找出这些不同种类的豆子中美味度最大的即可。 那我们怎么找到第 i i i 种豆子中美味度最小的那个呢&#xff1f;这里给出两种思路&#xff1a; 使用桶的思想标记。对于每一…

向日葵抓住哪三个要点,帮助企业构建专业技术支持服务体系?

售后技术支持是销售行为的延续&#xff0c;在存量时代企业是否能够提供优质专业的售后技术支持服务显得尤为重要&#xff0c;它直接关系到企业产品在市场中的口碑&#xff0c;进而影响企业的发展命运。 因此&#xff0c;企业势必需要重视技术支持服务体系的搭建&#xff0c;引…

JavaScript 事件循环竟还能这样玩!

JavaScript 是一种单线程的编程语言&#xff0c;这意味着它一次只能执行一个任务。为了能够处理异步操作&#xff0c;JavaScript 使用了一种称为事件循环&#xff08;Event Loop&#xff09;的机制。 本文将深入探讨事件循环的工作原理&#xff0c;并展示如何基于这一原理实现一…

git-commit-id-plugin maven插件笔记(git commitId跟踪工具)

文章目录 maven依赖git.properties 例子 代码版本管理比较混乱&#xff0c;如何记录呢? 一种是手动记录&#xff0c;也可以实现&#xff0c;显得有点笨。 也可以通过插件。 maven依赖 <plugin><groupId>pl.project13.maven</groupId><artifactId>git…

面试题系列:Python是什么?使用Python有什么好处?你对 PEP 8 有什么理解?

###面试题系列:Python是什么?使用Python有什么好处?你对 PEP 8 有什么理解? 1、Python是什么? Python是一门动态的(dynamic)且强类型(strong)语言 延伸: 1)静态类型语言和动态类型语言的判别的标准 如果类型检查发生在编译阶段(compile time),那么是静态类型语言(s…

【数据分享】水体分布与五级水系和流域矢量数据+2000-2022年植被指数(NDVI)数据(全国/分省/分市)

1. 数据介绍 数据分为3个层次结构&#xff0c;分别为省、地级市、县。其中&#xff0c;省级水体31个&#xff08;不包含香港、台湾等&#xff09;&#xff0c; 地级市水体366个&#xff0c;县级市水体2847个。每一个文件夹中都包含该省、地级市或者县的水体矢量数据、行政边界…

数学建模 —— 灰色系统(4)

目录 什么是灰色系统&#xff1f; 一、灰色关联分析 1.1 灰色关联分析模型 1.2 灰色关联因素和关联算子集 1.2.1 灰色关联因素 1.2.2 关联算子集 1.3 灰色关联公理与灰色关联度 1.3.1 灰色关联度 1.3.2 灰色关联度计算步骤 1.4 广义关联度 1.4.1 灰色绝对关联…

一文读懂GDPR

GDPR将对人们的网络足迹、使用的APP和服务如何保护或利用这些数据产生重大影响。 下面我们将对有关GDPR人们最关心的问题进行解读。 GDPR是什么&#xff1f; 一般数据保护条例&#xff08;General Data Protection Regulation&#xff09;是一项全面的法律&#xff0c;赋予了…

风电Weibull+随机出力!利用ARMA模型随机生成风速+风速Weibull分布程序代码!

前言 随着能源问题日益突出&#xff0c;风力发电等以可再生能源为基础的发电技术越来越受到关注。建立能够正确反映实际风速特性的风速模型是研究风力发电系统控制策略以及并网运行特性的重要基础叫。由于风速的随机性和波动性&#xff0c;系统中的机械设备和电气设备以及电网…

计算机网络⑩ —— Linux系统如何收发网络包

转载于小林coding&#xff1a;https://www.xiaolincoding.com/network/1_base/how_os_deal_network_package.html 1. OSI七层模型 应用层&#xff0c;负责给应用程序提供统一的接口&#xff1b;表示层&#xff0c;负责把数据转换成兼容另一个系统能识别的格式&#xff1b;会话…

深度剖析云边对接技术:探索开放API接口的价值与意义

在当今数字化时代的浪潮中&#xff0c;云边对接与开放API接口成为了塑造行业生态的重要驱动力。随着云计算、物联网和边缘计算等技术的快速发展&#xff0c;传统产业正在迈向数字化转型的关键时刻。而在这个过程中&#xff0c;云边对接技术以及开放的应用程序接口(API)扮演着举…

处理STM32 DMA方式下的HAL_UART_ERROR_ORE错误

1. 检查并调整DMA和UART配置 确保初始化顺序&#xff1a;需要确保USART的CR寄存器UE位开关留到最后打开&#xff0c;即完成USART和DMA的所有配置初始化后再使能USART。这样可以避免初始化顺序不当导致的通信问题。配置合适的DMA缓冲区&#xff1a;确保DMA缓冲区足够大&#xf…

Facebook海外三不限 | 如何降低Facebook频繁被封的风险

本文将讨论Facebook账户被封的原因及降低封禁风险的方法&#xff0c;以维护用户的账户安全和社交乐趣。 1. 常见原因&#xff1a;账户被封通常与发布违反社区标准的内容有关&#xff0c;如仇恨言论、暴力内容、欺诈虚假信息、非法活动、骚扰、版权侵权等。此外&#xff0c;未授…

el-date-picker选择开始日期的近半年

<el-date-pickerv-model"form[val.key]":type"val.datePickerType || daterange":clearable"val.clearable && true"range-separator"~"start-placeholder"开始日期"end-placeholder"结束日期"style&q…

玩转Linux进度条

准备工作&#xff1a; 一.关于缓冲区 首先&#xff0c;咱们先来一段有意思的代码&#xff1a; #include<stdio.h> #include<unistd.h> int main() {printf("you can see me");sleep(5);} 你可以在你的本地运行一下&#xff0c;这里我告诉大家运行结果…

【SAP HANA 33】前端参数多选情况下HANA如何使用in来匹配?

场面描述: 在操作界面经常会出现某个文本框需要多选的情况,然后后台需要根据多选的值进行匹配搜索。 一般处理的情况是: 1、在Java后端动态生成SQL 2、不改变动态SQL的情况,直接当做一个正常的参数进行传递 本次方案是第二个,直接当做一个正常的字符串参数进行传递即…

【面试题-014】Mysql数据库有哪些索引类型?

文章目录 B 树和 B 树区别B 树B 树 mysql聚簇索引和非聚簇索引聚簇索引&#xff08;Clustered Index&#xff09;非聚簇索引&#xff08;Non-Clustered Index&#xff09;总结 MyISAM和InnoDB两种常见的存储引擎区别MySQL的主从同步原理如何确保主从同步的数据一致性&#xff1…