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

网红业务平台

专业的网络业务代刷平台

立即前往
首页 » 技术教程 » 正文

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

最近访问一些优秀的博客或者其他网站,很多站点的导航顶部,都会加一个彩色的长条,反正挺好看的,既然是代码添加的,那么鹏仔给大家分析下如何添加。

第一种方法: 用背景图方式,可添加动态gif图,附代码

将此代码放置你网站所有页面有公共部分页面的body中即可

方法中

    height:4px; 为高,您可以设置您想要的高度。

    width:100%; 页面有多宽,他就显示多宽。

    position: fixed; 是将这个div脱离文档流,当脱离文档流之后,使用 top:0; 将他放置页面最上方,从而达到吸顶效果,在设置 left:0; 是把他放置页面最左边开始。

    z-index:9999; 是将他层叠属性变成最大的,显示在最上方,从而达到不会被遮挡的效果。

    background: url(); 用来引入图片,图片放置下方,大家可自行右击下载保存到自己的本地上传至服务器,将 括号 里图片连接更换即可。

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

再来说说第二种: 第二种方法和第一种方法差不多,只是将图换成多个颜色作为背景色,依次显示,附代码如下

两种方法应该很好掌握,具体一下属性使用方法如下

position 属性相关 sharedblog.cn/?post=23

背景类属性相关 sharedblog.cn/?post=115

上方第二种,是静态的滚动条,闲的无聊,用c3动画给大家写了一个跑动的滚动条,代码如下

CSS代码
.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);
        }
}
HTML代码

作者:鹏仔先生

        需要技术支持可以联系鹏仔呦!

QQ:344225443

免责声明:本站提供的软件、教程仅限学习和研究;不得用于商业或非法用途,否则一切后果请用户自负,如有侵权请邮件与我们联系处理

评论 抢沙发

评论前必须登录!

  注册



切换注册

登录

忘记密码 ?

切换登录

注册