dw怎么使用transition過渡屬性?
我要評論Dreamweaver中導航菜單需要添加過渡動畫效果，這就需要會使用transition過渡屬性，下面我們就來看看詳細的教程。
Adobe Dreamweaver CC 2018 V18.0 中文/英文安裝版 32/64位
- 類型：網(wǎng)頁設(shè)計
- 大?。?/span>968MB
- 語言：簡體中文
- 時間：2017-10-19
1、在Dreamweaver中構(gòu)建一個簡單導航，如下圖所示，設(shè)置文字顏色和背景色
2、點擊打開文件中的-拆分
3、可以在軟件中實時預覽效果
4、對其中的li添加：hover屬性，當鼠標經(jīng)過li時，字體和背景顏色發(fā)生變化，如圖當鼠標經(jīng)過li時，背景顏色變?yōu)辄S色，字體變?yōu)楹谏?/p>
li:hover{background-color:yellow;color:black;｝
5、在li:hover{} 中添加transition過渡動畫，transition后面添加變化的屬性及屬性變化的時間，如下圖所示transition:background-color 0.5s;意思是對background-color背景顏色設(shè)置過渡動畫，當鼠標經(jīng)過li時，背景顏色會慢慢變?yōu)辄S色，中間時間為0.5s
6、如果里面包含多個屬性時，transition后面的屬性可以使用all來代替，比如這里的背景顏色和字體顏色兩個屬性，使用all全部代替，當鼠標經(jīng)過Li時，字體和背景顏色會慢慢改變
7、如果在hover中設(shè)置文字字號，設(shè)置為字號50號時，當鼠標經(jīng)過li時，字體會慢慢變大，形成一個動畫效果
以上就是dw中transition過渡屬性的使用方法，希望大家喜歡，請繼續(xù)關(guān)注腳本之家。
相關(guān)推薦：
Dreamweaver怎么輸入文本并設(shè)置文本樣式?
dreamweaver怎么實現(xiàn)鼠標放在不同的位置顯示不同的圖片?
相關(guān)文章
Dreamweaver怎么給個人簡歷添加照片并排版？使用Dreamweaver制作了一個個人簡歷，想要給個人簡歷添加自己的照片，并給圖文排版，該怎么操作呢？下面我們就來看看詳細的教程2017-10-23
Dreamweaver怎么設(shè)計彩色邊框的表格？想要制作一個五顏六色變寬的表格，該怎么制作呢？我們需要使用CSS樣式來制作，下面我們就來看看詳細的教程，需要的朋友可以參考下2017-10-23
dreamweaver cs6怎么給網(wǎng)頁添加float浮動效果?
dreamweaver cs6怎么給網(wǎng)頁添加float浮動效果？在瀏覽網(wǎng)頁的時候，經(jīng)常能在網(wǎng)頁中，看到有float浮動布局，該怎么給網(wǎng)頁添加float浮動效果呢？請看下文詳細介紹，需要的朋友2017-09-25
Dreamweaver怎么自定義設(shè)置返回步數(shù)?
Dreamweaver怎么自定義設(shè)置返回步數(shù)？Dreamweaver中有可以撤銷的步數(shù)，該怎么設(shè)置呢？下面我們就來看看詳細的設(shè)置教程，需要的朋友可以參考下2017-09-04
Dreamweaver怎么給網(wǎng)頁制作跳轉(zhuǎn)菜單?
Dreamweaver怎么給網(wǎng)頁制作跳轉(zhuǎn)菜單？網(wǎng)頁需要一個跳轉(zhuǎn)菜單，該怎么制作這個跳轉(zhuǎn)菜單呢？下面我們就來看看詳細的教程，很簡單，需要的朋友可以參考下2017-08-10
Dreamweaver網(wǎng)頁怎么制作一個帶有列表值的下拉菜單?
Dreamweaver網(wǎng)頁怎么制作一個帶有列表值的下拉菜單？Dreamweaver設(shè)計網(wǎng)頁的時候，需要添加一個下拉菜單，并且給下拉菜單添加列表值，下面我們就來看看詳細的教程，需要的朋2017-08-10
Dreamweaver怎么給網(wǎng)站添加一個動態(tài)橫幅效果?
Dreamweaver怎么給網(wǎng)站添加一個動態(tài)橫幅效果？Dreamweaver中想要設(shè)計一個動態(tài)橫幅，該怎么設(shè)計呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2017-07-27
Dreamweaver怎么設(shè)置html網(wǎng)頁段落行間距?
Dreamweaver怎么設(shè)置html網(wǎng)頁段落行間距？Dreamweaver中設(shè)計網(wǎng)頁的時候，發(fā)現(xiàn)文字段落間的行間距不適合，想要調(diào)節(jié)一下，下面我們就來看看詳細的教程，需要的朋友可以參考下2017-07-26
Dreamweaver8怎么修改網(wǎng)頁標題？設(shè)計的網(wǎng)頁是有標題的，但是如果想要修改標題，該怎么修改呢？下面我們就來看看Dreamweaver修改網(wǎng)頁標題的教程，需要的朋友可以參考下2017-07-26
Dreamweaver CS6怎么使用項目列表？Dreamweaver制作網(wǎng)頁內(nèi)容的時候，為了等級分明，需要使用項目列表，下面我們就來看看詳細的教程，需要的朋友可以參考下2017-07-26
