css3漸變
線性漸變（Linear Gradient）- 向下/向上/向左/向右/對角方向
徑向漸變（Radial Gradient）- 由它們的中心定義
repeating-linear-gradient() 函數(shù)用于重復(fù)線性漸變：
線性漸變：linear-gradient：

徑向漸變?radial-gradient?：

創(chuàng)新互聯(lián)公司是少有的成都網(wǎng)站設(shè)計、做網(wǎng)站、營銷型企業(yè)網(wǎng)站、小程序定制開發(fā)、手機(jī)APP,開發(fā)、制作、設(shè)計、外鏈、推廣優(yōu)化一站式服務(wù)網(wǎng)絡(luò)公司,成立于2013年,堅持透明化,價格低,無套路經(jīng)營理念。讓網(wǎng)頁驚喜每一位訪客多年來深受用戶好評

線性漸變 （默認(rèn)從上向下）
1、background: linear-gradient(red, blue); 基本的漸變，默認(rèn)從上向下
2、background: linear-gradient(to right, red , blue); 從左向右的漸變
3、background: linear-gradient(to bottom right, red , blue);從左上角到右下角/
4、background: linear-gradient(180deg, red, blue);帶有指定角度的漸變
5、background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));使用透明色漸變，
transparent透明色/

重復(fù)的線性漸變 background: repeating-linear-gradient(red, yellow 10%, green 20%);

徑向漸變
1、background: radial-gradient(red, green, blue);顏色結(jié)點均勻分布的徑向漸變：
2、 background: radial-gradient(red 5%, green 15%, blue 60%); 顏色節(jié)點分布不均勻
3、 background: repeating-radial-gradient(red, yellow 10%, green 15%); 重復(fù)的徑向漸變

設(shè)置形狀
shape 參數(shù)定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認(rèn)值是 ellipse。
形狀為圓形的徑向漸變：
background: radial-gradient(circle, red, yellow, green);

css3中transform可以實現(xiàn)文字或圖像的旋轉(zhuǎn)（rotate）、縮放(scale)、傾斜(skew)、移動(translate)的變形效果。
?旋轉(zhuǎn)、縮放、傾斜和移動，這四種變形效果進(jìn)行結(jié)合使用，并且使用的先后順序不同，頁面顯示的結(jié)果會有區(qū)別。
使用語法：
transform:功能;
-ms-transform:功能; / IE 9 /
-moz-transform:功能; / Firefox /
-webkit-transform:功能; / Safari 和 Chrome /
-o-transform:功能; / Opera /

網(wǎng)頁名稱：css3過渡圖畫轉(zhuǎn)換
文章來源：http://www.rwnh.cn/article26/pcosjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、App開發(fā)、網(wǎng)站營銷、移動網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)