东京热成人网站_XX另类XX伦理XXAV_亚洲精品无码成人AAA片_高清av中文字幕无码_手机看片国产欧美日韩高清_bd美妙第进化型

咨詢(xún)電話(huà):
15628812133
22
2024/11

使用CSS3實(shí)現(xiàn)鼠標(biāo)懸停圖標(biāo)導(dǎo)航動(dòng)畫(huà)特效

發(fā)布時(shí)間:2024-11-22 15:26:32
發(fā)布者:神棍子
瀏覽量:
0

css3建一個(gè)具有鼠標(biāo)懸停動(dòng)畫(huà)效果的導(dǎo)航菜單,當(dāng)鼠標(biāo)懸停在每個(gè)列表項(xiàng)上時(shí),背景、圖標(biāo)和文本都會(huì)產(chǎn)生動(dòng)態(tài)變化,以增強(qiáng)用戶(hù)體驗(yàn)。

代碼實(shí)現(xiàn)效果

1.頁(yè)面結(jié)構(gòu):

   使用一個(gè)`<section>`標(biāo)簽作為整個(gè)導(dǎo)航菜單的容器,并為其添加`.business``.active`類(lèi)。

   `<section>`內(nèi)部使用一個(gè)`<div>`標(biāo)簽作為內(nèi)容容器,添加`.box`類(lèi)。

   內(nèi)部包含一個(gè)無(wú)序列表`<ul>`,每個(gè)列表項(xiàng)`<li>`代表一個(gè)服務(wù)選項(xiàng)。

2.樣式:

   使用CSS3`transition`屬性為背景、圖標(biāo)和文本添加平滑的過(guò)渡效果。

   利用`background-position`屬性改變背景圖的位置,實(shí)現(xiàn)懸停時(shí)的視覺(jué)變化。

   使用`clip`屬性對(duì)某些元素進(jìn)行裁剪,以實(shí)現(xiàn)特定的動(dòng)畫(huà)效果。

3.交互:

   當(dāng)鼠標(biāo)懸停在列表項(xiàng)上時(shí),通過(guò)改變`background-position``clip`屬性,使背景圖和圖標(biāo)發(fā)生變化。

   文本的顯示和隱藏通過(guò)改變`top`屬性和`transition-delay`屬性來(lái)實(shí)現(xiàn)。

 重點(diǎn)方法

 1. 基礎(chǔ)樣式重置:消除瀏覽器默認(rèn)的內(nèi)外邊距,確保所有元素在不同瀏覽器中表現(xiàn)一致。使用通配符選擇器``重置所有元素的內(nèi)外邊距,并移除鏈接的下劃線(xiàn)。

```css

 {

    padding: 0;

    margin: 0;

}

a, a:hover {

    text-decoration: none;

}

```

2. 導(dǎo)航欄基礎(chǔ)樣式:設(shè)置導(dǎo)航欄的寬度、居中顯示,并添加過(guò)渡效果。:使用`width``margin: 0 auto`使導(dǎo)航欄居中,`position: relative`確保子元素可以相對(duì)定位,`transition`屬性添加平滑過(guò)渡效果。

```css

.business .box {

    width: 1200px;

    margin: 0 auto;

    position: relative;

    transition: all .3s ease-in-out 0s;

}

```

 3. 列表項(xiàng)樣式:設(shè)置列表項(xiàng)的尺寸、間距、背景圖和顯示方式。使用`width``height`設(shè)置尺寸,`margin`設(shè)置間距,`background`設(shè)置背景圖,`overflow: hidden`確保溢出內(nèi)容不可見(jiàn),`display: inline-block`使列表項(xiàng)水平排列。

```css

.business .box ul.items li {

    width: 200px;

    height: 300px;

    margin: 0 8px;

    background: url(../images/bg_green.png) no-repeat 0px 400px;

    overflow: hidden;

    display: inline-block;

}

```

4. 圖標(biāo)樣式:設(shè)置圖標(biāo)的尺寸、位置和顯示方式。使用`display: block``position: relative`使圖標(biāo)塊級(jí)顯示并可相對(duì)定位,`margin`設(shè)置居中和頂部間距,`height`設(shè)置高度

```css

.business .box ul.items li i {

    display: block;

    position: relative;

    margin: 0 auto;

    margin-top: 43px;

    height: 69px;

}

```

 

