【暗黑导航条】

最新推荐文章于 2024-10-25 15:04:44 发布

TWenYuan

最新推荐文章于 2024-10-25 15:04:44 发布

阅读量148

点赞数

分类专栏： CSS 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/TWenYuan/article/details/127012905

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了一种创建暗黑风格导航条的方法，包括使用HTML和CSS实现动态效果。通过设置不同的样式和过渡动画，当鼠标悬停在导航链接上时，导航条的元素会发生位置变化，同时提供了两种背景图片的显示方式。代码详细展示了如何构建这种导航条，适合前端开发者学习参考。

摘要由CSDN通过智能技术生成

暗黑导航条
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航条（写法1）</title>
    <style>
        .box {
            width: 1000px;
            height: 66px;
            background-color: #151515;
            border-bottom: 1px solid #464646;
            margin: 50px auto;
            border-radius: 6px;

        }

        .nav {
            width: 1000px;
            height: 60px;
            background-color: #1f1f1f;
            border-bottom: 1px solid #000;
            border-radius: 6px;
            box-shadow: 0 10px 10px rgb(0, 0, 0) inset;
            position: relative;
        }

        .text {
            width: 800px;
            height: 60px;
            position: absolute;
            left: 50%;
            margin-left: -400px;
            top: 0;
            /* 鼠标形状变成小手 */
            cursor: pointer;
        }

        .li {
            width: 120px;
            height: 60px;
            float: left;
            text-align: center;
            line-height: 60px;
            color: white;
            font-size: 20px;

        }
        .li:hover{
            text-shadow: 0px 0px 20px #00D3FF;
        }

        .line {
            width: 2px;
            height: 60px;
            /* background-color: white; */
        }

        .lineLift {
            width: 1px;
            height: 60px;
            background: radial-gradient(#0a0a0a 30%  ,transparent 60%);  //颜色渐变
            float: left;
        }

        .linrRihgt {
            width: 1px;
            height: 60px;
            background: radial-gradient(#343333 30% , transparent 50%);
            float: left;
        }

        .li:nth-child(1) .line {
            float: right;
        }

        .li:nth-child(2) .line {
            float: right;
        }

        .li:nth-child(3) .line {
            float: right;
        }

        .li:nth-child(4) .line {
            float: right;
        }
        写法一：
        .pic{
            width: 120px;height: 16px;
            position: absolute;
            left: 0;
            top: 0;
            transition: 0.6s;
        }
        写法二：
        /* 与写法一的区别在这 */
        .pic{
            width: 120px;
            height: 16px;
            /* 添加背景图片 */
           background-image: url("img/导航条 1.png");
           /* 背景图片的平铺效果为：不平铺 */
            background-repeat: no-repeat;
            /* 背景图片位置：水平位置 垂直位置  */
            background-position: center top;
            position: absolute;
            left: 0;
            transition: 0.6s;
        }

        .li:nth-child(2):hover~.pic{
            left: 122px;
        }
        .li:nth-child(3):hover~.pic{
            left: 244px;
        }
        .li:nth-child(4):hover~.pic{
            left: 366px;
        }
    </style>
</head>

<body style="background-color: #212121;">
    <div class="box">
        <div class="nav">
            <div class="text">
                <!-- ************************ -->
                <div class="li">首页
                    <div class="line">
                        <div class="lineLift"></div>
                        <div class="linrRihgt"></div>
                    </div>
                </div>
                <div class="li">英雄联盟
                    <div class="line">
                        <div class="lineLift"></div>
                        <div class="linrRihgt"></div>
                    </div>
                </div>
                <div class="li">和平精英
                    <div class="line">
                        <div class="lineLift"></div>
                        <div class="linrRihgt"></div>
                    </div>
                </div>
                <div class="li">穿越火线
                    <div class="line">
                        <div class="lineLift"></div>
                        <div class="linrRihgt"></div>
                    </div>
                </div>
                <!-- 写法一********************************* -->
                <div class="pic">
                    <img src="img\导航条 1.png" style="margin-left:28px ;">
                </div>
                <!-- 写法二********************************* -->
                <div class="pic"></div>
            </div>
        </div>
    </div>
</body>

</html>