html+css自定义鼠标显示的网页形状

1、新建html文档。

2、书写hmtl代艨位雅剖码。<span class="hand">hand 手锸责氧铼型</span><span class="crosshair">crosshair 十字</span><span class="text">text 文本</span><span class="wait">wait 等待</span><span class="help">help 问号</span><span class="e-resize">e-resize 右的箭头</span><span class="ne-resize">ne-resize 右上的箭头</span><span class="n-resize">n-resize 上的箭头</span><span class="nw-resize">nw-resize 左上的箭头</span><span class="w-resize">w-resize 左的箭头</span><span class="sw-resize">sw-resize 左下的箭头</span><span class="s-resize">s-resize 下的箭头</span><span class="se-resize">se-resize 右下的箭头</span><span class="move">move 移动</span>

3、初始化css代码。<style>html, body { width : 100%; height : 100%; margin : 0; padding : 0; }.wrapper { position : relative; width : 420px; margin : 0 auto; padding : 0; font-size : 0; }.icon { position : relative; display : inline-block; width : 100px; height : 100px; margin : 20px; border-radius : 18px; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; box-sizing : border-box; }</style>

4、书写css代码。<style>span {display:block;line-height:30px;margin:5px 0;background:#f0f0f0;text-align:center;}.hand{cursor:hand;}.crosshair{cursor:crosshair;}.text{cursor:text;}.wait{cursor:wait;}.e-resize{cursor:e-resize;}.ne-resize{cursor:ne-resize;}.n-resize{cursor:n-resize;}.nw-resize{cursor:nw-resize;}.w-resize{cursor:w-resize;}.sw-resize{cursor:sw-resize;}.s-resize{cursor:s-resize;}.se-resize{cursor:se-resize;}.move{cursor:move;}</style>

5、代码整体结构。

6、查看效果。