首頁技術(shù)文章正文

怎樣使用CSS3給網(wǎng)頁添加漸變效果?

更新時間:2021-08-12 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

在CSS3之前的版本中,如果需要添加漸變效果,通常要設(shè)置背景圖像來實現(xiàn)。而CSS3中增加了漸變屬性,通過漸變屬性可以輕松實現(xiàn)漸變效果。CSS3的漸變屬性主要包括線性漸變、徑向漸變和重復(fù)漸變,具體介紹如下。

1. 線性漸變

在線性漸變過程中,起始顏色會沿著一條直線按順序過渡到結(jié)束顏色。運(yùn)用CSS3中的 “background-image:linear-gradient(參數(shù)值);”樣式可以實現(xiàn)線性漸變效果,其基本語法格式如下。

background-image:linear-gradient(漸變角度,顏色值1,顏色值2...,顏色值n);

在上面的語法格式中,linear-gradient用于定義漸變方式為線性漸變,括號內(nèi)用于設(shè)定漸變角度和顏色值,具體解釋如下。

(1) 漸變角度

漸變角度指水平線和漸變線之間的夾角,可以是以deg為單位的角度數(shù)值或“to”加“l(fā)eft”、“right”、“top”和“bottom”等關(guān)鍵詞。在使用角度設(shè)定漸變起點(diǎn)的時候,0deg對應(yīng)“to top”,90deg對應(yīng)“to right”,180deg對應(yīng)“to bottom”,270deg對應(yīng)“to left”,整個過程就是以bottom為起點(diǎn)順時針旋轉(zhuǎn),具體如圖1所示。

1628751945355_11.png

圖1 漸變角度圖

當(dāng)未設(shè)置漸變角度時,會默認(rèn)為“180deg”等同于“to bottom”。

(2) 顏色值

