中文字幕一区二区三区在线中文-日本中文字幕 在线观看-欧美日韩国产亚洲综合-性色AV一二三天美传媒

廣州總部電話(huà):020-85564311
20年
互聯(lián)網(wǎng)應(yīng)用服務(wù)商
廣州總部電話(huà):020-85564311
20年
互聯(lián)網(wǎng)應(yīng)用服務(wù)商
請(qǐng)輸入搜索關(guān)鍵詞
知識(shí)庫(kù) 知識(shí)庫(kù)

優(yōu)網(wǎng)知識(shí)庫(kù)

探索行業(yè)前沿,共享知識(shí)寶庫(kù)

HTML&CSS :如此絲滑優(yōu)雅的導(dǎo)航欄

發(fā)布日期:2025-02-06 13:57:01 瀏覽次數(shù): 1020 來(lái)源:前端Hardy

这段代码创建了一个动态的导航栏,通过 CSS 技术实现了按钮的激活和悬停效果,以及动态背景效果,为页面添加了视觉吸引力和用户交互体验。


大家复制代码时,可能会因格式转换出现错乱,导致样式失效。建议先少量复制代码进行测试,若未能解决问题,私信我,我会发送完整的压缩包给你

演示效果

HTML&CSS

<!DOCTYPE html>
<htmllang="en">

<head>
    <metacharset="UTF-8">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>公众号关注:前端Hardy</title>
    <style>
        body {
            margin0;
            padding0;
            background-color#075985;
            display: flex;
            align-items: center;
            justify-content: center;
            height100vh;
        }

        nav {
            --_width50px;
            --_padding1rem;
            --_speed300ms;
            --_f-size1.5rem;
            --_clr-borderrgba(255255255, .3);
            --_clr-bg-rgb2623;
            --_clr-frgb(255255255);

            display: flex;
            border1px solid var(--_clr-border);
            border-radius20px;
            padding-inlinevar(--_padding);
            background-colorrgb(var(--_clr-bg-rgb));
            position: relative;
            isolation: isolate;
        }

        @media (min-width:600px) {
            nav {
                --_width100px;
                --_f-size2rem;
            }
        }

        button {
            border: none;
            padding: none;
            background: transparent;
            colorvar(--_clr-f);
            cursor: pointer;
            font-sizevar(--_f-size) !important;
            widthvar(--_width);
            aspect-ratio3/2;
            opacity0.5;
            transition:
                opacity var(--_speed) ease-in-out,
                width var(--_speed) ease-in-out;
            display: grid;
            place-content: center;
        }

        button>span {
            scalevar(--_speed) ease-in-out;
            font-size14px;
        }

        button.active,
        button:hover {
            opacity1;
        }

        button.active>span,
        button:hover>span {
            scale1.15;
            pointer-events: none;
        }

        nav::before,
        nav::after {
            content'';
            position: absolute;
            top: -25%;
            leftvar(--_padding);
            widthvar(--_width);
            aspect-ratio1;
            z-index: -1;
            border-top1px solid var(--_clr-border);
            border-bottom1px solid var(--_clr-border);
            border-radius999px;
            transformtranslateX(calc(var(--_x, 2) * 100%));
            transition:
                transform var(--_speed) ease-in-out,
                width var(--_speed) ease-in-out,
                opacity var(--_speed) ease-in-out;
        }

        nav::before {
            --_xvar(--_x-active);
            background-colorrgb(var(--_clr-bg-rgb));
        }

        nav::after {
            --_xvar(--_x-hover);
            background-colorrgba(var(--_clr-bg-rgb), .4);
            opacity0;
        }

        nav:has(button:nth-child(1).active)::before {
            --_x-active0;
        }

        nav:has(button:nth-child(2).active)::before {
            --_x-active1;
        }

        nav:has(button:nth-child(3).active)::before {
            --_x-active2;
        }

        nav:has(button:nth-child(4).active)::before {
            --_x-active3;
        }

        nav:has(button:nth-child(5).active)::before {
            --_x-active4;
        }

        nav:has(button:nth-child(1):hover)::after {
            --_x-hover0;
            opacity1;
        }

        nav:has(button:nth-child(2):hover)::after {
            --_x-hover1;
            opacity1;
        }

        nav:has(button:nth-child(3):hover)::after {
            --_x-hover2;
            opacity1;
        }

        nav:has(button:nth-child(4):hover)::after {
            --_x-hover3;
            opacity1;
        }

        nav:has(button:nth-child(5):hover)::after {
            --_x-hover4;
            opacity1;
        }
    
