Dreamweaver中導(dǎo)航菜單需要添加過(guò)渡動(dòng)畫效果，這就需要會(huì)使用transition過(guò)渡屬性，下面我們就來(lái)看看詳細(xì)的教程。

1、在Dreamweaver中構(gòu)建一個(gè)簡(jiǎn)單導(dǎo)航，如下圖所示，設(shè)置文字顏色和背景色

2、點(diǎn)擊打開(kāi)文件中的-拆分

3、可以在軟件中實(shí)時(shí)預(yù)覽效果

4、對(duì)其中的li添加：hover屬性，當(dāng)鼠標(biāo)經(jīng)過(guò)li時(shí)，字體和背景顏色發(fā)生變化，如圖當(dāng)鼠標(biāo)經(jīng)過(guò)li時(shí)，背景顏色變?yōu)辄S色，字體變?yōu)楹谏?/p>

li:hover{background-color:yellow;color:black;｝

5、在li:hover{}  中添加transition過(guò)渡動(dòng)畫，transition后面添加變化的屬性及屬性變化的時(shí)間，如下圖所示transition:background-color 0.5s;意思是對(duì)background-color背景顏色設(shè)置過(guò)渡動(dòng)畫，當(dāng)鼠標(biāo)經(jīng)過(guò)li時(shí)，背景顏色會(huì)慢慢變?yōu)辄S色，中間時(shí)間為0.5s

6、如果里面包含多個(gè)屬性時(shí)，transition后面的屬性可以使用all來(lái)代替，比如這里的背景顏色和字體顏色兩個(gè)屬性，使用all全部代替，當(dāng)鼠標(biāo)經(jīng)過(guò)Li時(shí)，字體和背景顏色會(huì)慢慢改變

7、如果在hover中設(shè)置文字字號(hào)，設(shè)置為字號(hào)50號(hào)時(shí)，當(dāng)鼠標(biāo)經(jīng)過(guò)li時(shí)，字體會(huì)慢慢變大，形成一個(gè)動(dòng)畫效果

以上就是dw中transition過(guò)渡屬性的使用方法，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注武林網(wǎng)。

相關(guān)推薦：

Dreamweaver單元格怎么拆分合并?

Dreamweaver怎么輸入文本并設(shè)置文本樣式?

dreamweaver怎么實(shí)現(xiàn)鼠標(biāo)放在不同的位置顯示不同的圖片?