卓越飞翔博客值得注意的是，这不是求助进度条动画效果，而是滚动条带动画效果，
然而我发现关于滚动条动画效果的文章资料几乎没有，更别说用纯css实现，更有趣的是webkit-scrollbar竟然不支持调用keyframes动画属性
最终不得已使用gif素材代替实现，废话到此结束，感兴趣的拿去玩吧。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>CSS求助，帮忙写个滚动条的动画</title>
<style>
html,body {
background-color:#a8a4a4;
}
h3 {
text-align: center;
}
.scrollbar {
width:700px;
height:300px;
overflow:auto;
margin-bottom:20px;
margin: 0 auto;
}
.scrollbar div {
width:900px;
height:500px;
}
/*滚动条整体样式*/
/*高宽分别对应横竖滚动条的尺寸*/
.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;
}
</style>
</head>
<body>
<h3>CSS求助，帮忙写个滚动条的动画 https://www.srzxkj.com</h3>
<div class="test test-5">
<div class="scrollbar">
<div>
<p>雨说：四月已在大地上等待久了…… 等待久了的田圃跟牧场 等待久了的鱼塘和小溪 当田圃冷冻了一冬禁锢着种子 牧场枯黄失去牛羊的踪迹 当鱼塘寒浅留滞着游鱼 小溪渐渐喑哑歌不成调子 雨说，我来了，我来探访四月的大地 我来了，我走得很轻，而且温声细语的 我的爱心像丝缕那样把天地织在一起 我呼唤每一个孩子的乳名又甜又准 我来了，雷电不喧嚷，风也不拥挤</p>
<p>当我临近的时候你们也许知悉了 可别打开油伞将我抗拒 别关起你的门窗，放下你的帘子 别忙着披蓑衣，急着戴斗笠 雨说：我是到大地上来亲近你们的 我是四月的客人带来春的洗礼 为什么不扬起你的脸让我亲一亲 为什么不跟着我走，踩着我脚步的拍子？ 跟着我去踩田圃的泥土将润如油膏 去看牧场就要抽发忍冬的新苗 绕着池塘跟跳跃的鱼儿说声好 去听听溪水练习新编的洗衣谣</p>
<p>雨说：我来了，我来的地方很遥远 那儿山峰耸立，白云满天 我也曾是孩子和你们一样地爱玩可是，我是幸运的 我是在白云的襁褓中笑着长大的 第一样事儿，我要教你们勇敢地笑啊 君不见，柳条儿见了我笑弯了腰啊 石狮子见了我笑出了泪啊 小燕子见了我笑斜了翅膀啊 第二样事，我还是要教你们勇敢地笑 那旗子见了我笑的哗啦啦地响 只要旗子笑，春天的声音就有了 只要你们笑，大地的希望就有了 雨说，我来了，我来了就不再回去 当你们自由地笑了，我就快乐地安息 有一天，你们吃着苹果擦着嘴 要记着，你们嘴里的那份甜呀，就是我祝福的心意</p>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>CSS求助，帮忙写个滚动条的动画</title>
<style>
html,body {
background-color:#a8a4a4;
}
h3 {
text-align: center;
}
.scrollbar {
width:700px;
height:300px;
overflow:auto;
margin-bottom:20px;
margin: 0 auto;
}
.scrollbar div {
width:900px;
height:500px;
}
/*滚动条整体样式*/
/*高宽分别对应横竖滚动条的尺寸*/
.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;
}
</style>
</head>
<body>
<h3>CSS求助，帮忙写个滚动条的动画 https://www.srzxkj.com</h3>
<div class="test test-5">
<div class="scrollbar">
<div>
<p>雨说：四月已在大地上等待久了…… 等待久了的田圃跟牧场 等待久了的鱼塘和小溪 当田圃冷冻了一冬禁锢着种子 牧场枯黄失去牛羊的踪迹 当鱼塘寒浅留滞着游鱼 小溪渐渐喑哑歌不成调子 雨说，我来了，我来探访四月的大地 我来了，我走得很轻，而且温声细语的 我的爱心像丝缕那样把天地织在一起 我呼唤每一个孩子的乳名又甜又准 我来了，雷电不喧嚷，风也不拥挤</p>
<p>当我临近的时候你们也许知悉了 可别打开油伞将我抗拒 别关起你的门窗，放下你的帘子 别忙着披蓑衣，急着戴斗笠 雨说：我是到大地上来亲近你们的 我是四月的客人带来春的洗礼 为什么不扬起你的脸让我亲一亲 为什么不跟着我走，踩着我脚步的拍子？ 跟着我去踩田圃的泥土将润如油膏 去看牧场就要抽发忍冬的新苗 绕着池塘跟跳跃的鱼儿说声好 去听听溪水练习新编的洗衣谣</p>
<p>雨说：我来了，我来的地方很遥远 那儿山峰耸立，白云满天 我也曾是孩子和你们一样地爱玩可是，我是幸运的 我是在白云的襁褓中笑着长大的 第一样事儿，我要教你们勇敢地笑啊 君不见，柳条儿见了我笑弯了腰啊 石狮子见了我笑出了泪啊 小燕子见了我笑斜了翅膀啊 第二样事，我还是要教你们勇敢地笑 那旗子见了我笑的哗啦啦地响 只要旗子笑，春天的声音就有了 只要你们笑，大地的希望就有了 雨说，我来了，我来了就不再回去 当你们自由地笑了，我就快乐地安息 有一天，你们吃着苹果擦着嘴 要记着，你们嘴里的那份甜呀，就是我祝福的心意</p>
</div>
</div>
</div>
</body>
</html>
