CSS3過渡(transitions)

屬性

• transition 簡寫屬性，用于在一個屬性中設(shè)置四個過渡屬性。
• transition-property 規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。
• transition-duration 定義過渡效果花費的時間。默認(rèn)是 0。
• transition-timing-function 規(guī)定過渡效果的時間曲線。默認(rèn)是 “ease”。
• transition-delay 規(guī)定過渡效果何時開始。默認(rèn)是 0。

舉例來說：

transition-property: width;：指定過渡效果應(yīng)用于元素的寬度屬性。
transition-duration: 1s;：指定過渡效果持續(xù)的時間，這里設(shè)置為1秒。
transition-timing-function: linear;：指定過渡效果的時間曲線，這里設(shè)置為線性，即勻速運動。
transition-delay: 2s;：指定過渡效果延遲開始的時間，這里設(shè)置為2秒。

下圖是其實是動態(tài)的，可以自己用代碼試一下：

• 圖1（紫色從左到右過渡到粉色）：設(shè)置寬度屬性的過渡效果為2秒。這意味著當(dāng)寬度發(fā)生改變時，會以2秒的時間進行過渡動畫。
  當(dāng)鼠標(biāo)懸停在元素上時，將寬度增加到300像素。
  因此，當(dāng)鼠標(biāo)懸停在元素上時，寬度會從100像素平滑地過渡到300像素，過渡時間為2秒。
• 圖二（黑色從左上角到右下角過渡到白色）： 在元素的寬度屬性上應(yīng)用一個持續(xù)時間為1秒的線性過渡效果，延遲2秒后開始過渡。

線性漸變的語法繼續(xù)往后看。

#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);
}

/* 在元素的寬度屬性上應(yīng)用一個持續(xù)時間為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, ...);
（無方向時默認(rèn)從上到下）

下圖為彩虹色和包含透明色的示例：

#rainbow {
    height: 200px;
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    /* 標(biāo)準(zhǔn)必須放在最后 */
}

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

CSS3 徑向漸變

徑向漸變由它的中心定義。

創(chuàng)建一個徑向漸變，必須至少定義兩種顏色節(jié)點。同時，也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。默認(rèn)情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。
語法：
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

可以自己試試。比如background-image: radial-gradient(circle, pink, lightblue, lightgreen);的效果是這樣的：
文章來源地址http://www.zghlxwxcb.cn/news/detail-797293.html

到了這里，關(guān)于day8 CSS3漸變gradients+CSS3過渡transition的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！