html好看鼠标光标特效

您所在的位置：网站首页 › 鼠标拖尾效果你知道如何实现了吗 › html好看鼠标光标特效

html好看鼠标光标特效

2023-12-11 22:00| 来源: 网络整理| 查看: 265

文章目录 1️⃣ 自定义鼠标指针图案1.1 基本鼠标样式1.2 自定义光标样式1.2.1好看的自定义光标1.2.2 html中使用自定义光标1.2.3 html中使用自定义光标效果1.2.4 html中使用光标源码 2️⃣ 自定义鼠标点击特效1.1 点击效果展示1.2 点击特效代码源码下载优质资源分享

html好看鼠标光标特效 ,包括自定义鼠标指针图案，和自定义鼠标点击特效（鼠标点击出现爱心特效，每次颜色不一样。），好看的鼠标特效，好看的鼠标指针，自定义光标样式。

注意： Firefox/Mac, Safari/Mac, Chrome/Mac不支持PNG格式和JPG格式的图片光标。IE仅支持CUR格式的图片光标。因为图片的兼容性，所以推荐全局界面使用cur光标，单个容器，超链接可以使用图片光标。

1️⃣ 自定义鼠标指针图案 1.1 基本鼠标样式

css样式

body{ cursor:pointer;//全局，手型光标样式 }

光标样式

1.2 自定义光标样式 1.2.1好看的自定义光标

上百个好看的光标,具体下载地址见文章结尾

在这里插入图片描述

1.2.2 html中使用自定义光标

图片分辨率建议32px

方案1：全局使用特定光标效果

body{ cursor:url('图片地址'),auto; }

方案1：标签使用特定光标效果

span{ cursor:url(https://www.xcsharp.top/read/mycur.png),auto; }

方案3：全局使用特定光标效果，网络url

body { cursor: url(https://www.xcsharp.top/read/mycur.cur),auto; } 1.2.3 html中使用自定义光标效果

在这里插入图片描述

1.2.4 html中使用光标源码 xcSharp博客 body{ cursor:url('https://www.xcsharp.top/read/mycur.png'),auto; padding:0px;margin:0px; } div{cursor:url('cursor1.png'),auto; width:calc(100% - 200px);height:calc(100% - 200px); position:absolute; background-color:orange;} 自定义鼠标样式 2️⃣ 自定义鼠标点击特效 1.1 点击效果展示

鼠标点击的时候出现爱心，每次点击的爱心颜色不一样，也可以使用自定义的图案。

在这里插入图片描述

1.2 点击特效代码 xcSharp博客 (function() { window.onclick = function(event) { var heart = document.createElement("b"); heart.onselectstart = new Function('event.returnValue=false'); document.body.appendChild(heart).innerHTML = "❤"; heart.style.cssText = "position: fixed;left:-100%;"; var f = 16, // 字体大小 x = event.clientX - f / 2, // 横坐标 y = event.clientY - f, // 纵坐标 c = randomColor(), // 随机颜色 a = 1, // 透明度 s = 1.2; // 放大缩小 var timer = setInterval(function() { if (a

【本文地址】

html好看鼠标光标特效

html好看鼠标光标特效

今日新闻

推荐新闻