day8 CSS3渐变gradients+CSS3过渡transition

CSS3过渡(transitions)

属性

• transition 简写属性，用于在一个属性中设置四个过渡属性。
• transition-property 规定应用过渡的 CSS 属性的名称。
• transition-duration 定义过渡效果花费的时间。默认是 0。
• transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
• transition-delay 规定过渡效果何时开始。默认是 0。

举例来说：

transition-property: width;：指定过渡效果应用于元素的宽度属性。
transition-duration: 1s;：指定过渡效果持续的时间，这里设置为1秒。
transition-timing-function: linear;：指定过渡效果的时间曲线，这里设置为线性，即匀速运动。
transition-delay: 2s;：指定过渡效果延迟开始的时间，这里设置为2秒。

下图是其实是动态的，可以自己用代码试一下：

• 图1（紫色从左到右过渡到粉色）：设置宽度属性的过渡效果为2秒。这意味着当宽度发生改变时，会以2秒的时间进行过渡动画。
  当鼠标悬停在元素上时，将宽度增加到300像素。
  因此，当鼠标悬停在元素上时，宽度会从100像素平滑地过渡到300像素，过渡时间为2秒。
• 图二（黑色从左上角到右下角过渡到白色）： 在元素的宽度属性上应用一个持续时间为1秒的线性过渡效果，延迟2秒后开始过渡。

线性渐变的语法继续往后看。

#transition {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
    -webkit-transition: width 2s;
}

#transition:hover {
    width: 300px;
}

/* 渐变 */
#transition {
    height: 200px;
    background-image: linear-gradient(to right, plum, pink);
}

/* 在元素的宽度属性上应用一个持续时间为1秒的线性过渡效果，延迟2秒后开始过渡 */
#transition2 {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(to bottom right, black, white);
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* 兼容 Safari 浏览器 */
    -webkit-transition-property: width;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 2s;
}

#transition2:hover {
    width: 300px;
}

CSS3 渐变（Gradients）

线性渐变

语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
（无方向时默认从上到下）

下图为彩虹色和包含透明色的示例：

#rainbow {
    height: 200px;
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    /* 标准必须放在最后 */
}

#transparent {
    height: 200px;
    background-image: linear-gradient(to top, rgba(255, 0, 0, 0), rgba(0, 153, 255, 255));
}

CSS3 径向渐变

径向渐变由它的中心定义。

创建一个径向渐变，必须至少定义两种颜色节点。同时，也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
语法：
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

可以自己试试。比如background-image: radial-gradient(circle, pink, lightblue, lightgreen);的效果是这样的：