第14天CSS3 漸變

CSS3 漸變

CSS3 漸變（gradient）可以讓你在兩個(gè)或多個(gè)指定的顏色之間顯示平穩(wěn)的過渡。 以前，你必須使用圖像來實(shí)現(xiàn)這些效果，現(xiàn)在通過使用 CSS3 的漸變（gradients）即可實(shí)現(xiàn)。此外，漸變效果的元素在放大時(shí)看起來效果更好，因?yàn)闈u變（gradient）是由瀏覽器生成的。

1、線性漸變

語法： background: linear-gradient(direction, color-stop1, color-stop2, ...); 說明： direction：默認(rèn)為to bottom，即從上向下的漸變； stop：顏色的分布位置，默認(rèn)均勻分布，例如有3個(gè)顏色，各個(gè)顏色的stop均為33.33%。

示例1：to left、top right、to bottom、to top

div { background:linear-gradient(to left, red , blue) } div { background:linear-gradient(to right, red , blue) } div { background:linear-gradient(to bottom, red , blue) } / 瀏覽器默認(rèn)值 / div { background:linear-gradient(to top, red , blue) } 分別產(chǎn)生“從右到左”、“從左到右”、“從上到下”、“從下到上”的“紅色–綠色”漸變

示例2：to right bottom、to right top、to left bottom、to left top

div { background: linear-gradient(to right bottom, red , blue); } div { background: linear-gradient(to right top, red , blue); } div { background: linear-gradient(to left bottom, red , blue); } div { background: linear-gradient(to left top, red , blue); }

分別產(chǎn)生到“右下角”、“右上角”、“左下角”、“左上角”的漸變

示例3：使用角度漸變

div { background: linear-gradient(10deg, red, blue) }

2、徑向漸變

徑向漸變不同于線性漸變，線性漸變是從“一個(gè)方向”向“另一個(gè)方向”的顏色漸變，而徑向漸變是從“一個(gè)點(diǎn)”向四周的顏色漸變

語法： background: radial-gradient(center, shape, size, start-color, ..., last-color); 說明： center：漸變起點(diǎn)的位置，可以為百分比，默認(rèn)是圖形的正中心。 shape：漸變的形狀，ellipse表示橢圓形，circle表示圓形。默認(rèn)為ellipse，如果元素形狀為正方形的元素，則ellipse和circle顯示一樣。 size：漸變的大小，即漸變到哪里停止，它有四個(gè)值。 closest-side：最近邊； farthest-side：最遠(yuǎn)邊； closest-corner：最近角； farthest-corner：最遠(yuǎn)角

示例1：多顏色點(diǎn)均勻分布

div { background: radial-gradient(red, green, blue); } 以中心（50% 50%）為起點(diǎn)，到最遠(yuǎn)角（farthest-corner），從red到green、blue的均勻漸變

EG: div { background: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, blue); } 或 div { background: -webkit-radial-gradient(center, farthest-corner, red, green, blue); }

示例2：多顏色節(jié)點(diǎn)不均勻分布

div { background: radial-gradient(red 5%, green 15%, blue 60%); }

示例3：設(shè)置漸變形狀

div { background: radial-gradient(circle, red, yellow, green); } div { background: radial-gradient(ellipse, red, yellow, green); }

circle：漸變?yōu)樽畲蟮膱A形； ellipse：根據(jù)元素形狀漸變，元素為正方形是顯示效果與circle無異。

示例4：不同尺寸的漸變

size指定了漸變的大小，即漸變到哪里停止，它有四個(gè)值。 closest-side：最近邊； farthest-side：最遠(yuǎn)邊； closest-corner：最近角； farthest-corner：最遠(yuǎn)角

div { background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); } div { background: radial-gradient(60% 40%, farthest-side, blue, green, yellow, black); } div { background: radial-gradient(60% 40%, closest-corner, blue, green, yellow, black); } div { background: radial-gradient(60% 40%, farthest-corner, blue, green, yellow, black); }

3、重復(fù)漸變

（1）重復(fù)性線性漸變

div { background: repeating-linear-gradient(red, yellow 10%, green 20%); } 說明： 10%的位置為yellow，20%的位置為green，然后按照這20%向下重復(fù)

（2）重復(fù)性徑向漸變

div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }

CSS3 過渡

transition

css3的transition允許css的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動(dòng)畫效果改變CSS的屬性值

transition-property：檢索或設(shè)置對(duì)象中的參與過渡的屬性 transition-duration：檢索或設(shè)置對(duì)象過渡的持續(xù)時(shí)間 transition-delay：檢索或設(shè)置對(duì)象延遲過渡的時(shí)間 transition-timing-function：檢索或設(shè)置對(duì)象中過渡的動(dòng)畫類型 簡(jiǎn)寫： transition:all/具體屬性值 運(yùn)動(dòng)時(shí)間s/ms 延遲時(shí)間s/ms 動(dòng)畫類型

