day13

01-2D旋转

transform:
rotate(70deg) + 顺时针 - 逆时针
先平移后旋转和先旋转后平移效果不一样，原因是轴的位置不一样
/ 先平移后旋转 /
/ transform: translate(300px) rotate(720deg); /
/ 先旋转后平移 /
transform: rotate(720deg) translate(300px);

02-旋转变形的圆点设置

transform-origin: 水平 垂直
数值
百分比 百分比参考元素的宽高
方位词 left right center top bottom center

03-缩放

transform: scale(x, y)
scaleX()
scaleY()
>1 放大
<1 缩小
=1 不变
=0 消失
<0 先翻转后缩放
如果scale()只写一个值， 意味着x，y同时缩放相同的倍数
?想要写10px的文字 ：直接把文字缩小

04-倾斜（可做平行四边形）

transform: skew(x, y) 30deg
x相对于y轴的夹角
y相对于x轴的夹角
skewX()
skewY()
如果skew()只写一个值，表示skewX()

05-2D变化总结

transform:<br />                平移<br />                translate(x,y)<br />                translateX()<br />                translateY()<br />                        数值<br />                        *百分比   百分比参考元素自身的宽高（元素水平垂直居中）<br />                translate(500px) === translateX(500px)<br />                旋转<br />                rotate() 角度  + 顺时针  - 逆时针<br />                缩放<br />                scale(x,y)  倍数 数字<br />                scaleX()<br />                scaleY()<br />                            >1 放大<br />                            =1 不变<br />                            <1 缩小<br />                            =0 消失<br />                            <0 先翻转再缩放<br />                scale(2) === scaleX(2) + scaleY(2)<br />                倾斜<br />                skew(x, y)  角度 <br />                skewX()<br />                skewY()<br />                skew(30deg) === skewX(30deg)

06-动画

定义关键帧
@keyframes 动画名字 {
from {}
to {}
}
@keyframes 动画名字 {
百分比是时间的百分比
0% {}
100% {}
}
绑定动画的属性
animation:
animation-name 绑定动画名字 必写
animation-duration 动画持续时间 s ms 必写
animation-delay 动画的延迟时间
animation-timing-function 动画的运动状态
linear
ease 默认
ease-in
ease-out
ease-in-out
贝塞尔

step-start 跳帧动画
steps() （次数，end默认/start）
step-start 帧和帧之间跳一次，跳过第一帧
（ 默认）step-end 帧和帧之间跳一次，跳过最后一帧
animation-iteration-count 动画的执行次数
1（默认） 2 3 4
infinite 无数次
animation-direction 动画的方向
normal 正向 默认
reverse 反向
alternate 先正后反 （执行次数必须大于等于2次）
alternate-reverse 先反后正 （执行次数必须大于等于2次）
animation-fill-mode 动画时间之外的状态 （延迟时间，动画结束）
none 默认
backwards 动画延迟时间停在第一帧
forwards 动画结束后停在最后一帧
both backwards+forwards
动画延迟停在第一帧，动画结束后停在最后一帧
animation-play-state 动画的执行状态
* 不能放在简写中，一般配合hover使用
running 默认 运动
paused 暂停

07- 动画简写

animation:<br />            名字 持续时间 延迟时间  运动状态 次数  方向 时间之外的状态<br />            !注意点<br />            1. 持续时间和名字必须写<br />            2. 持续时间和延迟时间有先后顺序， 持续时间在前<br />            3. 时间必须写单位 0s也要写单位<br />            4. 动画名字严格区分大小写，避免书写关键字