5. 動(dòng)畫(huà)元素樣式:設(shè)置動(dòng)畫(huà)元素的尺寸、位置、背景圖和過(guò)渡效果。使用`display: block``position: absolute`使動(dòng)畫(huà)元素絕對(duì)定位,`width``height`設(shè)置尺寸,`margin-left`設(shè)置左側(cè)間距,`background`設(shè)置背景圖,`transition`屬性添加平滑過(guò)渡效果。

```css

.business .box ul.items li u {

    display: block;

    position: absolute;

    width: 156px;

    height: 156px;

    margin-left: 22px;

    background: url(../images/words.png) no-repeat 0px -363px;

    transition: all .5s ease-in-out 0s;

}

```

 6. 裁剪區(qū)域:通過(guò)裁剪實(shí)現(xiàn)特定的動(dòng)畫(huà)效果。使用`clip`屬性定義裁剪區(qū)域,`.active`類(lèi)改變裁剪區(qū)域的大小,實(shí)現(xiàn)動(dòng)畫(huà)效果。

```css

.business .box ul.items li u.cl { clip: rect(0px,156px,-10px,78px); }

.business.active .box ul.items li u.cl { clip: rect(0px,156px,156px,78px); }

.business .box ul.items li u.cr { clip: rect(156px,78px,156px,0px); }

.business.active .box ul.items li u.cr { clip: rect(0px,78px,156px,0px); }

```

7. 文本樣式:設(shè)置標(biāo)題和描述文本的樣式。使用`display: block``text-align: center`使文本居中顯示,`font-size``line-height`設(shè)置字體大小和行高,`position: relative``top`設(shè)置垂直位置。

```css

.business .box ul.items li strong {

    display: block;

    margin-top: 70px;

    font-size: 16px;

    font-weight: normal;

    text-align: center;

}

.business .box ul.items li p {

    position: relative;

    top: 200px;

    color: white;

    font-family: Arial, "宋體";

    font-size: 12px;

    line-height: 20px;

    text-align: center;

}

```

 

8. 鼠標(biāo)懸停效果:當(dāng)鼠標(biāo)懸停在列表項(xiàng)上時(shí),改變背景圖位置和圖標(biāo)樣式。使用`background-position`改變背景圖位置,`transition`屬性添加平滑過(guò)渡效果,`hover`偽類(lèi)觸發(fā)懸停效果。

```css

.business .box ul.items li:hover {

    background-position: 0px 0px;

    transition: all .5s ease-in-out .3s;

}

.business .box ul.items li:hover i {

    transition: all .5s ease-in-out .4s;

}

```

 

9. 特定類(lèi)型圖標(biāo)的變化:當(dāng)鼠標(biāo)懸停在特定類(lèi)型的列表項(xiàng)上時(shí),改變圖標(biāo)背景圖的位置。使用`background-position`改變背景圖位置,`hover`偽類(lèi)觸發(fā)懸停效果。

```css

.business .box ul.items li.pc:hover i { background-position: -168px -357px; }

.business .box ul.items li.mobi:hover i { background-position: -337px -291px; }

.business .box ul.items li.sys:hover i { background-position: -327px -362px; }

.business .box ul.items li.app:hover i { background-position: -164px -439px; }

.business .box ul.items li.host:hover i { background-position: -335px -439px; }

```

10. 文本顏色變化及延遲:當(dāng)鼠標(biāo)懸停在列表項(xiàng)上時(shí),改變標(biāo)題文本的顏色,并添加延遲效果。使用`color`改變文本顏色,`transition-delay`屬性添加延遲效果。

```css

.business .box ul.items li:hover strong {

    color: white;

    transition-delay: .4s;

}

```

11. 描述文字的動(dòng)畫(huà)效果:當(dāng)鼠標(biāo)懸停在列表項(xiàng)上時(shí),改變描述文本的垂直位置,并添加平滑過(guò)渡效果。使用`top`改變垂直位置,`transition`屬性添加平滑過(guò)渡效果,`transition-delay`屬性添加延遲效果。

```css

.business .box ul.items li:hover p {

    top: 20px;

    transition: all .3s ease-in-out .5s;

}

```

 總結(jié)

通過(guò)上述方法,實(shí)現(xiàn)了鼠標(biāo)懸停時(shí)背景、圖標(biāo)和文本的動(dòng)態(tài)變化效果,增強(qiáng)了用戶(hù)的交互體驗(yàn)。主要利用了CSS3`transition`、`background-position``clip`等屬性來(lái)實(shí)現(xiàn)這些效果。





返回列表