CSS滚动条动画

代码:

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

滚动条素材: