web前端--------渐变和过渡

线性渐变，是指颜色沿一条直线进行渐变，例如从上到下、从左到右。

当然，CSS中也支持使用角度来设置渐变的方向，角度单位为deg。

0deg，为12点钟方向，表示从下到上渐变。

90deg，为3点钟方向，表示从左到右渐变。

径向渐变与线性渐变类型的不同之处，在于它是由中心向外延伸的渐变。

我们可以指定中心点的位置，还可以设置渐变的形状。

--------------------在CSS中，设置径向渐变需要用radial-gradient()函数

radial-gradient()函数的形状参数，用于定义渐变的形状。可选值有circle(圆形)、ellipse(椭圆)。

------------------定位渐变中心，使用at加百分比，来自定义渐变的中心位置。

渐变中心需要定义横纵坐标，格式为at 横坐标 纵坐标。

-----------------渐变形状的另一种为椭圆，是默认形状。

也就是说，我们不设置形状参数和半径就能展示出椭圆。

当然，我们设置形状参数为ellipse时，也可以展示出椭圆。

*******************过渡**********************

过渡，可以将元素从一种样式在指定时间内平滑的过渡到另一种样式，类似于简单的动画。

因为过渡效果，通常在我们将鼠标放在元素上时发生，所以在这里，我们需要结合状态伪类:hover来实现这种平滑的过渡。

~~~~~~~~~~~~~~~~~~~~transition-property属性，用于指定元素中参与过渡的属性名称。

示例中，transition-property属性的值为width，表示元素的宽度属性width，会参与过渡。

~~~~~~~~~~~~~~~~~~transition-duration属性，用于指定过渡要花费的时间。

其属性值以秒(s)或毫秒(ms)为单位。

~~~~~~~~~~~~~~~transition-timing-function属性，表示过渡效果的速度曲线。

它的属性值默认为ease，表示过渡效果以缓慢地开始，然后变快，最后缓慢地结束。

~~~~~~~~~~~~~~~~transition-delay属性，用于规定过渡效果开始之前需要等待的时间。

它的属性值以秒(s)或毫秒(ms)为单位，这个值表示过渡效果什么时候开始。

示例中，属性值为0s，表示无需等待，立即开始过渡。

~~~~~~~~~~~~~~~~~CSS中的transition属性，可以直接设置四个过渡属性的效果。

其属性值，依次按照待过渡属性、过渡持续时间、速度曲线、等待时间的顺序书写，之间用空格隔开。

~~~~~~~~~~~~~~~所有过渡属性

有时候，我们想给所有属性设置过渡效果，此时可以使用all来表示过渡的所有属性。

示例中，元素的宽度和高度属性都会产生过渡效果。

~~~~~~~~~~~~~示例中，我们给所有属性设置过渡效果，在:hover中添加旋转180度的转换。