2D转换 transfrom
特点：2D转换是改变标签在二维平面的位置和形状的一种形式
1）移动
transfrom:translafe (x,y)；
特点：移动的百分百是以自身宽度的作为标准，对行内标签没有效果。
2）旋转
transfrom:rotate（deg）；
特点：旋转指的是让元素在二维平面内顺时针或者逆时针旋转，
默认旋转的中心点是元素的中心点。
3）改变旋转中心点
transfrom：origin（top left right bottom);
单位可以是像素和方位名词
4）缩放
transfrom-scale(1,1);
里面写数字不跟单位，数字是是倍数的关系，数字越大倍数越大。
缩小的范围0.1-0.9之间。
综合性写法：位移放在最前面，位移，旋转，缩放。
CSS3动画 animation
特点：动画序列，各个状态时的样式，形态
1) 定义动画
@keyfromes
动画系列：0是动画开始，100是动画结束。
2）元素使用动画
animaion-name
3）控制动画的实行
animation-duration
持续时间，单位为秒s
4）无限循环
animation-iteration-count：infinite；
5）旋转方向
animation-direction:normal 顺时针方向
alternate 反逆转方向
6）停留在结束的状态
animation-fill-mode：forwards
7）鼠标经过时动画暂停
animation-play-state：paused
8）速度曲线细节
animation-timing-function：linear 匀速
steps()步长
简写：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或动画结束的状态
配合 opacity透明度使用
|
|
收藏
淘帖
踩
