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
transition
简写属性，用于在一个属性中设置四个过渡属性。
3
transition-property
规定应用过渡的 CSS 属性的名称。
3
transition-duration
定义过渡效果花费的时间。默认是 0。
3
transition-timing-function
规定过渡效果的时间曲线。默认是 "ease"。匀速linear
3
transition-delay
规定过渡效果何时开始。默认是 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-count
指定元素应该被分割的列数。
column-fill
指定如何填充列
column-gap
指定列与列之间的间隙
column-rule
所有 column-rule-* 属性的简写
column-rule-color
指定两列间边框的颜色
column-rule-style
指定两列间边框的样式
column-rule-width
指定两列间边框的厚度
column-span
指定元素要跨越多少列
column-width
指定列的宽度，尽量不要与column-count同时使用
columns
设置 column-width 和 column-count 的简写
————————————————
版权声明：本文为CSDN博主「paidaboluo」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/paidaboluo/article/details/121453360