前端每日實(shí)戰(zhàn)：135# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)懸停時(shí)右移的按鈕特效

Tonny 發(fā)布于2019-08-29 16:44 / 995人閱讀

摘要：效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。可交互視頻此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。

效果預(yù)覽

按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。

https://codepen.io/comehope/pen/PdaNXw

可交互視頻

此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。

請(qǐng)用 chrome, safari, edge 打開觀看。

https://scrimba.com/p/pEgDAM/c3MV9Sa

源代碼下載

每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從 github 下載：

https://github.com/comehope/front-end-daily-challenges

代碼解讀

定義 dom，導(dǎo)航中包含一個(gè)無(wú)序列表，列表項(xiàng)中內(nèi)嵌一個(gè) span，文字寫在 span 中：


    
        home

居中顯示：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333;
}

隱藏列表項(xiàng)前端的引導(dǎo)符號(hào)：

nav ul {
    padding: 0;
    list-style-type: none;
}

設(shè)置按鈕的尺寸和顏色：

nav li {
    width: 8em;
    height: 2em;
    font-size: 25px;
    color: orange;
}

設(shè)置文字樣式，注意高度是 120%，span 比它父級(jí)的 li 要高一些：

nav li span {
    position: relative;
    box-sizing: border-box;
    width: inherit;
    height: 120%;
    top: -10%;
    background-color: #333;
    border: 2px solid;
    font-family: sans-serif;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: center;
}

將 span 元素稍向右移：

nav li span {
    transform: translateX(4px);
}

用列表項(xiàng) li 的左邊框畫出 1 條豎線：

nav li {
    box-sizing: border-box;
    border-left: 2px solid;
}

用列表項(xiàng)的偽元素再畫出 2 條豎線，它們的高度依次降低，至此，按鈕左側(cè)一共有 3 條豎線：

nav li {
    position: relative;
}

nav li::before,
nav li::after
 {
    content: "";
    position: absolute;
    width: inherit;
    border-left: 2px solid;
    z-index: -1;
}

nav li::before {
    height: 80%;
    top: 10%;
    left: -8px;
}

nav li::after {
    height: 60%;
    top: 20%;
    left: -14px;
}

將偽元素的 2 條豎線的顏色逐漸變暗，增加一點(diǎn)層次感：

nav li::before {
    filter: brightness(0.8);
}

nav li::after {
    filter: brightness(0.6);
}

增加鼠標(biāo)懸停效果，默認(rèn)狀態(tài)是按鈕遮住 3 條豎線，當(dāng)鼠標(biāo)懸停時(shí)，按鈕右移，露出 3 條豎線：

nav li:hover span {
    transform: translateX(4px);
}

nav li span {
    /* transform: translateX(4px); */
    transform: translateX(-16px);
    transition: 0.3s;
}

因?yàn)榘粹o默認(rèn)狀態(tài)的位置是偏左的，為了抵銷這個(gè)偏移量，讓列表項(xiàng)稍向右移：

nav ul {
    transform: translateX(16px);
}

在 dom 中再增加幾個(gè)按鈕：


    
        home
        products
        services
        contact

設(shè)置一下按鈕的間距：

nav li {
    margin-top: 0.8em;
}

大功告成！

GPU云服務(wù)器云服務(wù)器時(shí)右移如何用css 如何用云服務(wù)器做一個(gè)個(gè)人網(wǎng)站如何用vue開發(fā)實(shí)時(shí)音視頻

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/113951.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Tonny

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Pandas與openpyxl庫(kù)的超強(qiáng)結(jié)合，再見，Excel！

閱讀 1534·2021-09-10 10:51
[譯]HTML&CSS Lesson7: 設(shè)置背景和漸變色

閱讀 2884·2019-08-30 15:54
ie下帶滾動(dòng)條容器background屬性和border屬性的bug

閱讀 3429·2019-08-29 17:11
前端每日實(shí)戰(zhàn)：135# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)懸停時(shí)右移的按鈕特效

閱讀 996·2019-08-29 16:44
這么多前端優(yōu)化點(diǎn)你都記得住嗎？

閱讀 1474·2019-08-29 13:47
元素實(shí)現(xiàn)絕對(duì)居中的三種方法

閱讀 1138·2019-08-29 13:47
理解CSS浮動(dòng)與清理

閱讀 1541·2019-08-29 12:23
理解 BFC (Block Formatting Model)

閱讀 1149·2019-08-28 18:18

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端每日實(shí)戰(zhàn)：135# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)懸停時(shí)右移的按鈕特效

相關(guān)文章