CSS中3d導(dǎo)航為啥要加過渡效果

過渡效果是在鼠標(biāo)指針浮到元素上時發(fā)生的效果。

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),敘州企業(yè)網(wǎng)站建設(shè),敘州品牌網(wǎng)站建設(shè),網(wǎng)站定制,敘州網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,敘州網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

CSS過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果，這邊要注意的是，想要實現(xiàn)這一點(diǎn)，必須規(guī)定兩項內(nèi)容，規(guī)定您希望把效果添加到哪個CSS屬性上規(guī)定效果的時長，規(guī)定您希望把效果添加到哪個CSS屬性上，規(guī)定效果的時長。

這個綠色過渡漸變的css3樣式，該怎么寫？

//?html部分

div?class="box"/div

//?css部分

.box{

width:?500px;?

height:?50px;

background:?-webkit-linear-gradient(to?right,#17c864,#3fccf0);

background:?-moz-linear-gradient(to?right,#17c864,#3fccf0);

background:?-o-linear-gradient(to?right,#17c864,#3fccf0);

background:?linear-gradient(to?right,#17c864,#3fccf0);

}

5、CSS樣式之動畫效果

陰影: 通過合理添加陰影可以使平面網(wǎng)頁內(nèi)容顯示出立體的效果

1、 box-shadow：盒子陰影

(1) 陰影在x軸方向的偏移, 正右負(fù)左

(2) 陰影在y軸方向的偏移, 正下負(fù)上

(3) 陰影的模糊度, 數(shù)值越大, 陰影越模糊

(4) 陰影的范圍, 數(shù)值越大, 陰影越大

(5) 陰影顏色

(6) 陰影位置, 默認(rèn)outset盒子外陰影, inset盒子內(nèi)陰影

2、 text-shadow：文字陰影

(1) 陰影x軸偏移

(2) 陰影y軸偏移

(3) 陰影模糊度

(4) 陰影顏色

文字陰影不能像盒子陰影一樣疊加陰影。

可以通過漸變?yōu)闃?biāo)簽設(shè)置一定梯度變化的背景色

漸變色只能給標(biāo)簽的background-image樣式賦值。

1、線性漸變： -webkit-linear-gradient

1) 線性的角度或方向, 默認(rèn)從上到下漸變

(1) left / right / top / bottom 設(shè)置漸變的開始方向

(2) 角度的設(shè)置, 單位deg, 0deg在3點(diǎn)鐘方向, 正角度逆時針旋轉(zhuǎn), 負(fù)角度順時針旋轉(zhuǎn)。

2) 漸變的顏色和階段, 如果不設(shè)置階段, 各個自動平分

2、徑向漸變, 以圓心向四周沿著半徑方向漸變：-webkit-radial-gradient

(1) 設(shè)置圓的類型, 默認(rèn)橢圓, 可以設(shè)置circle

(2) 設(shè)置顏色及階段

倒影：通過-webkit-box-reflect 來為標(biāo)簽設(shè)置倒影

(1) 設(shè)置倒影方向

above: 倒影出現(xiàn)在標(biāo)簽的上方

below: 倒影出現(xiàn)在標(biāo)簽的下方

left: 倒影出現(xiàn)在標(biāo)簽的左方

right: 倒影出現(xiàn)在標(biāo)簽的右方

(2) 設(shè)置倒影距離

(3) 設(shè)置蒙版圖片, 可以設(shè)置漸變

倒影目前只在 Chrome 和 Safari 瀏覽器生效

過渡動畫效果: 將標(biāo)簽的樣式變化以連續(xù)平滑的方式顯示, 類似于動畫。

1）transition-property: 設(shè)置過渡需要表現(xiàn)表現(xiàn)的樣式屬性,通常使用 all 來設(shè)置所有樣式變化都用過渡顯示。

2）transition-duration: 設(shè)置過渡的持續(xù)時間。

3）transition-delay: 設(shè)置過渡效果的延遲時間。

4）transition-timing-function: 設(shè)置過渡的速度曲線。

過渡效果，可以簡寫，用空格可空開過渡樣式的各個值，不分先后，當(dāng)存在兩個時間時，第一個為過渡持續(xù)時間，第二個為過渡延遲時間。

可以設(shè)置的值:

（1）ease: 先快后慢

（2）ease-in: 加速

（3）ease-out: 減速

（4）ease-in-out: 先加速后減速

（5）linear: 勻速

1、2d變換：

通過 transform 來為標(biāo)簽設(shè)置變換

1） 平移變換 translate

translateX():設(shè)置標(biāo)簽沿著x軸移動的距離

translateY():設(shè)置標(biāo)簽沿著y軸移動的距離

translate():設(shè)置標(biāo)簽沿著xy軸的移動距離，第一個值表示x軸平移，第二個值表示y軸平移

x軸水平向右為正方向，y軸向下為正方向

平移會保留標(biāo)簽原本位置，相對自身原本位置平移

2） 旋轉(zhuǎn)變換 rotate

默認(rèn)旋轉(zhuǎn)點(diǎn)在標(biāo)簽的正中心，正角度使標(biāo)簽沿著順時針旋轉(zhuǎn)，負(fù)角度使標(biāo)簽沿著逆時針旋轉(zhuǎn)。

