css制作导航栏

最新推荐文章于 2023-02-04 17:21:55 发布

QingYun911

最新推荐文章于 2023-02-04 17:21:55 发布

阅读量246

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_42761735/article/details/83717002

版权

主要利用css中的transtion属性，在鼠标移动到时，改变伪元素的大小，字体的颜色

通过设置伪元素的阴影尺寸实现颜色收缩扩散的效果

<!DOCTYPE HTML>
<head>
    <meta charset="utf-8">
    <style>
//设置.nav , .tab , li的样式，浏览器一般会有默认的padding，所以.tab中的padding设置为0
            .nav {margin: 100px;}
            .tab {margin: 0 auto; width:400px; height:40px; border: 1px solid #ddd; border-radius: 10px;
                text-align:center; line-height:40px; padding: 0px; overflow: hidden;}
            .tab li {float: left;width:100px;position: relative;overflow: hidden;}
//设置li的伪元素，:before为竖线，:after为一个宽高为0的中心点，通过绝对位置absolute定位在li中
            .tab li::after, .tab li::before {content: ''}
            .tab li:not(:first-child)::before {position: absolute; left: 0; top:10px;width:1px; height:20px; background: #ddd;}
            .tab li::after {position: absolute; width:0px; height:0px; top:50%; left:50%; z-index: 1;}
//a设置为行内元素
            .tab li a {position: relative; display: inline; z-index: 2; font-size: 14px; color: black; text-decoration: none;}
            .tab li::after, .tab li::before , .tab li a {transition: all 0.5s ease-in-out}
//鼠标移至伪元素与a时的变化
            .tab li:hover::after {box-shadow: 0 0 0 100px #1202f7;}
            .tab li:hover::before, .tab li:hover+li::before {height: 0px; top:20px}
            .tab li:hover a {color: #ddd}
    </style>
</head>
<body>
    <div class='nav'>
        <ul class='tab'>
            <li><a href="">导航1</a></li>    
            <li><a href="">导航2</a></li>  
            <li><a href="">导航3</a></li>  
            <li><a href="">导航4</a></li>         
        </ul>
    </div>
</body>

QingYun911

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css制作导航栏

主要利用css中的transtion属性，在鼠标移动到时，改变伪元素的大小，字体的颜色通过设置伪元素的阴影尺寸实现颜色收缩扩散的效果 &lt;!DOCTYPE HTML&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt;//设置.nav , .tab , li的样式，浏览器一般会有默认的p...
复制链接

扫一扫