css样式自定义鼠标光标_CSS自定义光标

css样式自定义鼠标光标

Remember the Web 1.0 days where you had to customize your site in every way possible?  You abused the scrollbars in Internet Explorer, of course, but the most popular external service I can remember was CometCursor.  CometCursor let you create and use loads of custom cursors for your site.  Now we probably laugh at that in hindsight but there may be times when you'd like to customize a cursor, and CSS lets you do it quite easily!

还记得Web 1.0的日子，您必须以各种方式自定义网站？ 您当然滥用了Internet Explorer中的滚动条，但是我记得最流行的外部服务是CometCursor。 CometCursor允许您为站点创建和使用自定义游标的负载。 现在我们可能会事后大笑，但是有时候您可能想要自定义游标，而CSS可以让您轻松自如！

View Demo 观看演示

CSS (The CSS)

The cursor CSS property accepts a series of cursors, and using a url() value allows you to set a custom CSS cursor:

cursor CSS属性接受一系列光标，使用url()值可以设置自定义CSS光标：

body {
	cursor: url('some-cursor.ico'), default;
}

It's always best to have a backup native cursor like default, much as you set broader font-family's when styling text.  Also note that Firefox scales the cursor down to a smaller size whereas Chrome currently allows a larger original size.

最好总是有一个像default这样的备用本地游标，就像在设置文本样式时设置更宽的font-family 。 另请注意，Firefox将光标缩小到较小的尺寸，而Chrome当前允许较大的原始尺寸。

View Demo 观看演示

Now don't go doing this willy nilly, use a custom cursor in places where you think important, like a magnifying glass + or - over zoomable images and such.

现在，不要再随意了，请在您认为重要的地方使用自定义光标，例如放大镜+或-缩放图像等。

翻译自: https://davidwalsh.name/css-custom-cursor

css样式自定义鼠标光标