CSS自定义光标样式


最近W3C组织宣布HTML5标准正式发布,这对于WEB程序员来说是一个应该庆祝的日子。HTML5标准和浏览器的进步给Web程序员的开发带来的极大的便利,以前几乎无法实现或非常难...
       最近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的思路是一样的。还有一点要注意的是,如果使用谷歌浏览器,光标图案的大小会跟图片原生大小一样,但在火狐浏览器里,自定义光标图案总是缩小到标准大小。
观看演示
       这个功能虽然非常有趣,但还是应该用在需要的时候、必要的时候,如果是滥用,效果反而适得其反。你觉得呢?
标签: css样式csshtml5

更多 css样式 相关资讯

CSS 3中弹性盒布局的最新版

CSS 3中弹性盒布局的最新版

 CSS 3中弹性盒布局的最新版概述   在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模块用于以非常灵活的方式实现页面布局处理。   虽然可以使用其他CSS样

Web开发中20个很有用的CSS库

Web开发中20个很有用的CSS库

在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性。每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发。像CSS 库,框架,应用这样

纯CSS实现Tooltip

tootip这个东西,真是什么地方都用得着,这段时间就不可避免的遇到了。 首先考虑一下tooltip的基本表现: 这应该是最简单的tooltip了。 首先是移动到某个元

十个实用但IE不支持的CSS属性

对IE浏览器尤其是IE6的抱怨基本已进入麻痹状态,偶尔甚至产生非常消极的想法:这个世界只有一个浏览器就好了,哪怕这唯一的浏览器就是IE6。当然,这样的想法是非常病态的,马

web前端css定位position和浮动float

div、h1或p元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span和h3等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框

深入理解CSS选择器优先级的计算

