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

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

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

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

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

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

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

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

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

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

相關(guān)推薦：

Dreamweaver單元格怎么拆分合并?

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

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