网站给顶部添加彩色滚动条教程

admin 0

给网站添加彩色滚动条教程,这是几年前鹏仔写的代码,感觉太非主流了,今天打算去除效果,顺便备份下代码,因为截图展示不出来效果,所以本次就没有预览图了,大家自测。

将下方HTML和CSS代码复制,放置网站公共底部即可。

网站给顶部添加彩色滚动条教程-第1张图片-新锐站长网

原作者:百变鹏仔

HTML代码插入DIV代码

<div class="gundongtiao"></div>

CSS代码如下:

/*顶部彩色长条*/.gundongtiao{
    animation: gundongtiao 1s infinite linear;
    height:3px;
    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);
        }}


标签: 彩色 滚动条 添加 网站 教程

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~