【html特效】css美化滚动条带条纹动画效果

Takitooru · 发表于 2022-9-24 17:31

本帖最后由 Takitooru 于 2022-9-26 10:25 编辑

起因，看见网友一个比较有趣的技术求助悬赏

CSS求助，帮忙写个滚动条的动画
https://www.52pojie.cn/thread-1692069-1-1.html
(出处: 吾爱破解论坛)

值得注意的是，这不是求助进度条动画效果，而是滚动条带动画效果，
然而我发现关于滚动条动画效果的文章资料几乎没有，更别说用纯css实现，更有趣的是webkit-scrollbar竟然不支持调用keyframes动画属性
最终不得已使用gif素材代替实现，废话到此结束，感兴趣的拿去玩吧。

附件压缩包在帖子结尾

主要核心代码

/*滚动条整体样式*/
  /*高宽分别对应横竖滚动条的尺寸*/
  .scrollbar::-webkit-scrollbar {
    width:15px;
    height:15px;
}
/*滚动条里面小方块*/
 /*水平滚动条*/
  .scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-radius:10px;
    background-color:skyblue;
    background-image:url('tiaowen-x.gif');
    background-repeat:repeat-x;
}
/*垂直滚动条*/
  .scrollbar::-webkit-scrollbar-thumb:vertical {
    border-radius:10px;
    background-color:skyblue;
    background-image:url('tiaowen-y.gif');
    background-repeat:repeat-y;
}
/*滚动条里面轨道*/
  .scrollbar::-webkit-scrollbar-track {
    box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
    background:#ededed;
    border-radius:10px;
}
/*边角，两个滚动条交汇处小方块*/
.scrollbar::-webkit-scrollbar-corner {
    background:none;
}

gif效果演示图