<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义鼠标样式集合</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: #333;
line-height: 1.6;
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
header {
text-align: center;
margin-bottom: 40px;
}
h1 {
color: #2c3e50;
font-size: 2.5rem;
margin-bottom: 10px;
}
.description {
color: #7f8c8d;
font-size: 1.1rem;
max-width: 800px;
margin: 0 auto;
}
.theme-selector {
display: flex;
justify-content: center;
gap: 20px;
margin: 30px 0;
flex-wrap: wrap;
}
.theme-btn {
padding: 12px 25px;
border: none;
border-radius: 50px;
background: #3498db;
color: white;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.theme-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}
.theme-btn.active {
background: #2c3e50;
}
.theme-btn.cat {
background: #e74c3c;
}
.theme-btn.flower {
background: #9b59b6;
}
.theme-btn.emoji {
background: #2ecc71;
}
.test-area {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin-top: 40px;
}
.test-card {
background: white;
border-radius: 10px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
}
.test-card:hover {
transform: translateY(-5px);
}
.test-card h3 {
color: #2c3e50;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid #eee;
}
.test-content {
min-height: 150px;
}
.link-item {
display: block;
margin: 10px 0;
color: #3498db;
text-decoration: none;
}
.text-content {
margin: 15px 0;
line-height: 1.8;
}
.disabled-element {
color: #95a5a6;
margin: 15px 0;
}
.interactive-element {
display: inline-block;
padding: 8px 16px;
background: #3498db;
color: white;
border-radius: 4px;
margin: 10px 5px;
cursor: pointer;
}
.cursor-info {
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
margin-top: 40px;
}
.cursor-info h3 {
color: #2c3e50;
margin-bottom: 15px;
}
.cursor-samples {
display: flex;
gap: 30px;
flex-wrap: wrap;
}
.cursor-sample {
text-align: center;
flex: 1;
min-width: 150px;
}
.cursor-label {
display: inline-block;
padding: 8px 15px;
background: #e74c3c;
color: white;
border-radius: 4px;
margin-top: 10px;
}
footer {
text-align: center;
margin-top: 40px;
color: #7f8c8d;
font-size: 0.9rem;
}
body.cat-theme {
cursor: url('https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/normal.cur'), auto;
}
body.cat-theme a {
cursor: url('https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/ayuda.cur'), auto;
}
body.cat-theme a:active {
cursor: url('https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/work.cur'), alias;
}
body.cat-theme p {
cursor: url('https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/texto.cur'), auto;
}
body.cat-theme span.disabled {
cursor: url('https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/No_Disponible.cur'), auto;
}
body.flower-theme {
cursor: url('https://cdn.jsdelivr.net/gh/fz6m/Private-web@1.5/image/cursor/normal.cur'), auto;
}
body.flower-theme a {
cursor: url('https://cdn.jsdelivr.net/gh/fz6m/Private-web@1.5/image/cursor/ayuda.cur'), auto;
}
body.flower-theme p {
cursor: url('https://cdn.jsdelivr.net/gh/fz6m/Private-web@1.5/image/cursor/texto.cur'), auto;
}
body.flower-theme span.disabled {
cursor: url('https://cdn.jsdelivr.net/gh/fz6m/Private-web@1.5/image/cursor/No_Disponible.cur'), auto;
}
body.emoji-theme {
cursor: url('https://cdn.jsdelivr.net/gh/mirai-mamori/web-img/img/Nor.cur'), auto;
}
body.emoji-theme a {
cursor: url('https://cdn.jsdelivr.net/gh/mirai-mamori/web-img/img/Ayu.cur'), auto;
}
body.emoji-theme a:active {
cursor: url('https://cdn.jsdelivr.net/gh/mirai-mamori/web-img/img/Work.cur'), alias;
}
body.emoji-theme p {
cursor: url('https://cdn.jsdelivr.net/gh/mirai-mamori/web-img/img/Texto.cur'), auto;
}
body.emoji-theme span.disabled {
cursor: url('https://cdn.jsdelivr.net/gh/mirai-mamori/web-img/img/no.cur'), auto;
}
</style>
</head>
<body class="cat-theme">
<div class="container">
<header>
<h1>自定义鼠标样式集合</h1>
<p class="description">这是一个展示不同自定义鼠标样式的页面。您可以在下方选择不同的主题，然后在测试区域体验各种鼠标样式效果。</p>
</header>
<div class="theme-selector">
<button class="theme-btn cat active" data-theme="cat">猫咪主题</button>
<button class="theme-btn flower" data-theme="flower">花瓣主题</button>
<button class="theme-btn emoji" data-theme="emoji">表情包主题</button>
</div>
<div class="test-area">
<div class="test-card">
<h3>链接测试</h3>
<div class="test-content">
<a href="#" class="link-item">普通链接（悬停查看效果）</a>
<a href="#" class="link-item">点击我查看激活状态</a>
<a href="#" class="link-item">另一个测试链接</a>
</div>
</div>
<div class="test-card">
<h3>文本段落测试</h3>
<div class="test-content">
<p class="text-content">这是一个段落文本。将鼠标悬停在此文本上，可以看到特殊的文本选择鼠标样式。</p>
<p class="text-content">另一个测试段落，用于展示自定义鼠标效果在不同文本上的表现。</p>
</div>
</div>
<div class="test-card">
<h3>交互元素测试</h3>
<div class="test-content">
<div class="interactive-element">可点击元素1</div>
<div class="interactive-element">可点击元素2</div>
<div class="interactive-element">可点击元素3</div>
</div>
</div>
<div class="test-card">
<h3>禁用/不可用状态</h3>
<div class="test-content">
<span class="disabled">不可用元素1（模拟禁用状态）</span>
<span class="disabled">不可用元素2（模拟禁用状态）</span>
<span class="disabled">不可用元素3（模拟禁用状态）</span>
</div>
</div>
</div>
<div class="cursor-info">
<h3>当前主题光标说明</h3>
<div class="cursor-samples">
<div class="cursor-sample">
<div class="interactive-element">普通状态</div>
<div class="cursor-label">默认光标</div>
</div>
<div class="cursor-sample">
<a href="#" class="link-item">链接状态</a>
<div class="cursor-label">链接光标</div>
</div>
<div class="cursor-sample">
<p class="text-content">文本状态</p>
<div class="cursor-label">文本光标</div>
</div>
<div class="cursor-sample">
<span class="disabled">禁用状态</span>
<div class="cursor-label">禁用光标</div>
</div>
</div>
</div>
<footer>
<p>注意：由于浏览器安全限制，某些浏览器可能要求光标图像来自同一域，或可能限制光标大小。</p>
<p>光标资源来自网络，版权归原作者所有。</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const themeButtons = document.querySelectorAll('.theme-btn');
const body = document.body;
themeButtons.forEach(button => {
button.addEventListener('click', function() {
const theme = this.getAttribute('data-theme');
body.classList.remove('cat-theme', 'flower-theme', 'emoji-theme');
body.classList.add(`${theme}-theme`);
themeButtons.forEach(btn => btn.classList.remove('active'));
this.classList.add('active');
});
});
});
</script>
</body>
</html>
index.html
style.css
index.js