小程序CSS常用动画示例
一、前言
正如android的四大动画一样:
-
translate:移动
-
alpha:透明度变化
-
rotate:旋转
-
scale:尺寸变化
css也可以实现
二、CSS3的2D转换
2dtransform
的方法:
我们能够对元素进行移动、缩放、转动、拉长或拉伸
函数 | 描述 |
---|---|
translate(x,y) | 定义 2D 转换,沿着 X 和 Y 轴移动元素。 |
translateX(n) | 定义 2D 转换,沿着 X 轴移动元素。 |
translateY(n) | 定义 2D 转换,沿着 Y 轴移动元素。 |
scale(x,y) | 定义 2D 缩放转换,改变元素的宽度和高度。 |
scaleX(n) | 定义 2D 缩放转换,改变元素的宽度。 |
scaleY(n) | 定义 2D 缩放转换,改变元素的高度。 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 |