选择合适的鼠标光标
?> 背景知识：
cursor
<script v-pre type="text/x-template" id="mouse-cursor">
<style>
main {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
main > span {
width: 100px; height: 100px;
display: flex;
justify-content: center;
align-items: center;
margin: 8px;
border-radius: 50%;
font-weight: 600;
transform: translate3d(0, 0, 0);
transition: all .3s ease-in-out;
background: #eee url("data:image/svg+xml,\
\
\
\
\
");
background-size: 12px 12px;
}
main > span:hover {
transform: translate3d(-1px, -1px, 0) scale(1.05);
box-shadow: -2px -2px 6px 2px rgba(108, 108, 108, 0.1) inset,
0 0 0 5px rgba(255, 255, 255, .6) inset,
0 0 0 1px rgba(139, 139, 139, 0.1),
2px 2px 10px rgba(0,0,0,.2);
}
main > span:nth-of-type(1) {
cursor: default;
}
main > span:nth-of-type(2) {
cursor: crosshair;
}
main > span:nth-of-type(3) {
cursor: help;
}
main > span:nth-of-type(4) {
cursor: move;
}
main > span:nth-of-type(5) {
cursor: pointer;
}
main > span:nth-of-type(6) {
cursor: progress;
}
main > span:nth-of-type(7) {
cursor: text;
}
main > span:nth-of-type(8) {
cursor: wait;
}
main > span:nth-of-type(9) {
cursor: e-resize;
}
main > span:nth-of-type(10) {
cursor: ne-resize;
}
main > span:nth-of-type(11) {
cursor: nw-resize;
}
main > span:nth-of-type(12) {
cursor: n-resize;
}
main > span:nth-of-type(13) {
cursor: se-resize;
}
main > span:nth-of-type(14) {
cursor: sw-resize;
}
main > span:nth-of-type(15) {
cursor: s-resize;
}
main > span:nth-of-type(16) {
cursor: w-resize;
}
main > span:nth-of-type(17) {
cursor: context-menu;
}
main > span:nth-of-type(18) {
cursor: none;
background: #eee url('data:image/svg+xml,\
\
\
\
');
background-size: 18px 18px;
}
main > span:nth-of-type(19) {
cursor: cell;
}
main > span:nth-of-type(20) {
cursor: vertical-text;
}
main > span:nth-of-type(21) {
cursor: alias;
}
main > span:nth-of-type(22) {
cursor: copy;
}
main > span:nth-of-type(23) {
cursor: no-drop;
}
main > span:nth-of-type(24) {
cursor: not-allowed;
}
main > span:nth-of-type(25) {
cursor: ew-resize;
}
main > span:nth-of-type(26) {
cursor: ns-resize;
}
main > span:nth-of-type(27) {
cursor: nesw-resize;
}
main > span:nth-of-type(28) {
cursor: nwse-resize;
}
main > span:nth-of-type(29) {
cursor: col-resize;
}
main > span:nth-of-type(30) {
cursor: row-resize;
}
main > span:nth-of-type(31) {
cursor: all-scroll;
}
main > span:nth-of-type(32) {
cursor: zoom-in;
}
main > span:nth-of-type(33) {
cursor: zoom-out;
}
main > span:nth-of-type(34) {
cursor: -webkit-grab;
}
main > span:nth-of-type(35) {
cursor: -webkit-grabbing;
}
</style>
default
crosshair
help
move
pointer
progress
text
wait
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resizes
w-resize
context-menu
none
cell
vertical-text
alias
copy
no-drop
not-allowed
ew-resize
ns-resize
nesw-resize
nwse-resize
col-resive
row-resize
all-scroll
zoom-in
zoom-out
grab
grabbing
<script>
</script>
</script>
创造良好的用户体验应当养成一种习惯~
浏览器支持
<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css3-cursors&periods=future_2,future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="493px"></iframe>
<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css3-cursors-newer&periods=future_2,future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="471px"></iframe>
