?> Background：:point_right: cursor
<script v-pre type="text/x-template" id="mouse-cursor_tlp"> <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 width="100%" height="493px" frameborder="0" 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"> </iframe> <iframe width="100%" height="471px" frameborder="0" 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"> </iframe>Greate user experience should always go first as a habit ~