html好看鼠標(biāo)光標(biāo)特效,包括自定義鼠標(biāo)指針圖案，和自定義鼠標(biāo)點(diǎn)擊特效（鼠標(biāo)點(diǎn)擊出現(xiàn)愛(ài)心特效，每次顏色不一樣。），好看的鼠標(biāo)特效，好看的鼠標(biāo)指針，自定義光標(biāo)樣式。
注意： Firefox/Mac, Safari/Mac, Chrome/Mac不支持PNG格式和JPG格式的圖片光標(biāo)。IE僅支持CUR格式的圖片光標(biāo)。
????因?yàn)閳D片的兼容性，所以推薦全局界面使用cur光標(biāo)，單個(gè)容器，超鏈接可以使用圖片光標(biāo)。
1?? 自定義鼠標(biāo)指針圖案
1.1 基本鼠標(biāo)樣式
css樣式
body{
cursor:pointer;//全局，手型光標(biāo)樣式
}
光標(biāo)樣式
1.2 自定義光標(biāo)樣式
1.2.1好看的自定義光標(biāo)
上百個(gè)好看的光標(biāo),具體下載地址見(jiàn)文章結(jié)尾
1.2.2 html中使用自定義光標(biāo)
圖片分辨率建議32px
方案1：全局使用特定光標(biāo)效果
body{
cursor:url('圖片地址'),auto;
}
方案1：標(biāo)簽使用特定光標(biāo)效果
span{
cursor:url(https://www.xcsharp.top/read/mycur.png),auto;
}
方案3：全局使用特定光標(biāo)效果，網(wǎng)絡(luò)url
body {
cursor: url(https://www.xcsharp.top/read/mycur.cur),auto;
}
1.2.3 html中使用自定義光標(biāo)效果
1.2.4 html中使用光標(biāo)源碼
<html>
<head>
<title>xcSharp博客</title>
<style type="text/css">
body{
<!--cursor:url('https://www.xcsharp.top/read/mycur.cur'),auto;-->
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;}
</style>
</head>
<body>
<div style="text-align:center;font-family:華文中宋;padding:100px;"> 自定義鼠標(biāo)樣式 </div>
</body>
</html>
2?? 自定義鼠標(biāo)點(diǎn)擊特效
1.1 點(diǎn)擊效果展示
????鼠標(biāo)點(diǎn)擊的時(shí)候出現(xiàn)愛(ài)心，每次點(diǎn)擊的愛(ài)心顏色不一樣，也可以使用自定義的圖案。
1.2 點(diǎn)擊特效代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>xcSharp博客</title>
<script type="text/javascript">
(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, // 橫坐標(biāo)
y = event.clientY - f, // 縱坐標(biāo)
c = randomColor(), // 隨機(jī)顏色
a = 1, // 透明度
s = 1.2; // 放大縮小
var timer = setInterval(function() {
if (a <= 0) {
document.body.removeChild(heart);
clearInterval(timer);
} else {
heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" + c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" + s + ");";
y--;
a -= 0.016;
s += 0.002;
}
}, 12)
}
// 隨機(jī)顏色
function randomColor() {
return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
}
}());
</script>
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.news {
width: calc(100% - 50px);
border: 1px solid gray;
padding: 20px 15px ;
margin: 10px;
}
.news h2{
padding-bottom: 5px;
color: orange;
font-weight: bold;
}
.news ul{
padding:5px 10px ;
background: white;
}
.news ul li{
list-style: none;
height: 30px;
line-height: 30px;
border-bottom: 1px dashed gray;
text-indent: 15px;
font-size: 14px;
}
.news a{
text-decoration: none;
color: #06C;
}
.news a:hover{
text-decoration: underline;
color: red;
}
.bg{
background-color:rgb(255,165,0,0.1);
}
.bg2{
background-color:orange;
}
</style>
<body>
<div class="news">
<h2>最全的前后端資源源碼 - 收藏</h2>
<ul>
<li class="bg2">
<a target="_blank">學(xué)生作業(yè)神器，好的資源代碼，免費(fèi)服務(wù)器部署，數(shù)據(jù)接口提供，源碼下載</a>
<span style="float:right;margin-right:20px;color:green;">前端界面</span>
</li>
<li class="bg"><a target="_blank">★★★★☆【總覽】程序員前端、后端資源合集</a></li>
<li class="bg"><a target="_blank">★★★★☆【博主推薦】HTML制作一個(gè)美觀的個(gè)人簡(jiǎn)介網(wǎng)頁(yè)（附源碼）</a></li>
<li class="bg"><a target="_blank">★★★★☆【博主推薦】html好看的個(gè)人簡(jiǎn)歷網(wǎng)頁(yè)版(附源碼)</a></li>
<li><a target="_blank">★★★★☆【博主推薦】html好看的個(gè)人主頁(yè)(附源碼)</a></li>
<li class="bg"><a target="_blank">★★★★☆【博主推薦】html好看的邀請(qǐng)函(附源碼)</a></li>
<li class="bg"><a target="_blank">★★★★☆【博主推薦】html好看的音樂(lè)播放器(附源碼)</a></li>
<li class="bg"><a target="_blank">★★★★☆【博主推薦】html好看的拼圖小游戲(附源碼)</a></li>
<li><a target="_blank">★★★★☆【博主推薦】html好看的拼圖驗(yàn)證碼(附源碼)</a></li>
<li class="bg"><a target="_blank">★★★★★【博主推薦】html界面繪制SVG圖形(附源碼)</a></li>
<li><a target="_blank">★★★★★【博主推薦】html操作SVG圖(附源碼)</a></li>
<li class="bg"><a target="_blank">★★★★★【博主推薦】html下拉框樹(shù)形（附好看的登錄界面）</a></li>
<li><a target="_blank">★★★★★【博主推薦】HTML5響應(yīng)式手機(jī)WEB(附源碼)</a></li>
<li class="bg"><a target="_blank">★★★★★【博主推薦】html后臺(tái)管理系統(tǒng)框架(附源碼)</a></li>
<li><a target="_blank">★★★★☆【博主推薦】大數(shù)據(jù)可視化大屏(源碼下載)</a></li>
<li class="bg"><a target="_blank">★★★★☆【博主推薦】html好看的列表滾動(dòng)效果（附源碼）</a></li>
<li><a target="_blank">★★★★☆【博主推薦】html引用百度地圖定位閃爍彈框樹(shù)形(附源碼) </a></li>
<li class="bg"><a target="_blank">★★★★☆【博主推薦】HTML酷炫動(dòng)畫(huà)表白求愛(ài)界面(附源碼)</a></li>
<li class="bg2">
<a target="_blank">★★★★★【博主推薦】JAVA SSM框架的后臺(tái)管理系統(tǒng)（附源碼）</a>
<span style="float:right;margin-right:20px;color:green;">JAVA后端資源</span>
</li>
<li class="bg"><a target="_blank">★★★★★【博主推薦】SpringBoot API接口對(duì)數(shù)據(jù)庫(kù)增刪改查,路由,TOKEN,WebSocket完整版(附源碼)</a></li>
<li class="bg2">
<a target="_blank">★★★★☆【博主推薦】C# Winform定時(shí)發(fā)送郵箱(附源碼)</a>
<span style="float:right;margin-right:20px;color:green;">C#后端資源</span>
</li>
<li class="bg"><a target="_blank">★★★★☆【博主推薦】asp.net WebService 后臺(tái)數(shù)據(jù)API JSON(附源碼)</a></li>
<li><a target="_blank">★★★★☆【博主推薦】C#生成好看的二維碼（附源碼）</a></li>
<li class="bg"><a href="https://blog.csdn.net/weixin_43151418/article/details/124986567 " target="_blank">★★★★☆【博主推薦】C#MVC列表實(shí)現(xiàn)增刪改查導(dǎo)入導(dǎo)出曲線(xiàn)功能(附源碼)</a></li>
</ul>
</div>
</body>
</html>
源碼下載
鼠標(biāo)單擊出現(xiàn)愛(ài)心,上百個(gè)好看的光標(biāo)資源 點(diǎn)擊下載
優(yōu)質(zhì)資源分享
??????????【總覽】程序員前端、后端資源合集
??????????【源碼】程序員優(yōu)質(zhì)資源匯總
??????????【博主推薦】JAVA SSM框架的后臺(tái)管理系統(tǒng)（附源碼）
??????????【博主推薦】SpringBoot API接口對(duì)數(shù)據(jù)庫(kù)增刪改查,路由,TOKEN,WebSocket完整版(附源碼)
??????????【博主推薦】HTML制作一個(gè)美觀的個(gè)人簡(jiǎn)介網(wǎng)頁(yè)（附源碼）
??????????【博主推薦】html好看的個(gè)人簡(jiǎn)歷網(wǎng)頁(yè)版(附源碼)
??????????【博主推薦】html好看的個(gè)人主頁(yè)(附源碼)
??????????【博主推薦】html好看的邀請(qǐng)函(附源碼)
??????????【博主推薦】html好看的音樂(lè)播放器(附源碼)
??????????【博主推薦】html好看的拼圖小游戲(附源碼)
??????????【博主推薦】html好看的拼圖驗(yàn)證碼(附源碼)
??????????【博主推薦】html界面繪制SVG圖形(附源碼)
??????????【博主推薦】html操作SVG圖(附源碼)
??????????【博主推薦】html下拉框樹(shù)形（附好看的登錄界面）
??????????【博主推薦】HTML5響應(yīng)式手機(jī)WEB(附源碼)
??????????【博主推薦】大數(shù)據(jù)可視化大屏(源碼下載)
??????????【博主推薦】html引用百度地圖定位閃爍彈框樹(shù)形(附源碼)
??????????【博主推薦】HTML酷炫動(dòng)畫(huà)表白求愛(ài)界面(附源碼)
???? ?? 關(guān)注博主 帶你實(shí)現(xiàn)暢游前后端
???? ?? 加入社區(qū) 帶你體驗(yàn)馬航不孤單
???? ?? 神秘個(gè)人簡(jiǎn)介 帶你體驗(yàn)不一樣得介紹
???? ?? 酷炫邀請(qǐng)函 帶你體驗(yàn)高大上得邀請(qǐng)文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-495421.html
???? 親，碼字不易，動(dòng)動(dòng)小手，歡迎 點(diǎn)贊 ? 收藏，如 ?? 問(wèn)題請(qǐng)留言（評(píng)論），博主看見(jiàn)后一定及時(shí)給您答復(fù)，??????文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-495421.html
到了這里，關(guān)于html好看鼠標(biāo)光標(biāo)特效的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
