过渡动画
css3的特征之一,可以在不使用flash或JavaScript的情况下,当元素从一种样式变换成另一种样式时为元素添加效果。
- 过渡动画: 是从一个状态渐渐的过渡到另一个状态
- 帧动画: 通过一帧一帧的画面按照固定顺序和速度播放,如电影胶片。
transition
- 语法格式:
transition:要过渡的属性 花费时间 运动曲线 何时开始;
如果有多组属性,使用逗号隔开。 1.transition-property
:如果想要所以的属性都变化过渡,写一个all
就可以 2.transition-duration
: 花费时间,单位是秒s
比如:0.5s
这个单位是必须写的,ms
毫秒 3.transition-timing-function
:运动曲线 默认是ease
4.transition-delay
:规定过渡效果何时开始,默认是0
复制代码
2D变形(CSS3)transform
transform
是CSS3
具有颠覆性的特征之一,可以实现元素的位移、旋转、倾斜、缩放、甚至支持矩阵方式,配合过渡,可以取代大量之前只能靠Flash
才可以实现的效果。
- 位移 translate(x,y) x,y可以为负值
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动) translateX(x)仅水平方向移动(X轴移动) translateY(Y)仅垂直方向移动(Y轴移动)复制代码
复制代码
- 缩放 scale(x,y)
可以对元素进行水平和垂直方向的缩放
scale()
的取值默认值是1
,当值设置为0.01
到0.99
之间的任意值,作用是使一个元素缩小,而任何大于1.01
的值是让元素方法
复制代码
- 旋转 rotate(deg)
可以对元素进行旋转,正值为顺时针,负值为逆时针; 单位是deg
复制代码
transform-origin
可以调整元素转换变形的原点
复制代码
- 倾斜 skew(deg,deg) 可以使元素一定的进度进行倾斜,可以为负值,第二个参数不写默认为0
复制代码
3D变形(CSS3)transform
参考地址
待续:2019年3月22日18:04:58复制代码