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);
        }
}


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

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