0deg方向是12點(diǎn)方向。

旋轉(zhuǎn)點(diǎn)又是標(biāo)簽變換的坐標(biāo)系原點(diǎn)

3）縮放變換 scale

scaleX()、scaleY()、scale()

縮放變換，放大縮小的是標(biāo)簽坐標(biāo)系的比例，例如，放大2倍，坐標(biāo)系中1px就變成了2px；注意，一旦坐標(biāo)系比例發(fā)生變化，會影響其他變換，例如：平移變換100px在2倍坐標(biāo)系下，就會平移200px。

transform-origin 設(shè)置標(biāo)簽變換參照點(diǎn)位置:

（1）left/right/top/bottom/center來設(shè)置特殊位置

（2）通過具體像素精確設(shè)置位置

第一個值表示x軸方向?qū)⒄拯c(diǎn)位置的設(shè)置

第二個值表示y軸方向?qū)⒄拯c(diǎn)位置的設(shè)置

允許變換參照點(diǎn)設(shè)置在標(biāo)簽之外

注意，一旦為標(biāo)簽更改變換參照點(diǎn)，那么變換參照點(diǎn)的基準(zhǔn)就變成了標(biāo)簽左上角為原點(diǎn)。

2d的變換總結(jié)：

（1）默認(rèn)變換參照點(diǎn)在標(biāo)簽的正中心，x軸為穿過參照點(diǎn)水平軸，向右為正，y軸是穿過參照點(diǎn)豎直軸，向下為正。

（2）平移、旋轉(zhuǎn)、縮放都會改變標(biāo)簽坐標(biāo)系的狀態(tài)。

（3）變換都是參照標(biāo)簽初始位置進(jìn)行變換。

2、3D變換

設(shè)置3d變換 ：

設(shè)置視距：

（1）和2d變換相似，只是在2d變換平面的基礎(chǔ)上，多出了一條，垂直于標(biāo)簽平面并默認(rèn)向外為正的z軸。

（2）3d變換需要為變換標(biāo)簽的父標(biāo)簽設(shè)置變換類型為3d，相當(dāng)于在該標(biāo)簽下生成了一塊3d空間。

（3）3d變換下，只有平移和旋轉(zhuǎn)變換，沒有縮放。

（4）3d變換中, 可以通過改變標(biāo)簽變換參照點(diǎn)位置來改變XYZ軸的位置

1、 animation動畫，配合@keyframes來為標(biāo)簽設(shè)置關(guān)鍵幀動畫

animation屬性值：

1）animation-name：動畫名稱，用于為動畫綁定關(guān)鍵幀

@keyframes后面的名稱

2）animation-duration：動畫播放時間

s為單位，時間為0無動畫過程

3）animation-delay：動畫延遲時間

s為單位，時間為0無延遲

4）animation-timing-function：動畫緩動效果

可以設(shè)置的值：

（1）ease

（2）ease-in

（3）ease-out

（4）ease-in-out

（5）linear

5）animation-direction：設(shè)置動畫方向

alternate，當(dāng)播放次數(shù)大于一，返向播放

6）animation-iteration-count：設(shè)置動畫播放次數(shù)

infinite，無限播放

7）animation-fill-mode：設(shè)置動畫結(jié)束位置

默認(rèn) backwards，回到初始位置

forwards，停在結(jié)束位置

注意： animation同樣存在簡寫，將樣式值以空格隔開，不區(qū)分先后，兩個時間同時出現(xiàn)，第一個為播放時間，第二個為延遲時間。

一些css3樣式只在部分瀏覽器生效, 可以通過添加兼容前綴的形式來對部分低版本瀏覽器兼容

例如: transition: all 1s linear;

-webkit-transition: all 1s linear;

-moz-transition: all 1s linear;

-o-transition: all 1s linear;

-ms-transition: all 1s linear;

兼容問題：

-webkit- chrome、safari

-moz- firefox

-o- opera

-ms- ie

nimation、transition、transform、gradient等css3樣式都應(yīng)添加前綴進(jìn)行多類型多版本瀏覽器兼容。

jQuery中 如何在使用.css()的時候有過渡效果

//?逐漸增加div的大小

$("div").click(function()?{

$(this).css({

width:?function(index,?value)?{

return?parseFloat(value)?*?1.2;

},?

height:?function(index,?value)?{

return?parseFloat(value)?*?1.2;

}

});

});

jquery的css方法更改樣式，怎么在改變的過程中加點(diǎn)過渡動畫？能舉個例子嗎？謝謝！

這里主要有以下幾種方法：

一、在顯示和隱藏的時候，可以設(shè)置顯示隱藏的時間，$("#id").show("500")和$("#id").hide("500")，這樣看上去有一個過渡的效果。

二、在菜單（尤其的聯(lián)動菜單時）的下拉和收起時，使用$("#id").slideDown("500")和slideUp("500")，可以設(shè)置時間的長短。

三、一般的動畫過渡用$("#id").animate()這個方法。如樓上的animate(({

opacity

:

"0.3"

},500)。

希望可以綁到你！