修改网站鼠标样式，滚动条

演示为wordpress

样式参数看这里https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor

参数都添加到css中

外观-自定义
1.png

额外css
2.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/** 鼠标样式 开始**/
/** 普通指针样式**/
body {
cursor: url(//www.ucu520.top/shubiao/Office_Flat/Arrow.png), default;
}
/** 链接指针样式**/
a:hover{cursor:url(//www.ucu520.top/shubiao/Office_Flat/Hand.png), pointer;}
/** 指示文字可被选中指针样式**/
a:hover{cursor:url(//www.ucu520.top/shubiao/Office_Flat/IBeam.png), text;}
/** 可抓取指针样式**/
a:hover{cursor:url(//www.ucu520.top/shubiao/grab1.png), grab;}
/* * 放大指针样式*
a:hover{cursor:url(//www.ucu520.top/shubiao/zoom-in1.png), zoom-in;} */
/* * 缩小指针样式*
a:hover{cursor:url(//www.ucu520.top/shubiao/zoom-out1.png), zoom-out;} */
/* * 元素可任意方向滚动 （平移）.指针样式*
a:hover{cursor:url(//www.ucu520.top/shubiao/all-scroll1.png), all-scroll;} */
/** 鼠标样式 结束**/
 
/**自定义侧边滚动条**/
::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar {
  width: 10px;
}
/**背景色**/
::-webkit-scrollbar-track {
    background-image: linear-gradient( 135deg, #3C8CE7 10%, #00EAFF 100%);
	border:1px solid #ccc;
}
/** 初始色**/
::-webkit-scrollbar-thumb {
background-image: linear-gradient(316deg, #e200f5, #f56ec4, #fca590, #fad64e);
	border:1px solid #eee;
	height:100px;
	border-radius:5px;
}
/** 选中后**/
::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient( 135deg, #3C8CE7 10%, #00EAFF 100%);
}