CSS自定义鼠标样式

这篇具有很好参考价值的文章主要介绍了CSS自定义鼠标样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

CSS自定义鼠标样式
  • 属性值
属性 描述
url 需使用的自定义光标的 URL
default 默认光标(通常是一个箭头)
auto 默认。浏览器设置的光标
crosshair 光标呈现为十字线
pointer 光标呈现为指示链接的指针(一只手)
move 此光标指示某对象可被移动
e-resize 此光标指示矩形框的边缘可被向右(东)移动
ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)
nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)
n-resize 此光标指示矩形框的边缘可被向上(北)移动
se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)
sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)
s-resize 此光标指示矩形框的边缘可被向下移动(南)
w-resize 此光标指示矩形框的边缘可被向左移动(西)
text 此光标指示文本
wait 此光标指示程序正忙(通常是一只表或沙漏)
help 此光标指示可用的帮助(通常是一个问号或一个气球)
  • 效果
    效果查看,点击这里 ➡:链接

  • 自定义样式

  1. 使用cursor: url();

css代码如下,就能得到一个切换了图片的鼠标样式:

html, body {
	width: 100%;
    height: 100%;
}
body {
	cursor: url("./draw.png") 0 32, auto;
}
  1. 使用cursor: none;
  • 全局设置cursor: none;,使屏幕上看不见鼠标的默认样式
  • 再手写一个div并给它赋予自定义样式,此时是用html+css来给其设置样式,不再有局限性
  • 监听 body 上的 mousemove,并实时设置div的位置
  • div设置pointer-events: none;阻止默认的鼠标事件,让事件透传,否则hoverclick等事件不会生效

当然,这里还有一点缺陷,我们应该监听到鼠标移出bodydiv销毁,这里就不再赘述。

完整代码如下:

<div id="container"></div>
* { margin: 0; padding: 0; }

html, body {
    width: 100%;
    height: 100%;
}

body {
    cursor: none;
    position: relative;
}

#container {
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    background-color: #000;
    border-radius: 50%;
    z-index: 1;
    // 阻止默认的鼠标事件,让事件透传
    pointer-events: none;
}

const body = document.querySelector("body");
const element = document.getElementById("container");
const halfAlementWidth = element.offsetWidth / 2;

function setPosition(x, y) { 
    element.style.transform  = `translate(${x - halfAlementWidth}px, ${y - halfAlementWidth}px)`;       
}

// 监听鼠标移动,元素位置跟随鼠标变化
body.addEventListener('mousemove', (e) => {
  window.requestAnimationFrame(function(){
    setPosition(e.clientX, e.clientY);
  });
});

查看完整效果,点击这里 ➡:链接文章来源地址https://www.toymoban.com/news/detail-534702.html

到了这里,关于CSS自定义鼠标样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS3设计动画样式

    CSS3动画包括过渡动画和关键帧动画,它们主要通过改变CSS属性值来模拟实现。我将详细介绍Transform、Transitions和Animations 3大功能模块,其中Transform实现对网页对象的变形操作,Transitions实现CSS属性过渡变化,Animations实现CSS样式分步式演示效果。 2012年9月,W3C发布CSS3变形工作草

    2024年02月06日
    浏览(46)
  • CSS3表格和表单样式

    在传统网页中,表格主要用于网页布局,因此也成为网页编辑的主要工具;在标准化网页设计中,表格的主要功能是显示数据,也可适当辅助结构设计。本章主要介绍如何使用CSS控制表格和表单的显示效果,如表格和表单的边框、背景等样式。 CSS为表格定义了5个专用属性,

    2024年02月06日
    浏览(36)
  • CSS3中的字体和文本样式

    CSS3优化了CSS 2.1的字体和文本属性,同时新增了各种文字特效,使网页文字更具表现力和感染力,丰富了网页设计效果,如自定义字体类型、更多的色彩模式、文本阴影、生态生成内容、各种特殊值、函数等。 字体样式包括类型、大小、颜色、粗细、下画线、斜体、大小写等

    2024年02月06日
    浏览(42)
  • CSS3如何实现雷达扫描图(动态样式)

    动态样式控制雷达扫描和暂停: 创建一个 雷达动画效果 ,具体解释如下: 1.首先定义了一个名为.radar的类,设置了其背景为径向渐变,包括四个部分:中心渐变、重复径向渐变、线性渐变和另一个线性渐变。同时设置了宽度、高度、最大宽度、最大高度、位置(相对定位)

    2024年04月09日
    浏览(38)
  • CSS3背景样式详解(图像大小,图像位置等)

    在CSS3中,新增了3个背景属性 属性 说明 background-size 背景大小 background-origin 背景位置 background-clip 背景剪切 概念:在CSS3之前,我们是不能用CSS来控制背景图片大小的,背景图片的大小都是由图片实际大小确定的。 但在CSS3中,可以用background-size属性来定义背景图片的大小。

    2024年01月24日
    浏览(36)
  • css3实现无缝滚动,鼠标经过暂停

    js也可以实现,但css3更加的平滑和资源占用更少。下面是具体代码,动画要单独用一个类名,否则暂停估计不会生效: 原理:动画向上移动,目标完全消失后,从头开始,注意 动画移动高度是文本高度,这个不好控制要微调,如果文本是动态的则要把动画通过js生成动态设置

    2024年02月22日
    浏览(55)
  • CSS设置鼠标样式和添加视频样式

    CSS用户界面样式 轮廓线outline 使图片和文字对齐 vertical-align: baseline | top | middle | bottom baseline 默认元素设置在父元素的基线上 top把元素的顶端与行中最高元素的顶端对齐 middle把元素放置父元素的中部 bottom把元素的顶端与行中最低的元素的顶端对齐 这个用法限于行内和行内块

    2024年02月07日
    浏览(39)
  • CSS 改变鼠标样式(大全)

    使用方法:

    2024年02月03日
    浏览(46)
  • CSS鼠标悬浮及其样式

    示例 选择鼠标指针浮动在其上的元素,并设置其样式: 定义和用法 :hover 选择器用于选择鼠标指针浮动在上面的元素。 提示 :hover 选择器可用于所有元素 :link 选择器设置指向未被访问页面的链接的样式,:visited 选择器用于设置指向已被访问的页面的链接,:active 选择器用于

    2024年02月10日
    浏览(39)
  • 前端学习——CSS3

    box-sizing resize box-shadow opacity background-origin background-clip background-size background复合属性 多背景图 边框圆角 边框外轮廓 文本阴影 文本换行 文本溢出 文本修饰 文本描边 线性渐变

    2024年02月12日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包