CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
两种:
线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
径向渐变(radial-gradient)- 由它们的中心定义
1、CSS3 线性渐变
为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。
下面的实例演示了从左边开始的线性渐变。起点是红色,慢慢过渡到蓝色:
#grad {
height: 200px; background-image: linear-gradient(to right, red , yellow);
}
对角
下面的实例演示了从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到蓝色:
#grad {
height: 200px; background-image: linear-gradient(to bottom right, red, yellow);
}
2、CSS3 径向渐变
径向渐变由它的中心定义。
为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。
1、 颜色结点均匀分布(默认情况下)
#grad { background-image: radial-gradient(red, yellow, green); }
2、颜色结点不均匀分布
#grad { background-image: radial-gradient(red 5%, yellow 15%, green 60%); }
3、设置形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。
#grad { background-image: radial-gradient(circle, red, yellow, green); }
3、CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两项内容:
1、指定要添加效果的CSS属性
2、指定效果的持续时间。
div { transition: width 2s; }
如果未指定的期限,transition将没有任何效果,因为默认值是0。
指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时:
div:hover { width:300px; }
- 过渡属性
下表列出了所有的过渡属性:
属性 | 描述 | CSS |
简写属性,用于在一个属性中设置四个过渡属性。 | 3 | |
规定应用过渡的 CSS 属性的名称。 | 3 | |
定义过渡效果花费的时间。默认是 0。 | 3 | |
规定过渡效果的时间曲线。默认是 "ease"。匀速linear | 3 | |
规定过渡效果何时开始。默认是 0。 | 3 |
注意:transform-origin: right top 设置旋转轴心
2d转化:
- translate() 平移
- rotate() 旋转
- scale() :scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:
- skew():包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
- matrix():
matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。
3d转化
函数 | 描述 |
---|---|
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换,使用 16 个值的 4x4 矩阵。 |
translate3d(x,y,z) | 定义 3D 转化。 |
translateX(x) | 定义 3D 转化,仅使用用于 X 轴的值。 |
translateY(y) | 定义 3D 转化,仅使用用于 Y 轴的值。 |
translateZ(z) | 定义 3D 转化,仅使用用于 Z 轴的值。 |
scale3d(x,y,z) | 定义 3D 缩放转换。 |
scaleX(x) | 定义 3D 缩放转换,通过给定一个 X 轴的值。 |
scaleY(y) | 定义 3D 缩放转换,通过给定一个 Y 轴的值。 |
scaleZ(z) | 定义 3D 缩放转换,通过给定一个 Z 轴的值。 |
rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
perspective(n) | 定义 3D 转换元素的透视视图。 |
重点:动画 animation
创建动画:@keyframes 动画名{}
属性 | 描述 | CSS |
---|---|---|
@keyframes | 规定动画。 | 3 |
animation | 所有动画属性的简写属性。 | 3 |
animation-name | 规定 @keyframes 动画的名称。 | 3 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
animation-fill-mode | 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。 | 3 |
animation-delay | 规定动画何时开始。默认是 0。 | 3 |
animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |
动画设置所有的属性:
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari 与 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
6.CSS3多列布局
CSS3 可以将文本内容设计成像报纸一样的多列布局
- 、CSS3 多列属性
属性 | 描述 |
指定元素应该被分割的列数。 | |
指定如何填充列 | |
指定列与列之间的间隙 | |
所有 column-rule-* 属性的简写 | |
指定两列间边框的颜色 | |
指定两列间边框的样式 | |
指定两列间边框的厚度 | |
指定元素要跨越多少列 | |
指定列的宽度,尽量不要与column-count同时使用 | |
设置 column-width 和 column-count 的简写 |