隨著主流瀏覽器不斷地更新與進(jìn)步，CSS搭配js所形成的網(wǎng)頁(yè)動(dòng)畫(huà)效果，能用CSS3的語(yǔ)法直接呈現(xiàn)，在圖片的網(wǎng)站設(shè)計(jì)上更能減少圖片效果，避免檔案容量過(guò)大造成存取困難。

到底有哪些CSS3語(yǔ)法在前臺(tái)網(wǎng)頁(yè)設(shè)計(jì)中是最常被使用的呢?

1. RGBA設(shè)定元素顏色

可設(shè)定元素的顏色，主要利用顏色的RGB值，以及設(shè)定元素的透明度。

范例：

background:rgba(0,0,0,0.5);

background:rgba(0,0,0,1);

background:rgba(red,green,blue,alpha);

其中alpha值 0為透明 1為不透明，0~1區(qū)間可選擇透明度的強(qiáng)弱。

2.Border radius設(shè)定元素圓角

可設(shè)定元素圓角，預(yù)設(shè)為0

范例：

border-radius: 10px;

-webkit-border-radius: 10px; (針對(duì)chrome瀏覽器)

-moz-border-radius: 10px; (針對(duì)firefox瀏覽器)

3. Text Shadow文字陰影

可設(shè)定文字陰影

范例：

text-shadow: 1px 2px 3px #000;

4. box Shadow區(qū)塊陰影

可設(shè)定區(qū)塊陰影

范例：

box-shadow: 1px 2px 3px #000;

-webkit-box-shadow: 1px 2px 3px #000; (針對(duì)chrome瀏覽器)

-moz-box-shadow: 1px 2px 3px #000; (針對(duì)firefox瀏覽器)

5. transition過(guò)渡動(dòng)畫(huà)

可設(shè)定動(dòng)畫(huà)效果

transition-property：對(duì)哪個(gè)屬性

transition-duration：動(dòng)畫(huà)時(shí)間，預(yù)設(shè)為0

transition-timing-function：動(dòng)畫(huà)效果，如淡入、淡出等

設(shè)定值：

linear:以相同速度開(kāi)始至結(jié)束的效果

ease:慢速開(kāi)始，然后加快，之后慢速結(jié)束的效果

ease-in：以慢速開(kāi)始的效果

ease-out：以慢速結(jié)束的效果

ease-in-out：以慢速開(kāi)始和結(jié)束的效果

cubic-bezier：在cubic-bezier函數(shù)中定義值，是0~1之間的數(shù)值

通常在設(shè)定動(dòng)畫(huà)速度時(shí)，大多使用ease-in或ease-out來(lái)取代，但借由cubic-bezier，可以得到更多種速度控制的動(dòng)畫(huà)效果。

transition-delay：規(guī)定動(dòng)畫(huà)效果的延遲時(shí)間

范例：

div{

width:100px;height:100px;

transition-property:width;

transition-duration:1s;}

div:hover{width:200px;}

以上會(huì)造成寬度改變的滑動(dòng)效果

6. Gradient Background設(shè)定背景漸層

上下漸層：GradientType=0

左右漸層：GradientType=1

漸層起始顏色：startcolorstr=#

漸層結(jié)束顏色：endcolorstr=#

范例：

預(yù)設(shè)的背景色

background: #278092;

background:-webkit-gradient(linear, left top, left bottom, from(#00475E), to(#007276)); (針對(duì)chrome瀏覽器)

background: -moz-linear-gradient(top, #00475E, #007276);

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00475E', endColorstr='#007276'); (針對(duì)firebox瀏覽器)

background: -o-linear-gradient(top, #00475E, #007276); (針對(duì)opera瀏覽器)

目前這些都是在網(wǎng)頁(yè)設(shè)計(jì)中最常使用的CSS3語(yǔ)法，一般網(wǎng)路上也有免費(fèi)的產(chǎn)生器可供使用。CSS3的出現(xiàn)影響了使用者使用網(wǎng)頁(yè)的讀取速度，在目前較流行的RWD網(wǎng)頁(yè)(網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站設(shè)計(jì)" href="http://www.aaarwkj.com/h5.html" target="_blank">響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì))更有特別的用法，且較不受拘束，未來(lái)CSS3的發(fā)展指日可待。

網(wǎng)頁(yè)題目：網(wǎng)頁(yè)設(shè)計(jì)中常用的CSS3語(yǔ)法
分享網(wǎng)址：http://www.aaarwkj.com/news40/79090.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開(kāi)發(fā)、自適應(yīng)網(wǎng)站、網(wǎng)站建設(shè)、域名注冊(cè)、網(wǎng)站策劃、網(wǎng)站營(yíng)銷

廣告

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