空间转换
空间位移
-
transform: translateX()
-
transform: translateY()
-
transform: translateZ()
-
transform: translate3d(x, y, z)
透视、景深、视距
-
perspective
- 600px - 1200px
-
目的：给父元素添加 实现一个近大远小的效果
空间旋转
-
围绕x轴旋转
- transform: rotateX()
-
围绕y轴旋转
- transform: rotateY()
-
围绕z轴旋转
- transform: rotateY()
-
左手定则
- 左手的大拇指指向轴线的正值方向，四指弯曲的方向即为正值旋转的方向
-
了解
-
自定义轴旋转
- transform: rotate3d(x,y,z,旋转的角度)
-
同时在两条轴线上旋转
-
transform: rotateX() rotateY();
-
3d导航的时候 给我们提供了一个上帝视角
-
-
3d呈现
-
transform-style
-
flat
-
平面
-
默认值
-
-
preserve-3d
-
开启3d环境
-
较为常用
-
-
动画
-
@keyframes 动画名称 { from {} to {} }
-
from多省略不写
-
@keyframes 动画名称 { 0% {} 50% {} 100% {} }
调用动画
-
animation: 动画名称 动画执行时间 次数 速度曲线 延迟时间 反向播放 停留结束位置
-
速度曲线
-
ease
-
默认
-
较为少用
-
-
linear
- 匀速
-
steps()
-
逐帧动画
-
括号中加数字 数字与图片个数一致也可能是n+上留白出想要放的图片的个数
-
属性时容易遗漏s 该属性为复数所以要加s
-
-
-
次数
-
infinite
-
无限次
-
实现轮播不终止
-
该属性单词需记忆 因为编译器不会有提示
-
-
-
反向播放
-
alternate
-
用于动画往返操作的效果
-
-
停留结束位置
- forwards
-
暂停动画
-
animation-play-state: paused;
-
tips 类名可以设置run不能设置running，因为running是animation-play-state的默认值，会产生隐含的bug
-
-
动画延迟
- animation-delay
案例分析：
布局分析：1结构：一张背景图片 三片云彩 四个箭头图标 中间一张文字图片
2需要实现的功能：云彩左右位移 箭头上下移动且要有层次感 文字图片缩小放大
3涉及知识点：定位position 动画 animation （delay延迟以及slace缩放还有translate位移）
实现步骤：1body中书写结构 云彩组 箭头组 文字部分 图片使用img标签插入即可
2 head中通配符设置m0p0，body插入图片 设置颜色 居中 不平铺；
设置云彩组定位 利用margin设置距离（translate也可以但是因为后续效果会产生冲突所以不用）
定义动画 位移translate，引入动画效果：设置 为1s infinite alternate
设置箭头组 同样是位移 多了一个animation-delay
设置标题部分 用动画transform: scale实现缩放效果
布局分析：1结构：一个盒子 中间轮播图片
2需要实现的功能：图片轮播 鼠标悬停时图片静止
3涉及知识点：img插入图片， 鼠标悬停：hover ，动画 animation ， transform: translate实现位移
实现步骤：结构 一个大盒子里面ul包裹li li包裹img ul只能有一个 ，插入7张图片 ，由于其张图片轮播完会出现空白所以需要再将前三张图片再加多一个
样式 1设置通配符 2去除li默认的圆点lsn 3设置盒子宽度居中4浮动清除边框5增加ul宽度单张图片的宽度✖10 6li标签设置浮动7鼠标悬停设置停止：animation-play-state: paused;
