在Web开发的早期,随着新技术的不断涌现,一切都让人兴奋。但是我们在过去十年里经历了一个技术的停滞期,直到由于HTML5的出现,Web开发再次让人着迷。特别是CSS3正在迅速发展,你会在其规范里发现许多有趣的宝物。
在这篇文章里,我们要研究的是CSS鼠标样式属性,正如你所期望的的一样,它允许你改变在一个元素上移动鼠标时的指针样式。它对于交互式Web App来说已经变得越来越重要。
CSS2的鼠标样式
CSS2中提供相对较少的选择(悬停在不同的网页元素上,看看鼠标指针样式是如何变化的):
CSS3的鼠标样式
在CSS3里我们有更多的样式可供选择。它们可以工作在IE9和火狐、Chrome、Safari、Opera的最新版本上(除非另有标注):
浏览器特定指针
Mozilla和Chrome、Safari的某些版本中提供了一些私有样式,这很可能成为CSS3规范的一部分:
创建你自己的指针
最后,你可以创建自己的指针图形,例如:
注意:
1. Internet Explorer需要一个Windows指针文件(.cur)。
2. 火狐、Chrome和Safari需要一幅图像 - 我推荐使用一张24位Alpha透明的PNG图片。
3. Firefox还需要一个非URL指针设置作为备用值。
4. Opera不支持这种写法。
5. x和y是Firefox、Chrome和Safari中的可选属性,它定义了图像从左上角开始的精确指针位置。如果省略,都默认为0。
挺好,但它看起来会花费我太多精力!所以我会一直坚持使用标准的指针样式...
译自:http://www.sitepoint.com/css3-cursor-styles/
作者:Craig Buckler于2011年1月5日
译者:蒋宇捷(转载请标明出处http://blog.csdn.net/hfahe)
分享到:
相关推荐
插件描述:css3最新鼠标划过样式,使用纯css3打造的最新的鼠标划过样式的展示. 参考示例:http://www.jq22.com/jquery-info5808
此文档包含了CSS中cursor属性对应的鼠标图片与说明
css3 鼠标悬停 卡片效果
今天的这款效果,鼠标悬停背景图片翻转,无需js,只要一部分的css3代码即可,其他的都是普通的css2代码 使用方法: 1、将head中的lanrenzhijia.css样式引入到你的网页中 2、将body中的代码部分拷贝到你需要的...
鼠标悬停hover样式,简洁漂亮的css3鼠标悬停鼠标悬停hover样式边框和爱心点赞特效
简洁的纯css3鼠标滑过按钮动画过滤样式
在网页上,文字是信息描述的主要手段,...今天我们要分享给大家的是一款基于CSS3的卡片折叠样式的文字特效,每一个字母之间像是折叠的卡片连接在一起一样,鼠标滑过后文字卡片也上下凹凸浮动,具有3D立体的视觉效果。
这是一款有趣的css3折角分页样式代码。该css3折角分页样式代码在鼠标经过时,分页项的左上角会像纸张一样弯曲折角,效果十分好看。
20种炫酷CSS3按钮样式和鼠标滑过特效
这是一款炫酷的CSS3鼠标hover图片动画样式。当鼠标hover图片时,图片遮罩层以3D翻转的方式出现。在炫酷的翻转动画之后,在遮罩层上显示图片的描述信息。
巧合要用到鼠标样式效果,就顺便整理了下十五种CSS鼠标样式,小例子供大家使用啊。CSS鼠标样式语法如下: 任意标签中插入 style="cursor:*" 例 子:文本或其它页面元素</span> 文本或其它页面元素</a> 注意把 * 换成...
这是一款效果非常炫酷的HTML5和CSS3文字样式和鼠标滑过特效插件。该文字特效中包含了11种不同的文字样式和鼠标滑过文字时的动画效果。部分文字动画效果使用了SVG和HTML5 Canvas来制作。
div css移动鼠标改变样式弹出div层
css3飘带导航栏鼠标悬停凸起显示导航栏样式代码 css3飘带导航栏鼠标悬停凸起显示导航栏样式代码 css3飘带导航栏鼠标悬停凸起显示导航栏样式代码 css3飘带导航栏鼠标悬停凸起显示导航栏样式代码
css3鼠标移入样式变化过渡效果
极具创意CSS3分页样式代码是一款通过鼠标悬停分页按钮动画效果代码。
第3章 用CSS设置丰富的文字效果 3.1 CSS文字样式 3.2 文字实例一:模拟Google公司Logo 3.3 文字实例二:制作页面的五彩标题 3.4 CSS段落文字 3.5 段落实例:百度搜索 第4章 用CSS设置...
CSS3实现鼠标滑过3D样式图片层叠切换动画特效.zip