前端——移动Web开发2

最新推荐文章于 2024-09-03 08:51:36 发布

Bingtangbgd

最新推荐文章于 2024-09-03 08:51:36 发布

阅读量109

点赞数

分类专栏：前端文章标签：动画 css html 前端

本文链接：https://blog.csdn.net/Bingtangbgd/article/details/125950107

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

#博学谷IT学习技术支持#

1.空间转换

目标：使用 transform 属性实现元素在空间内的位移、旋转、缩放等效果。

空间：是从坐标轴角度定义的。 x 、y 和z 三条坐标轴构成了一个立体空间， z轴位置与视线方向相同。

空间转换也叫 3D转换，属性：transform

1.1.空间位移

目标：使用translate实现元素空间位移效果

语法：

transform: translate3d(x, y, z);

transform: translateX(值);

transform: translateY(值);

transform: translateZ(值);

取值（正负均可）：

像素单位数值

百分比

1.2 透视

目标：使用perspective属性实现透视效果

属性（添加给父级）：

perspective: 值;

取值：像素单位数值，数值一般在 800 – 1200 。

作用：

空间转换时，为元素添加近大远小、近实远虚的视觉效果

透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离：

1.3 空间旋转

目标：使用 rotate 实现元素空间旋转效果

语法：

transform: rotateZ(值);

transform: rotateX(值);

transform: rotateY(值);

左手法则：

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向：

拓展：

rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度

x，y，z 取值为0-1之间的数字

1.4 立体呈现

目标：使用transform-style: preserve-3d呈现立体图形

使用perspective透视属性不能呈现立体图形，perspective只增加近大远小、近实远虚的视觉效果。

实现方法：

添加 transform-style: preserve-3d; 使子元素处于真正的 3d空间

呈现立体图形步骤：

1. 盒子父元素添加transform-style: preserve-3d ；

2. 按需求设置子盒子的位置（位移或旋转）：

注意：

空间内，转换元素都有自已独立的坐标轴，互不干扰

1.5 空间缩放

目标：使用scale实现空间缩放效果

语法：

transform: scaleX(倍数);

transform: scaleY(倍数);

transform: scaleZ(倍数);

transform: scale3d(x, y, z);

2.动画

目标：使用 animation 添加动画效果

过渡：可以实现 2个状态间的变化过程，

动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）。

动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面

构成动画的最小单元：帧或动画帧

实现步骤：

1. 定义动画：

2. 使用动画：

动画属性：

目标：使用animation相关属性控制动画执行过程

注意：

动画名称和动画时长必须赋值

取值不分先后顺序

如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

动画属性：

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