css3从下往上的渐变 |css3加载中动画

.gradient-linear {
background: linear-gradient(to top, #ff0000, #00ff00);
}
.gradient-radial {
background: radial-gradient(circle at 50% 0%, #ff0000, #00ff00);
}

在上面的代码中，大家使用了两种不同的渐变方式，分别是线性渐变和径向渐变。

线性渐变的语法是这样的：

linear-gradient(direction, color-stop1, color-stop2, …);

其中direction表示渐变的方向，可以从上到下、从左到右、从斜上到斜下等多种方向。在这里，大家使用了to top，表示从下往上。color-stop则表示渐变的颜色，可以设置多个颜色值。

径向渐变的语法如下：

radial-gradient(shape size at position, start-color, ..., last-color);

其中shape可以是circle或ellipse，size表示大小，position表示中心点的位置。在这里，大家使用了circle和50% 0%，表示以页面宽度的50%作为中心点，从下往上渐变。

上述代码可以在任何元素中使用，例如div、button等。需要注意的是，不同的浏览器可能对渐变的支持不尽相同，有些浏览器可能需要特定的前缀才能正常显示。