导航栏滚动渐变效果 html+css+js

最新推荐文章于 2025-04-17 19:37:20 发布

原创

最新推荐文章于 2025-04-17 19:37:20 发布 · 2.3w 阅读

104

406 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #导航栏 #js #渐变

该博客介绍了使用HTML、CSS和JS实现导航栏渐变效果的方法。先定义导航栏文字标签，设置整体及各部分样式，包括过渡效果、文字间距等。还介绍了滚动后导航栏样式变化，最后通过简单JS代码实现渐变效果，给出两种写法并解释相关属性。

先看效果：

在这里插入图片描述

实现：

1.定义导航栏的文字标签：

<div class="tou">
        <sapn class="logo"> 北极光。</sapn>
        <ul class="biao">
        <li><a href="#"><a href="#">主页</a></li>
        <li><a href="#">个人简介</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">留言版</a></li>
        <li><a href="#">友链</a></li>
        </ul>
    </div>

2.导航栏整体的样式：

 .tou{
   
   
             position: fixed;
             top: 0;
             left: 0;
             padding: 25px 100px;
             width: 100%;
             display: flex;
             justify-content: space-between;
             align-items: center;
            transition:  0.5s;
         }

transition 过渡效果
3.北极光这个logo的样式：

 .logo{
   
   
             position: relative;
             font-size:<

最低0.47元/天解锁文章