顏色值用于設(shè)置漸變顏色,其中“顏色值1”表示起始顏色,“顏色值n”表示結(jié)束顏色,起始顏色和結(jié)束顏色之間可以添加多個顏色值,各顏色值之間用“,”隔開。示例代碼如下:

  <title>線性漸變</title>

  <style type="text/css">

  p{

  width:200px;

  height:200px;

  background-image:linear-gradient(30deg,#0f0,#00F);

  }

  </style>

運(yùn)行示例代碼效果如圖2所示。

1628751949919_12.png

圖2 線性漸變1

在圖2中實現(xiàn)了綠色到藍(lán)色的線性漸變。值得一提的是,在每一個顏色值后面還可以書寫一個百分比數(shù)值,用于標(biāo)示顏色漸變的位置例如下面的示例代碼:

background-image:linear-gradient(30deg,#0f0 50%,#00F 80%);

在上面的示例代碼中,可以看做綠色(#0f0)由50%的位置開始出現(xiàn)漸變至藍(lán)色(#00f)位于80%的位置結(jié)束漸變??梢杂肞hotoshop中的漸變色塊進(jìn)行類比,如圖3所示。

1628751955426_13.png

圖3 定義漸變顏色位置

示例代碼對應(yīng)效果如圖4所示。

1628751960055_14.jpg

圖4 線性漸變2

2. 徑向漸變

徑向漸變同樣是網(wǎng)頁中一種常用的漸變,在徑向漸變過程中,起始顏色會從一個中心點(diǎn)開始,按照橢圓或圓形形狀進(jìn)行擴(kuò)張漸變。運(yùn)用CSS3中的“background-image:radial-gradient(參數(shù)值);”樣式可以實現(xiàn)徑向漸變效果,其基本語法格式如下。

background-image:radial-gradient(漸變形狀 圓心位置,顏色值1,顏色值2...,顏色值n);

在上面的語法格式中,radial-gradient用于定義漸變的方式為徑向漸變,括號內(nèi)的參數(shù)值用于設(shè)定漸變形狀、圓心位置和顏色值,對各參數(shù)的具體介紹如下。

(1) 漸變形狀

漸變形狀用來定義徑向漸變的形狀,其取值即可以是定義水平和垂直半徑的像素值或百分比,也可以是相應(yīng)的關(guān)鍵詞。其中關(guān)鍵詞主要包括兩個值“circle”和“ellipse”,具體解釋如下。

● 像素值/百分比:用于定義形狀的水平和垂直半徑,例如“80px 50px”即表示一個水平半徑為80px,垂直半徑為50px的橢圓形。

● circle:指定圓形的徑向漸變。

● ellipse:指定橢圓形的徑向漸變。

(2) 圓心位置

圓心位置用于確定元素漸變的中心位置,使用“at”加上關(guān)鍵詞或參數(shù)值來定義徑向漸變的中心位置。該屬性值類似于CSS中background-position屬性值,如果省略則默認(rèn)為“center”。該屬性值主要有以下幾種:

● 像素值/百分比:用于定義圓心的水平和垂直坐標(biāo),可以為負(fù)值。

● left:設(shè)置左邊為徑向漸變圓心的橫坐標(biāo)值。

● center:設(shè)置中間為徑向漸變圓心的橫坐標(biāo)值或縱坐標(biāo)。

● right:設(shè)置右邊為徑向漸變圓心的橫坐標(biāo)值。

● top:設(shè)置頂部為徑向漸變圓心的縱標(biāo)值。

● bottom:設(shè)置底部為徑向漸變圓心的縱標(biāo)值。

(3) 顏色值

“顏色值1”表示起始顏色,“顏色值n”表示結(jié)束顏色,起始顏色和結(jié)束顏色之間可以添加多個顏色值,各顏色值之間用“,”隔開。示例代碼如下:

  <title>徑向漸變</title>

  <style type="text/css">

  p{

  width:200px;

  height:200px;

  border-radius:50%;   /*設(shè)置圓角邊框*/

  background-image:radial-gradient(ellipse at center,#0f0,#030); /*設(shè)置徑向漸變*/

  }

  </style>

在上面的例子中為p標(biāo)簽定義了一個漸變形狀為橢圓形,徑向漸變位置在容器中心點(diǎn),綠色(#0f0)到深綠色(#030)的徑向漸變;同時使用“border-radius”屬性將容器的邊框設(shè)置為圓角。運(yùn)行示例代碼效果如圖5所示。

1628751977319_15.jpg

圖5 徑向漸變

在圖5中,球體實現(xiàn)了綠色到深綠色的徑向漸變。值得一提的是,同“線性漸變”類似,在“徑向漸變”的顏色值后面也可以書寫一個百分比數(shù)值,用于設(shè)置漸變的位置。

3. 重復(fù)漸變

在網(wǎng)頁設(shè)計中,經(jīng)常會遇到在一個背景上重復(fù)應(yīng)用漸變模式的情況,這時就需要使用重復(fù)漸變。重復(fù)漸變包括重復(fù)線性漸變和重復(fù)徑向漸變,具體解釋如下。

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

在CSS3中,通過“background-image:repeating-linear-gradient(參數(shù)值);”樣式可以實現(xiàn)重復(fù)線性漸變的效果,其基本語法格式如下。

background-image:repeating-linear-gradient(漸變角度,顏色值1,顏色值2...,顏色值n);

在上面的語法格式中,“repeating-linear-gradient(參數(shù)值)”用于定義漸變方式為重復(fù)線性漸變,括號內(nèi)的參數(shù)取值和線性漸變相同,分別用于定義漸變角度和顏色值。顏色值同樣可以使用百分比定義位置。

(2) 重復(fù)徑向漸變

在CSS3中,通過“background-image:repeating-radial-gradient(參數(shù)值);”樣式可以實現(xiàn)重復(fù)線性漸變的效果,其基本語法格式如下。

background-image:repeating-radial-gradient(漸變形狀 圓心位置,顏色值1,顏色值2...,顏色值n);

在上面的語法格式中,“repeating-radial-gradient(參數(shù)值)”用于定義漸變方式為重復(fù)徑向漸變,括號內(nèi)的參數(shù)取值和徑向漸變相同,分別用于定義漸變形狀、圓心位置和顏色值。





猜你喜歡:

CSS3顏色不透明度的設(shè)置方法【web前端】

Web前端HTML5+CSS3+移動Web全套【黑馬程序員最新課程】

黑馬程序員web前端開發(fā)培訓(xùn)課程

分享到:
在線咨詢 我要報名
和我們在線交談!