今日学习总结,2D位移,缩放,旋转,斜切扭曲,过渡,动画

(一)2D 位移,缩放,旋转,斜切扭曲;
位移:
transform:translate(?px,?px)
不影响其他的布局,只对自己设置的起作用
缩放:
transform:scale(.5,.5) 括号里代表的是百分比。
参照点默认中心点
旋转:
transform:rotate(45deg)括号里表示度数45°也可以使用弧度rad
顺序为顺时针顺序
斜切扭曲:
transform:skew(x,y)分别表示X,Y轴不不同程度,可以用弧度也可以用度数
参照点坐标:
transform-origin(x,y)
重置原点,以这个原点来完成位移、缩放、旋转、斜切扭曲。

(二)过渡:transition:all(过渡的地方)4s(周期)function(效果类型)2s(延迟时间)
效果类型
线性过渡:linner
平滑过渡:ease
由慢到快:ease-in
由快到慢:ease-out
由慢到快再到慢:ease-in-out
《需要定义最初的大小位置,以及最后到达的位置属性;还可以加入最初到最后的类型,比如旋转等;》

(三)动画 animation:name(动画名) time(周期)function(类型) number(次数)(infinite无限)
@keyframes name { 30%{}
50%{} } 申明一个动画以及名称;里面随意定义;
name: none 不定义动画名称 <identifier>: 多个动画名称,用li来表示;
《也是需要定义最初的状态,还有动画执行中30%{},50%{},这样来表示动画执行到某个时段的状态》

原文地址:https://www.cnblogs.com/luoyao19910515/p/4643817.html