最近 W3C 组织宣布 html5 标准正式发布, 这对于 web 程序员来说是一个应该庆祝的日子. HTML5 标准和浏览器的进步给 Web 程序员的开发带来的极大的便利, 以前几乎无法实现或非常难以实现的功能, 现在只需要标准的 HTML5 标记就能完成, 比如 HTML5 日期输入类型 (date) ,HTML5 中新型 input 类型,@font-face 的用法, canvas 动画等. 这里要说的一个技巧也是以往在老式的 IE 浏览器里很难实现的功能 -- 用 CSS 自定义鼠标光标样式. 使用 CSS 能很容易的实现这个功能.
观看演示
自定义光标样式的 CSS 代码
CSS 里的 cursor 属性能接受很多种光标样式属性, 而且, 如果使用 url() 表达式, 你还能用自己的图片自定义光标图案样式:
- body {
- cursor: url('some-cursor.ico'), default;
- }
程序员编程要有个好习惯, 要给程序留下备份方案, 当第一方案不起作用时, 备份方案能挽回错误, 所以, 这里使用了 default 值做备份, 这个跟设置字体的 font-family 的思路是一样的. 还有一点要注意的是, 如果使用谷歌浏览器, 光标图案的大小会跟图片原生大小一样, 但在火狐浏览器里, 自定义光标图案总是缩小到标准大小.
观看演示
这个功能虽然非常有趣, 但还是应该用在需要的时候, 必要的时候, 如果是滥用, 效果反而适得其反. 你觉得呢?
来源: http://www.webhek.com/post/css-custom-cursors.html