<h1>10 Animated Mouse Pointers</h1>
<p class="subtitle">Hover over each area to see the animated cursor effect</p>
<div class="container">
<div class="pointer-card">
<h3>1. Pulse Cursor</h3>
<div class="preview-area" data-cursor="pulse">
<span class="preview-text">Hover here</span>
<div class="custom-cursor cursor-default"></div>
</div>
</div>
<div class="pointer-card">
<h3>2. Trail Cursor</h3>
<div class="preview-area" data-cursor="trail">
<span class="preview-text">Move around</span>
</div>
</div>
<div class="pointer-card">
<h3>3. Ripple Cursor</h3>
<div class="preview-area" data-cursor="ripple">
<span class="preview-text">Hover here</span>
<div class="custom-cursor cursor-ripple"></div>
</div>
</div>
<div class="pointer-card">
<h3>4. Glow Cursor</h3>
<div class="preview-area" data-cursor="glow">
<span class="preview-text">Hover here</span>
<div class="custom-cursor cursor-glow"></div>
</div>
</div>
<div class="pointer-card">
<h3>5. Spinner Cursor</h3>
<div class="preview-area" data-cursor="spin">
<span class="preview-text">Hover here</span>
<div class="custom-cursor cursor-spin"></div>
</div>
</div>
<div class="pointer-card">
<h3>6. Square Rotate</h3>
<div class="preview-area" data-cursor="square">
<span class="preview-text">Hover here</span>
<div class="custom-cursor cursor-square"></div>
</div>
</div>
<div class="pointer-card">
<h3>7. Heart Beat</h3>
<div class="preview-area" data-cursor="heart">
<span class="preview-text">Hover here</span>
<div class="custom-cursor cursor-heart">❤</div>
</div>
</div>
<div class="pointer-card">
<h3>8. Twinkling Star</h3>
<div class="preview-area" data-cursor="star">
<span class="preview-text">Hover here</span>
<div class="custom-cursor cursor-star">⭐</div>
</div>
</div>
<div class="pointer-card">
<h3>9. Wave Cursor</h3>
<div class="preview-area" data-cursor="wave">
<span class="preview-text">Hover here</span>
<div class="custom-cursor cursor-wave"></div>
</div>
</div>
<div class="pointer-card">
<h3>10. Rainbow Cursor</h3>
<div class="preview-area" data-cursor="rainbow">
<span class="preview-text">Hover here</span>
<div class="custom-cursor cursor-rainbow"></div>
</div>
</div>
</div>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 20px;
color: #fff;
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
text-align: center;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.subtitle {
font-size: 1rem;
opacity: 0.9;
margin-bottom: 40px;
text-align: center;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
max-width: 1200px;
width: 100%;
}
.pointer-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 30px;
text-align: center;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
.pointer-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 48px rgba(0,0,0,0.15);
}
.pointer-card h3 {
color: #667eea;
font-size: 1.2rem;
margin-bottom: 20px;
font-weight: 600;
}
.preview-area {
background: #f8f9fa;
border-radius: 10px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border: 2px dashed #e0e0e0;
cursor: none;
}
.preview-text {
color: #999;
font-size: 0.9rem;
}
.custom-cursor {
position: absolute;
pointer-events: none;
z-index: 10;
display: none;
}
/* Cursor Styles */
.cursor-default {
width: 24px;
height: 24px;
background: #667eea;
border-radius: 50%;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.7; }
}
.cursor-trail {
width: 20px;
height: 20px;
background: linear-gradient(45deg, #667eea, #764ba2);
border-radius: 50%;
animation: fadeTrail 0.5s forwards;
}
@keyframes fadeTrail {
to { transform: scale(0); opacity: 0; }
}
.cursor-ripple {
width: 30px;
height: 30px;
border: 2px solid #667eea;
border-radius: 50%;
animation: ripple 1s infinite;
}
@keyframes ripple {
0% { transform: scale(0.5); opacity: 1; }
100% { transform: scale(2); opacity: 0; }
}
.cursor-glow {
width: 30px;
height: 30px;
background: #667eea;
border-radius: 50%;
box-shadow: 0 0 20px #667eea, 0 0 40px #667eea;
animation: glow 1s infinite alternate;
}
@keyframes glow {
from { box-shadow: 0 0 20px #667eea; }
to { box-shadow: 0 0 40px #667eea, 0 0 60px #667eea; }
}
.cursor-spin {
width: 40px;
height: 40px;
border: 3px solid transparent;
border-top-color: #667eea;
border-right-color: #764ba2;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.cursor-square {
width: 25px;
height: 25px;
background: #667eea;
animation: rotate3d 2s infinite;
}
@keyframes rotate3d {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
}
.cursor-heart {
font-size: 24px;
color: #e74c3c;
animation: heartbeat 1s infinite;
}
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
25% { transform: scale(1.2); }
50% { transform: scale(1); }
}
.cursor-star {
font-size: 24px;
color: #f39c12;
animation: starTwinkle 1.5s infinite;
}
@keyframes starTwinkle {
0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
50% { transform: scale(1.3) rotate(180deg); opacity: 0.7; }
}
.cursor-wave {
width: 30px;
height: 30px;
background: #667eea;
border-radius: 50%;
animation: wave 1s infinite;
}
@keyframes wave {
0%, 100% { border-radius: 50%; }
25% { border-radius: 40% 60% 60% 40%; }
50% { border-radius: 60% 40% 40% 60%; }
75% { border-radius: 40% 60% 60% 40%; }
}
.cursor-rainbow {
width: 25px;
height: 25px;
border-radius: 50%;
animation: rainbow 2s linear infinite;
}
@keyframes rainbow {
0% { background: #e74c3c; }
20% { background: #f39c12; }
40% { background: #2ecc71; }
60% { background: #3498db; }
80% { background: #9b59b6; }
100% { background: #e74c3c; }
}
const previewAreas = document.querySelectorAll('.preview-area');
previewAreas.forEach(area => {
const cursorType = area.dataset.cursor;
const cursor = area.querySelector('.custom-cursor');
area.addEventListener('mouseenter', () => {
if (cursor) cursor.style.display = 'block';
});
area.addEventListener('mouseleave', () => {
if (cursor) cursor.style.display = 'none';
});
area.addEventListener('mousemove', (e) => {
const rect = area.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
if (cursorType === 'trail') {
const trail = document.createElement('div');
trail.className = 'custom-cursor cursor-trail';
trail.style.left = x - 10 + 'px';
trail.style.top = y - 10 + 'px';
trail.style.display = 'block';
area.appendChild(trail);
setTimeout(() => trail.remove(), 500);
} else if (cursor) {
cursor.style.left = x - cursor.offsetWidth / 2 + 'px';
cursor.style.top = y - cursor.offsetHeight / 2 + 'px';
}
});
});
No comments yet. Be the first!