给网站顶部添加彩色小长条小效果

最近访问一些优秀的博客或者其他网站,很多站点的导航顶部,都会加一个彩色的长条,反正挺好看的,既然是代码添加的,那么就给大家分析下如何添加。
首先,我们需要图片,直接贴出来吧,需要的请直接右键另存为。
接着,在网站顶部适当位置添加一个Div,自定义一个id,当然你用class问题也不大。我命名的id为top-geek
添加以下CSS代码到样式表,当然,如果你的主题支持自定义样式就添加到自定义样式里。

#top-grrk{
background:url(/img/2.gif);
height:4px;
margin-top:21px;
position:fixed;
width:100%;
Z-index:10;
}

样式解析:
height:4px; 为高,您可以设置您想要的高度。
width:100%; 页面有多宽,他就显示多宽。
position: fixed; 是将这个div脱离文档流,当脱离文档流之后,使用 top:0; 将他放置页面最上方,从而达到吸顶效果,在设置 left:0; 是把他放置页面最左边开始。
z-index:9999; 是将他层叠属性变成最大的,显示在最上方,从而达到不会被遮挡的效果。
background: url(); 用来引入图片,图片放置下方,大家可自行右击下载保存到自己的本地上传至服务器,将 括号 里图片连接更换即可。
还有一种方式,闲的无聊,用c3动画给大家写了一个跑动的滚动条,代码如下

.gundongtiao{
    animation: gundongtiao 1s infinite linear;
    height:10px;
    top:0;
    left:0;
    position: fixed;
    width:100%;
    z-index:9999;
}
@keyframes gundongtiao{
        0%{
            background: #000 linear-gradient(to left, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
        }
        20%{
            background: #000 linear-gradient(to left, #ff2d55,#4cd964, #5ac8fa, #007aff, #34aadc,#5856d6);
        }
        40%{
            background: #000 linear-gradient(to left, #5856d6,#ff2d55,#4cd964, #5ac8fa, #007aff, #34aadc);
        }
        60%{
            background: #000 linear-gradient(to left, #34aadc,#5856d6,#ff2d55,#4cd964, #5ac8fa, #007aff);
        }
        80%{
            background: #000 linear-gradient(to left, #007aff,#34aadc,#5856d6,#ff2d55,#4cd964, #5ac8fa);
        }
        100%{
            background: #000 linear-gradient(to left, #5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55,#4cd964);
        }
}
<div class="gundongtiao"></div>

效果展示如下:

本文作者:酷酷的二货

本文链接:https://www.n-1.cn/78.html

版权声明:所有文章均采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。 您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。

如果博客部分文章出现空白或异常,请留言或者联系博主修复。
最后修改:2019 年 09 月 03 日 08 : 12 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论