</style>
</head>

<body>
    <nav>
        <buttontype="button"><spanclass="">首页</span></button>
        <buttontype="button"><spanclass="">钱包</span></button>
        <buttontype="button"><spanclass=" active">金融</span></button>
        <buttontype="button"><spanclass="">商城</span></button>
        <buttontype="button"><spanclass="">我的</span></button>
    </nav>
    <script>
        document.querySelector("nav").addEventListener("click", (e) => {
            if (e.target.tagName == "BUTTON") {
                document.querySelector("nav .active").classList.remove("active");
                e.target.classList.add("active");
            }
        });
    
</script>
</body>

</html>

HTML 结构

  • body: 包含页面的可见内容。
  • nav: 创建一个 nav 元素,用于包含导航栏的各个按钮。
  • 五个 button: 每个 button 代表一个导航按钮,包含一个 span 元素显示按钮文本。
  • span: 显示按钮的文本内容。

CSS 样式

  • body: 设置页面的边距、填充、背景色、显示方式和对齐方式。
  • nav: 设置导航栏的样式,包括宽度、内边距、边框、圆角、背景色和位置。
  • @media (min-width: 600px): 媒体查询,当屏幕宽度大于 600px 时,调整导航栏的宽度和字体大小。
  • button: 设置按钮的样式,包括边框、背景、颜色、光标、字体大小、宽度、比例、透明度和过渡效果。
  • button>span: 设置按钮文本的样式,包括缩放和字体大小。
  • button.active, button:hover: 设置按钮在激活或悬停时的样式,包括透明度。
  • button.active>span, button:hover>span: 设置按钮文本在激活或悬停时的样式,包括缩放。
  • nav::before, nav::after: 设置导航栏的伪元素,用于创建动态背景效果。
  • nav::before: 设置导航栏的背景效果,包括位置、宽度、比例、边框、圆角和背景色。
  • nav::after: 设置导航栏的悬停背景效果,包括位置、宽度、比例、边框、圆角和背景色。
  • nav:has(button:nth-child(n).active)::before: 设置导航栏的背景效果,根据激活的按钮位置调整。
  • nav:has(button:nth-child(n):hover)::after: 设置导航栏的悬停背景效果,根据悬停的按钮位置调整。

JavaScript 部分

  • 添加一个事件监听器,当点击导航栏中的按钮时,移除当前激活按钮的 active 类,并为被点击的按钮添加 active 类。

優(yōu)網(wǎng)科技,優(yōu)秀企業(yè)首選的互聯(lián)網(wǎng)供應(yīng)服務(wù)商

優(yōu)網(wǎng)科技秉承"專(zhuān)業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營(yíng)理念,誠(chéng)信務(wù)實(shí)的服務(wù)了近萬(wàn)家客戶(hù),成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴!

優(yōu)網(wǎng)科技成立于2001年,擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類(lèi)業(yè)務(wù)系統(tǒng)深度整合,致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)(品牌展示型、官方門(mén)戶(hù)型、營(yíng)銷(xiāo)商務(wù)型、電子商務(wù)型、信息門(mén)戶(hù)型、微信小程序定制開(kāi)發(fā)、移動(dòng)端應(yīng)用(手機(jī)站、APP開(kāi)發(fā))、微信定制開(kāi)發(fā)(微信官網(wǎng)、微信商城、企業(yè)微信)等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。


我要投稿

姓名

文章鏈接

提交即表示你已閱讀并同意《個(gè)人信息保護(hù)聲明》

專(zhuān)屬顧問(wèn) 專(zhuān)屬顧問(wèn)
掃碼咨詢(xún)您的優(yōu)網(wǎng)專(zhuān)屬顧問(wèn)!
專(zhuān)屬顧問(wèn)
馬上咨詢(xún)
聯(lián)系專(zhuān)屬顧問(wèn)
聯(lián)系專(zhuān)屬顧問(wèn)
聯(lián)系專(zhuān)屬顧問(wèn)
掃一掃馬上咨詢(xún)
掃一掃馬上咨詢(xún)

掃一掃馬上咨詢(xún)

和我們?cè)诰€(xiàn)交談!