华而不实的导航栏制作 css+js

今天我们做一个特别的导航栏，每一秒都是想不到的效果

赛博风导航栏

一、准备工作

首先准备一个文件夹来存放我们的代码，新建一个html文件和一个css文件

在html文件中，把大致的导航栏制作出来

二、样式编写 

 初始效果做出来后，我们在css文件中添加我们的样式

我们先将样式进行初始化，删除所有的默认样式，为背景添加属性

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins',sans-serif;
}

body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #252839;
}

 初始样式完成后，开始为导航栏添加布局（使它为竖着的布局）

ul
{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

ul li 
{
    position: relative;
    list-style: none;
}

完成后做前面的小滑块

ul li a 
{
    position: relative;
    font-size: 3em;
    text-decoration: none;
    color: #fff2;
    letter-spacing: 0.25em;
    line-height: 1em;
    text-transform: capitalize;
}

滑块的样式完成后，设置滑块的动画样式，使滑块从左滑到右

ul li a::before
{
    content: attr(data-text);
    position: absolute;
    color: var(--cr);
    width: 0;
    overflow: hidden;
    border-right: 6px solid var(--cr);
    transition: 1s
}

/* 滑块滑动 */
ul li a:hover::before
{
    width: 100%;
    filter: drop-shadow(0 0 25px var(--cr));
}

完成后，做js部分的动画效果，使导航栏文字部分可以随机点亮

先在原来的html代码中添加一些属性和值

完成后，开始编写js

   <script>
        let text = document.querySelectorAll('ul li a').forEach(text=> 
        {
            text.innerHTML = text.innerText.split('').map
            ((letters,i)=> `<span>${letters}</span>`).join('');
            let spn = document.querySelectorAll('ul li a span').
            forEach(e => {
                let duration = Math.random() * 5;   //随机的范围
                e.style.animationDuration = 0.25+duration+'s';
                e.style.animationDelay = 0.25+duration+'s';
            })

        })
    </script>

在原先的css中添加动画的启动样式，使js能够在页面中运行

ul li a span 
{
    position: relative;
    animation: animateText linear infinite;
}

ul:hover li a span
{
    opacity: 0.15;
    animation-play-state: paused;
} 

@keyframes animateText
{
    0%,20%
    {
        color: #fff2;
        filter: drop-shadow(0 0 0 var(--cr));
    }
    21.001%,79.999%
    {
        color: var(--cr);
        filter: drop-shadow(0 0 25px var(--cr));
    }
    80%,100%
    {
        color: #fff2;
        filter: drop-shadow(0 0 0 var(--cr));
    }
}

 最后完成导航栏的制作

三、总结

这个导航栏可以增加页面的互动性，使用户可以为该页面停留下来。这次的代码中，逻辑还不够完美。在编写代码时，要注意js的逻辑。一定要把css文件引入到html文件中！！！