选择器的优先级关系到元素应用哪个样式。在CSS2.1的规范中是这样描述的: 1.如果声明来自于“style”属性,而不是带有选择器的规则,则记为 1,否则记为 0 (= a)(HTML元素的style属

经验分享:使用 Restyle.js 简化 CSS 预处理

Andrea Giammarchi的restyle.js是一个新的,基于JavaScript的CSS预处理器,能够运行在服务端(通过Node.js)或者浏览器中。它宣称自己是“一种简化的CSS方法”,能够生成CSS规

用CSS美化半个字符巧妙方法

用CSS美化半个字符巧妙方法

CSS不仅是一种技术,也是一种艺术,如果你运用的好,可以用它创造出各种神奇的效果,随着现代浏览器技术的进步,CSS3的革新,也给了程序员更大的空间和可能性来发挥自己的奇思妙

你可能不知道的5种 CSS 和 JS 的交互方式

你可能不知道的5种 CSS 和 JS 的交互方式

  CSS和JavaScript: 在各个浏览器版本中的分界线似乎变得越来越模糊,两者所完成的功能差异非常明显,但说到底他们都是前端技术,所以确实需要紧密地配合。虽然我们将代码拆

EnjoyCSS – 先进的在线CSS3代码生成器

EnjoyCSS – 先进的在线CSS3代码生成器

EnjoyCSS是一款先进的 CSS3 代码生成工具,可以让你摆脱日常的编码。它方便和易于使用的用户界面允许您快速,无需编码就可以调节出丰富的图形样式。您将能够玩转所有的

更多 css 相关资讯

IE中的CSS3不完全兼容方案

IE中的CSS3不完全兼容方案

到Internet Explorer 8为止,IE系列是不支持CSS3的。在IE中要做一些常用的效果如圆角、阴影,就需要用一些冗余而无意义的元素和图片来做出这些效果。在厌倦这些后,就想着

纯css3 transforms 3D文字翻开翻转3D开放式效果

纯css3 transforms 3D文字翻开翻转3D开放式效果

在本教程中,将基于CSS3创建的一个实现一个有趣的3D开放式效果。教程的目的是展示我们如何能带来一些生活上使用CSS3 。 在线预览 立即下载AnimatedOpeningType.zip htm

CSS 3中弹性盒布局的最新版

CSS 3中弹性盒布局的最新版

 CSS 3中弹性盒布局的最新版概述   在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模块用于以非常灵活的方式实现页面布局处理。   虽然可以使用其他CSS样

10 个轻松学会 CSS3 的优秀在线资源

10 个轻松学会 CSS3 的优秀在线资源

本文包揽 CSS 的所有关键点,并且引入了最新的 CSS3 版本。这个先进的技术提供超级多的新标签和属性,使得 Web 设计构建创新更简单,帮助开发者创建具有新趋势,带有漂亮布局的 Web

10条影响CSS渲染速度的写法与建议

1、*{} #zishu *{} 尽量避开 由于不同浏览器对HTML标签的解释有差异,所以最终的网页效果在不同的浏览器中可能是不一样的,为了消除这方面的风险,设计者通常会在CSS的一个始就把

你未必知道的CSS小知识:text-decoration属性变成了属性简写

你未必知道的CSS小知识:text-decoration属性变成了属性简写

我相信有些小知识会让你大吃一惊。 跟着最新的CSS规范,text-decoration现在的写法是这样的: a { text-decoration: overline aqua wavy; }复制代码text-decoration

使用CSS3设计漂亮的动画效果3D大按钮

使用CSS3设计漂亮的动画效果3D大按钮

本文将介绍如何使用最简单的CSS3代码来生成一个拥有点击效果的3D按钮 HTML代码 首先定义一个3D按钮的HTML,如下: <a href="#null">极客标签</a>复制代码 CSS代码

8款超酷实用的CSS3 Tab菜单集合

8款超酷实用的CSS3 Tab菜单集合

在网页应用中,有一种既方便用户浏览又节省空间的应用就是Tab菜单了,今天我们精选了一些基于CSS3的Tab菜单,效果很酷,而且比较实用。 1、CSS3华丽的Tab菜单 带小图标动画

CSS FILTERS:CSS过滤器能够做什么?

CSS FILTERS:CSS过滤器能够做什么?

CSS过滤器(CSS filters)已经被推出有很长一段时间了。它最初是为了向SVG矢量图提供不同的图片效果。现在,CSS filters 不在局限于在SVG中使用,也可以在图片、文字和其它元素上使

使用CSS制作APPLE WATCH刻度盘动画效果

使用CSS制作APPLE WATCH刻度盘动画效果

在这篇文章中,我们将使用CSS来实现Apple Watch界面中的刻度盘动画效果。如果看过Apple Watch的宣传页面,就会看到其中有一个红绿蓝三色形成一个圆形刻度盘动画的效果。查看演

更多 html5 相关资讯

8款超酷实用的CSS3 Tab菜单集合

8款超酷实用的CSS3 Tab菜单集合

在网页应用中,有一种既方便用户浏览又节省空间的应用就是Tab菜单了,今天我们精选了一些基于CSS3的Tab菜单,效果很酷,而且比较实用。 1、CSS3华丽的Tab菜单 带小图标动画

7款纯CSS3实现的炫酷动画应用

7款纯CSS3实现的炫酷动画应用

HTML5确实非常强大,我们之前也分享过很多基于HTML5 Canvas的动画特效。但是你是否知道我们可以利用纯CSS制作一些很酷的动画效果?对,CSS3可以做到,下面分享的7款炫酷动

构建HTML5应用程序:CSS3 效果、过渡和动画

构建HTML5应用程序:CSS3 效果、过渡和动画

作为 Web 开发人员,您可以使用三个工具来设计网页的效果并将其变为现实: HTML、CSS 和 JavaScript。但情况并非总是如此。 过去,看似简单的效果(如文字阴影或渐变)却需

给网页设计师的30个HTML5学习资源

早在几个星期前,Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载。众所周知,HTML5在互联网领域掀起了一场大论战,并让Adobe的日子很难熬。HTML5致力于为前端开发提供全

HTML 5和CSS3表单示例和详细教程汇总

HTML 5和CSS3表单示例和详细教程汇总

为Web开发人员提供了详细参考指南。以下是文章摘要: 邮箱注册表单 本教程演示如何使用HTML5创建既时尚又好用的邮箱注册表单。引导大家一步一步创建占位符文本、表单域、

CSS3&amp;HTML5各浏览器支持情况一览表

CSS3性质(CSS3 Properties) 平台 MAC WIN 浏览器 CHROME FIREFOX OPERA SAFARI CHROME FIREFOX OPERA SAFARI IE 版本 5 3.6 10.1 4 4 3.6 3 10 10.5 4 6 7 8 RGBA Y

CSS3&amp;HTML5各浏览器支持情况一览表

CSS3性质(CSS3 Properties) 平台 MAC WIN 浏览器 CHROME F

CSS3 HTML5实例五(使用 @Font-Face 实现定制字体)

CSS3 HTML5实例五(使用 @Font-Face 实现定制字体)

  Web 设计中有几种字体是比较安全的,如 Arial,Helvetica, Verdana, Georgia, Comic Sans (中文的,一般来说宋体是唯一安全的 - 译者),现在,使用 CSS3 的 @font-face 可以

CSS3 HTML5实例四(使用 RGBA 实现透明效果)

CSS3 HTML5实例四(使用 RGBA 实现透明效果)

  目前,Web 设计中的透明效果主要靠 PNG 图片实现(但在 IE 浏览器支持得并不好 - 译者),在 CSS3,可以直接实现透明效果。   rgba(200, 54, 54, 0.5);   background: rgb

CSS3 HTML5实例一(圆角)

CSS3 HTML5实例一(圆角)

CSS 3 HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持。本文介绍了 5 个 CSS3 技巧,可以帮你实现未来的Web。目前这些技术不应该用在