Q站资源网

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

作者：百变鹏仔日期：2023-04-13 17:57:14浏览：1108分类：网站建设

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

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

不懂操作可免费咨询鹏仔 QQ：344225443

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

/*顶部彩色长条*/
.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);
        }
}

【AD】：花呗、白条、信用卡等低价提现...

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

免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理，本文部分文字与图片资源来自于网络，转载此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益，请立即通知我们(管理员邮箱：344225443@qq.com)，情况属实，我们会第一时间予以删除，并同时向您表示歉意,谢谢!