网页效果滚动条和鼠标样式 - YunFanCH

网站首页 » 建站 » 网页效果滚动条和鼠标样式

网页效果滚动条和鼠标样式

2021-03-18

鼠标样式 CSS 代码
要想要自己想要的鼠标样式可在网上找 cur 是的鼠标样式文件

<style>
body{cursor:url('http://wailian.oioweb.cn/down.php/423c33c9347506c3b04b0a47d1924ffe.cur'), default;}
a:hover{cursor:url('http://wailian.oioweb.cn/down.php/ba02ccded589512bf7a4df6c3a0d067d.cur'), pointer;}
</style>

滚动条样式 CSS 代码

@charset "utf-8";
/* CSS Document */
/*—滚动条默认显示样式–*/
::-webkit-scrollbar-thumb{
background-color:#696969;
height:50px;
outline-offset:-2px;
outline:2px solid #F5F5F5;
-webkit-border-radius:4px;
border: 2px solid #F5F5F5;
}
 
/*—鼠标点击滚动条显示样式–*/
::-webkit-scrollbar-thumb:hover{
background-color:#DB7093;
height:50px;
-webkit-border-radius:4px;
}
 
/*—滚动条大小–*/
::-webkit-scrollbar{
width:10px;
height:18px;
}
 
/*—滚动框背景样式–*/
::-webkit-scrollbar-track-piece{
background-color:#F5F5F5;
-webkit-border-radius:0;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
    width: 3px;
    height: 16px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}