html鼠标圆点鼠标样式
目录
[TOC]
效果:
将下面代码中的style部分和body部分放入对应的html中即可
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hidden Cursor with Circles</title>
<style>
/* 圆点鼠标样式开始 */
/* 媒体查询，用于检测移动设备 */
@media (hover: none) and (pointer: coarse) {
/* 如果是移动设备，直接禁用所有样式 */
html, body {
cursor: default;
}
/* 禁用所有圆点样式 */
.circle {
display: none;
}
/* 移动设备不应用其他样式 */
.small-circle, .large-circle, body.hovered .small-circle::before, .pulse {
display: none !important;
}
}
/* 非移动设备应用以下样式 */
html, body {
cursor: none; /* 隐藏原始鼠标指针 */
margin: 0;
background-color: #fff; /* 背景颜色，若设置了其他背景需要注释掉此行 */
overflow: visible; /* 允许页面滚动 */
}
html, body, img, div, a, span, path, svg, button, p, h1, h2, h3, h4, h5, h6,
b, strong, i, em, blockquote, ul, ol, li, pre, code, label, textarea, input,
select, option, audio, video, canvas, iframe, table, tr, td, th, thead, tbody,
tfoot, col, colgroup, form, fieldset, legend, nav, header, footer, article,
section, aside, figure, figcaption, details, summary, main {
cursor: none !important;
}
/* 圆的通用样式 */
.circle {
position: fixed;
border-radius: 50%;
pointer-events: none;
display: none; /* 初始隐藏 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */
}
/* 小圆的样式 */
.small-circle {
width: 12px;
height: 12px;
background-color: #fff;
mix-blend-mode: exclusion;
z-index: 99999999; /* 小圆的堆叠顺序，确保在大圆下层 */
transition: transform 0.2s ease-out; /* 添加平滑过渡效果 */
transform-origin: center; /* 确保缩放以圆心为中心 */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}
/* 大圆的样式 */
.large-circle {
width: 32px;
height: 32px;
background: radial-gradient(circle, rgba(34, 34, 34, 0.2) 0%, rgba(34, 34, 34, 0.3) 100%); /* 添加渐变色 */
transition: transform 0.2s ease-out, left 0.2s ease-out, top 0.2s ease-out; /* 平滑过渡效果 */
z-index: 99999998; /* 大圆的堆叠顺序 */
transform-origin: center; /* 确保缩放以圆心为中心 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}
/* 小圆内竖线的样式 */
.small-circle::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 1px; /* 竖线粗细 */
height: 100%;
background-color: #000;
transform: translateX(-50%);
visibility: hidden; /* 初始隐藏竖线 */
}
/* 当鼠标悬停在文本上时，显示竖线 */
body.hovered .small-circle::before {
visibility: visible;
}
/* 脉冲动画效果 */
@keyframes pulse {
0% {
transform: scale(0.5);
opacity: 0.5;
}
50% {
transform: scale(1);
opacity: 0.8;
}
100% {
transform: scale(0.5);
opacity: 0.5;
}
}
/* 添加一个类控制大圆的脉冲动画 */
.pulse {
animation: pulse 1.5s infinite;
}
/* 圆点鼠标样式结束 */
</style>
</head>
<body>
<hr>
<h1>幽兰赋</h1>
<p>惟奇卉之灵德，禀国香于自然。</p>
<p>俪嘉言而擅美，拟贞操以称贤。</p>
<p>咏秀质于楚赋，腾芳声于汉篇。</p>
<p>冠庶卉而超绝，历终古而弥传。</p>
<p>若乃浮云卷岫，明月澄天，光风细转，清露微悬，紫茎膏润，绿叶木鲜，若翠羽之群集，譬彤霞之竞然。</p>
<p>感羁旅之招恨，狎寓客之流连。</p>
<p>既不遇于揽采，信无忧乎剪伐。</p>
<p>鱼如陟以先萌，鹈虽鸣而未歇。</p>
<p>愿擢颖于金阶，思结荫乎玉池。</p>
<p>泛旨酒之十酝，耀华灯于百枝。</p>
<hr>
<h1>滕王阁序</h1>
<p>豫章故郡，洪都新府。</p>
<p>星分翼轸，地接衡庐。</p>
<p>襟三江而带五湖，控蛮荆而引瓯越。</p>
<p>物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。</p>
<p>雄州雾列，俊采星驰。</p>
<p>台隍枕夷夏之交，宾主尽东南之美。</p>
<p>都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。</p>
<p>十旬休假，胜友如云；千里逢迎，高朋满座。</p>
<p>腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。</p>
<p>家君作宰，路出名区；童子何知，躬逢胜饯。</p>
<p>时维九月，序属三秋。</p>
<p>潦水尽而寒潭清，烟光凝而暮山紫。</p>
<p>俨骖騑于上路，访风景于崇阿。</p>
<p>临帝子之长洲，得天人之旧馆。</p>
<p>层峦耸翠，上出重霄；飞阁流丹，下临无地。</p>
<p>鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。</p>
<p>披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。</p>
<p>闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。</p>
<p>云销雨霁，彩彻区明。</p>
<p>落霞与孤鹜齐飞，秋水共长天一色。</p>
<p>渔舟唱晚，响穷彭蠡之滨，雁阵惊寒，声断衡阳之浦。</p>
<p>遥襟甫畅，逸兴遄飞。</p>
<p>爽籁发而清风生，纤歌凝而白云遏。</p>
<p>睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。</p>
<p>四美具，二难并。</p>
<p>穷睇眄于中天，极娱游于暇日。</p>
<p>天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。</p>
<p>望长安于日下，目吴会于云间。</p>
<p>地势极而南溟深，天柱高而北辰远。</p>
<p>关山难越，谁悲失路之人；萍水相逢，尽是他乡之客。</p>
<p>怀帝阍而不见，奉宣室以何年？</p>
<p>嗟乎！时运不齐，命途多舛。</p>
<p>冯唐易老，李广难封。</p>
<p>屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？所赖君子见机，达人知命。</p>
<p>老当益壮，宁移白首之心？穷且益坚，不坠青云之志。</p>
<p>酌贪泉而觉爽，处涸辙以犹欢。</p>
<p>北海虽赊，扶摇可接；东隅已逝，桑榆非晚。</p>
<p>孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！</p>
<p>勃，三尺微命，一介书生。</p>
<p>无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。</p>
<p>舍簪笏于百龄，奉晨昏于万里。</p>
<p>非谢家之宝树，接孟氏之芳邻。</p>
<p>他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。</p>
<p>杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？</p>
<p>呜呼！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。</p>
<p>临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。</p>
<p>敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。</p>
<p>请洒潘江，各倾陆海云尔。</p>
<p>滕王高阁临江渚，佩玉鸣鸾罢歌舞。</p>
<p>画栋朝飞南浦云，珠帘暮卷西山雨。</p>
<p>闲云潭影日悠悠，物换星移几度秋。</p>
<p>阁中帝子今何在？槛外长江空自流。</p>
<hr>
<!-- 自定义圆点鼠标样式开始 -->
<!-- 小圆 -->
<div id="smallCircle" class="circle small-circle"></div>
<!-- 大圆 -->
<div id="largeCircle" class="circle large-circle"></div>
<script>
const largeCircle = document.getElementById('largeCircle');
const smallCircle = document.getElementById('smallCircle');
let isMouseDown = false;
let isLargeCircleVisible = false;
let mouseX = 0;
let mouseY = 0;
function setPosition(x, y) {
const halfLargeCircleWidth = largeCircle.offsetWidth / 2;
const halfSmallCircleWidth = smallCircle.offsetWidth / 2;
// 设置小圆的位置
smallCircle.style.left = `${x - halfSmallCircleWidth}px`;
smallCircle.style.top = `${y - halfSmallCircleWidth}px`;
// 设置大圆的位置，平滑过渡到小圆的位置
largeCircle.style.left = `${x - halfLargeCircleWidth}px`;
largeCircle.style.top = `${y - halfLargeCircleWidth}px`;
// 根据鼠标按下状态调整圆的大小
largeCircle.style.transform = isMouseDown ? 'scale(0.5)' : 'scale(1)';
smallCircle.style.transform = isMouseDown ? 'scale(2)' : 'scale(1)';
}
// 更新悬停状态
function updateHoverStatus(x, y) {
const textElements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, span, a, div, pre, code, input, textarea');
let isHoveringText = Array.from(textElements).some(el => {
const textNodes = Array.from(el.childNodes).filter(node => node.nodeType === Node.TEXT_NODE);
return textNodes.some(node => {
const range = document.createRange();
range.selectNodeContents(node);
return Array.from(range.getClientRects()).some(rect =>
x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
);
});
});
// 处理 input 和 textarea 元素的 hover 状态
const inputElements = document.querySelectorAll('input, textarea');
isHoveringText = isHoveringText || Array.from(inputElements).some(el => {
const rect = el.getBoundingClientRect();
return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
});
// 根据是否悬停在文本上添加或移除 class
document.body.classList.toggle('hovered', isHoveringText);
}
// 动画帧函数
function animate() {
setPosition(mouseX, mouseY);
updateHoverStatus(mouseX, mouseY);
if (!isLargeCircleVisible) {
isLargeCircleVisible = true;
largeCircle.style.display = 'block';
smallCircle.style.display = 'block';
}
requestAnimationFrame(animate);
}
// 处理鼠标移动事件
function handleMove(event) {
mouseX = event.clientX;
mouseY = event.clientY;
if (!isLargeCircleVisible) {
requestAnimationFrame(animate);
}
}
// 监听鼠标事件
document.addEventListener('mousemove', handleMove);
document.addEventListener('mousedown', (event) => {
isMouseDown = true;
mouseX = event.clientX;
mouseY = event.clientY;
setPosition(mouseX, mouseY);
largeCircle.classList.add('pulse'); // 按下时添加脉冲动画
});
document.addEventListener('mouseup', () => {
isMouseDown = false;
setPosition(mouseX, mouseY);
largeCircle.classList.remove('pulse'); // 松开时移除脉冲动画
});
</script>
<!-- 自定义圆点鼠标样式结束 -->
</body>
</html>本来准备给这个网站也用这种鼠标的，最后想了下，还是不搞这些花里胡哨的了，系统自带的最好