transition-timing-function：檢索或設(shè)置對(duì)象中過渡的動(dòng)畫類型

貝塞爾曲線： 屬性值：cubic-bezier() 貝塞爾曲線網(wǎng)址：http://cubic-bezier.com/ CSS3 2D

transform

transform的屬性包括：rotate() / skew() / scale() / translate(,) ，分別還有x、y之分，比如：rotatex() 和 rotatey()

1、translate()

將元素向指定的方向移動(dòng)，類似于position中的relative。 水平移動(dòng)： 向右移動(dòng)translate(tx,0)和向左移動(dòng)translate(-tx,0)； 垂直移動(dòng)： 向上移動(dòng)translate(0,-ty)和向下移動(dòng)translate(0,ty); 對(duì)角移動(dòng)： 右下角移動(dòng)translate(tx,ty)、右上角移動(dòng)translate(tx,-ty)、左上角移動(dòng)translate(-tx,-ty)和左下角移動(dòng)translate(-tx,ty)。

translateX()： 水平方向移動(dòng)一個(gè)對(duì)象。對(duì)像只向X軸進(jìn)行移動(dòng)，如果值為正值，對(duì)像向右移動(dòng)；如果值為負(fù)值，對(duì)像向左移動(dòng)。 translateY()： 縱軸方向移動(dòng)一個(gè)對(duì)象。對(duì)象只向Y軸進(jìn)行移動(dòng)，如果值為正值，對(duì)象向下移動(dòng)；如果值為負(fù)值，對(duì)像向上移動(dòng)。 這兩個(gè)函數(shù)和前面介紹的translate()函數(shù)不同的是每個(gè)方法只接受一個(gè)值。 所以 transform:translate(-100px,0)實(shí)際上等于transform:translateX(-100px); transform:translate(0,-100px)實(shí)際上等于transform:translateY(-100px)。

2、scale()

讓元素根據(jù)中心原點(diǎn)對(duì)對(duì)象進(jìn)行縮放。默認(rèn)的值1。因此0.01到0.99之間的任何值，使一個(gè)元素縮?。欢魏未笥诨虻扔?.01的值，讓元素顯得更大。 縮放scale()函數(shù)和translate()函數(shù)的語法非常相似，他可以接受一個(gè)值，也可以同時(shí)接受兩個(gè)值，如果只有一個(gè)值時(shí)，其第二個(gè)值默認(rèn)與第一個(gè)值相等。 例如， scale(1,1)元素不會(huì)有任何變化，而scale(2,2)讓元素沿X軸和Y軸放大兩倍。 scaleX()：相當(dāng)于scale(sx,1)。表示元素只在X軸（水平方向）縮放元素，其默認(rèn)值是1。 scaleY()：相當(dāng)于scale(1,sy)。表示元素只在Y軸（縱橫方向）縮放元素，其默認(rèn)值是１。

3、rotate()

旋轉(zhuǎn)rotate()函數(shù)通過指定的角度參數(shù)對(duì)元素根據(jù)對(duì)象原點(diǎn)指定一個(gè)2D旋轉(zhuǎn)。它主要在二維空間內(nèi)進(jìn)行操作，接受一個(gè)角度值，用來指定旋轉(zhuǎn)的幅度。如果這個(gè)值為正值，元素相對(duì)原點(diǎn)中心順時(shí)針旋轉(zhuǎn)；如果這個(gè)值為負(fù)值，元素相對(duì)原點(diǎn)中心逆時(shí)針旋轉(zhuǎn)。

rotateX() 方法，元素圍繞其 X 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)

rotateY() 方法，元素圍繞其 Y 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)

4、skew()

傾斜skew()函數(shù)能夠讓元素傾斜顯示。它可以將一個(gè)對(duì)象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。 一個(gè)參數(shù)時(shí)：表示水平方向的傾斜角度； 兩個(gè)參數(shù)時(shí)：第一個(gè)參數(shù)表示水平方向的傾斜角度，第二個(gè)參數(shù)表示垂直方向的傾斜角度

transform-origin

transform-origin是變形原點(diǎn)，也就是該元素圍繞著那個(gè)點(diǎn)變形或旋轉(zhuǎn)，該屬性只有在設(shè)置了transform屬性的時(shí)候起作用；

因?yàn)槲覀冊(cè)啬J(rèn)基點(diǎn)就是其中心位置，換句話說我們沒有使用transform-origin改變?cè)鼗c(diǎn)位置的情況下，transform進(jìn)行的rotate,translate,scale,skew等操作都是以元素自己中心位置進(jìn)行變化的。

2D 轉(zhuǎn)換元素能夠改變?cè)?x 和 y 軸