HTML5和CSS3提高（补充）—C3渐变 2D转换 动画

1. CSS3 渐变

CSS 渐变是 CSS3 图像模块中添加的新类型的图像。CSS 渐变允许您在 两个或多个指定颜色之间显示平滑过渡。 浏览器支持两种类型的渐变：

• 线性渐变（Linear Gradients）：向下/向上/向左/向右/对角方向，用 linear-gradient() 函数定义
• 径向渐变（Radial Gradients）：由它们的中心定义，用 radial-gradient() 函数定义

语法

background: linear-gradient(direction, color1, color2, ...);

参数

• direction：指定了颜色过度的方向，不写默认为从上到下，值可以为 to bottom、to top、to right、to left、to bottom right 等。
• color1：可以有多个 color 值，指定了颜色变化的范围

2. 2D 转换

转换（transform）是 CSS3 中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。

转换可以理解为变形。

• 移动：translate
• 旋转：rotate
• 缩放：scale

2.1 移动 translate

语法

transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);

• 参数 x, y 可以是百分数，为盒子自身的宽度或高度。

重点

• 定义 2D 转换中的移动，沿着X和Y轴移动元素
• translate 最大的优点：不会影响到其他元素的位置
• translate 中的百分比单位是相对于 自身元素 的 trainslate:(50%，50%)