dw怎么使用transition過(guò)渡屬性?
我要評(píng)論Dreamweaver中導(dǎo)航菜單需要添加過(guò)渡動(dòng)畫(huà)效果，這就需要會(huì)使用transition過(guò)渡屬性，下面我們就來(lái)看看詳細(xì)的教程。
Adobe Dreamweaver CC 2018 V18.0 中文/英文安裝版 32/64位
- 類(lèi)型：網(wǎng)頁(yè)設(shè)計(jì)
- 大小：968MB
- 語(yǔ)言：簡(jiǎn)體中文
- 時(shí)間：2017-10-19
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)畫(huà)，transition后面添加變化的屬性及屬性變化的時(shí)間，如下圖所示transition:background-color 0.5s;意思是對(duì)background-color背景顏色設(shè)置過(guò)渡動(dòng)畫(huà)，當(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)畫(huà)效果
以上就是dw中transition過(guò)渡屬性的使用方法，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。
相關(guān)推薦：
Dreamweaver怎么輸入文本并設(shè)置文本樣式?
dreamweaver怎么實(shí)現(xiàn)鼠標(biāo)放在不同的位置顯示不同的圖片?
相關(guān)文章
Dreamweaver怎么給個(gè)人簡(jiǎn)歷添加照片并排版?
Dreamweaver怎么給個(gè)人簡(jiǎn)歷添加照片并排版？使用Dreamweaver制作了一個(gè)個(gè)人簡(jiǎn)歷，想要給個(gè)人簡(jiǎn)歷添加自己的照片，并給圖文排版，該怎么操作呢？下面我們就來(lái)看看詳細(xì)的教程2017-10-23
Dreamweaver怎么設(shè)計(jì)彩色邊框的表格?
Dreamweaver怎么設(shè)計(jì)彩色邊框的表格？想要制作一個(gè)五顏六色變寬的表格，該怎么制作呢？我們需要使用CSS樣式來(lái)制作，下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2017-10-23
dreamweaver cs6怎么給網(wǎng)頁(yè)添加float浮動(dòng)效果?
dreamweaver cs6怎么給網(wǎng)頁(yè)添加float浮動(dòng)效果？在瀏覽網(wǎng)頁(yè)的時(shí)候，經(jīng)常能在網(wǎng)頁(yè)中，看到有float浮動(dòng)布局，該怎么給網(wǎng)頁(yè)添加float浮動(dòng)效果呢？請(qǐng)看下文詳細(xì)介紹，需要的朋友2017-09-25
Dreamweaver怎么自定義設(shè)置返回步數(shù)?
Dreamweaver怎么自定義設(shè)置返回步數(shù)？Dreamweaver中有可以撤銷(xiāo)的步數(shù)，該怎么設(shè)置呢？下面我們就來(lái)看看詳細(xì)的設(shè)置教程，需要的朋友可以參考下2017-09-04
Dreamweaver怎么給網(wǎng)頁(yè)制作跳轉(zhuǎn)菜單?
Dreamweaver怎么給網(wǎng)頁(yè)制作跳轉(zhuǎn)菜單？網(wǎng)頁(yè)需要一個(gè)跳轉(zhuǎn)菜單，該怎么制作這個(gè)跳轉(zhuǎn)菜單呢？下面我們就來(lái)看看詳細(xì)的教程，很簡(jiǎn)單，需要的朋友可以參考下2017-08-10
Dreamweaver網(wǎng)頁(yè)怎么制作一個(gè)帶有列表值的下拉菜單?
Dreamweaver網(wǎng)頁(yè)怎么制作一個(gè)帶有列表值的下拉菜單？Dreamweaver設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，需要添加一個(gè)下拉菜單，并且給下拉菜單添加列表值，下面我們就來(lái)看看詳細(xì)的教程，需要的朋2017-08-10
Dreamweaver怎么給網(wǎng)站添加一個(gè)動(dòng)態(tài)橫幅效果?
Dreamweaver怎么給網(wǎng)站添加一個(gè)動(dòng)態(tài)橫幅效果？Dreamweaver中想要設(shè)計(jì)一個(gè)動(dòng)態(tài)橫幅，該怎么設(shè)計(jì)呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2017-07-27
Dreamweaver怎么設(shè)置html網(wǎng)頁(yè)段落行間距?
Dreamweaver怎么設(shè)置html網(wǎng)頁(yè)段落行間距？Dreamweaver中設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，發(fā)現(xiàn)文字段落間的行間距不適合，想要調(diào)節(jié)一下，下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2017-07-26
Dreamweaver8怎么修改網(wǎng)頁(yè)標(biāo)題?
Dreamweaver8怎么修改網(wǎng)頁(yè)標(biāo)題？設(shè)計(jì)的網(wǎng)頁(yè)是有標(biāo)題的，但是如果想要修改標(biāo)題，該怎么修改呢？下面我們就來(lái)看看Dreamweaver修改網(wǎng)頁(yè)標(biāo)題的教程，需要的朋友可以參考下2017-07-26
Dreamweaver CS6怎么使用項(xiàng)目列表?
Dreamweaver CS6怎么使用項(xiàng)目列表？Dreamweaver制作網(wǎng)頁(yè)內(nèi)容的時(shí)候，為了等級(jí)分明，需要使用項(xiàng)目列表，下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2017-07-26
