1.空间转换
01-使用transform:translate实现元素空间位移效果
02-透视 perspective(简写:pp ):又叫视距和景深,透视距离称为视距,所谓的视距就是人的眼睛到屏幕的距离,设置给使用了3d元素最近一级的父元素,取值范围400px~1200px
.默认情况下,我们人眼只能看到标签在 X轴和Y轴 上面的移动变化, Z轴 是我们的视线方向,移动效果应该是距离的远或近, 电脑屏幕是平面,默认无法观察远近效果,但是添加perspective(简写pp)属性的话,空间转换时,就会为元素添加近大远小、近实远虚的视觉效果
03-空间旋转:使用transform:rotate实现元素空间旋转效果
04-立体呈现效果:使用transform-style: preserve-3d呈现标签的立体图形
.使用perspective透视属性不能呈现立体图形,需要添加 transform-style: preserve-3d使子元素处于真正的3d空间
05-空间缩放
2.动画效果
01-动画就是实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停)
02-动画的实现步骤
使用动画注意点
1.动画的名称不能重复
2.能参与过渡的css属性,都可以参与动画
3.动画的名称不能为 running ,因为它是关键词
4.如果调用该动画的盒子样式和初始状态的样式是一样的,初始状态可以省略不写
5.动画名称和动画时长必须赋值
6. 取值不分先后顺序
7. 如果有2个时间值,第一个时间表示动画时长,第二个时间表示延迟时间
(1).定义动画
1.百分比可以实现阶段性的动画 ,(0%为起始状态,100%为结束状态)百分比定义,可以让动画拥有多个状态,百分比指的是动画执行过程中的某一点,如果调用该动画的盒子样式和初始状态的样式是一样的,初始状态可以省略不写
2.from和to定义,from代表目标初始状态,to代表目标结束状态,如果调用该动画的盒子样式和初始状态的样式是一样的,初始状态可以省略不写
(2).使用animation调用动画 :第一个参数是你定义的动画名称,第二个参数是动画时长......
03-动画的单独属性
04-同一个标签调用多个动画
05-动画精灵图案例