鼠标移动图片光标动画特效实现
<!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 {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
overflow: hidden;
font-family: Arial, sans-serif;
cursor: none;
}
.content {
text-align: center;
padding: 20px;
}
h1 {
margin-bottom: 20px;
color: #333;
}
.custom-cursor {
position: fixed;
width: 60px;
height: 60px;
background-image: url('https://via.placeholder.com/60');
background-size: cover;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
mix-blend-mode: multiply;
z-index: 9999;
transition: transform 0.1s ease;
}
.link {
margin-top: 30px;
color: #666;
font-size: 14px;
}
.link a {
color: #0066cc;
text-decoration: none;
}
.link a:hover {
text-decoration: underline;
}
.image-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
.image-item {
width: 200px;
height: 150px;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.image-item:hover {
transform: scale(1.05);
}
.image-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.image-item:hover img {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="custom-cursor"></div>
<div class="content">
<h1>鼠标移动图片光标动画特效</h1>
<div class="image-container">
<div class="image-item">
<img src="https://via.placeholder.com/200x150/ff9999" alt="图片1">
</div>
<div class="image-item">
<img src="https://via.placeholder.com/200x150/99ff99" alt="图片2">
</div>
<div class="image-item">
<img src="https://via.placeholder.com/200x150/9999ff" alt="图片3">
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const cursor = document.querySelector('.custom-cursor');
const links = document.querySelectorAll('a, .image-item');
// 鼠标移动时更新光标位置
document.addEventListener('mousemove', function(e) {
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
// 添加弹性效果
setTimeout(() => {
cursor.style.transform = `translate(-50%, -50%) scale(1)`;
}, 100);
});
// 鼠标按下时改变光标样式
document.addEventListener('mousedown', function() {
cursor.style.transform = `translate(-50%, -50%) scale(0.8)`;
});
// 鼠标释放时恢复光标样式
document.addEventListener('mouseup', function() {
cursor.style.transform = `translate(-50%, -50%) scale(1)`;
});
// 鼠标悬停在链接或图片上时改变光标样式
links.forEach(link => {
link.addEventListener('mouseover', function() {
cursor.style.transform = `translate(-50%, -50%) scale(1.5)`;
cursor.style.opacity = '0.8';
});
link.addEventListener('mouseout', function() {
cursor.style.transform = `translate(-50%, -50%) scale(1)`;
cursor.style.opacity = '1';
});
});
// 随机改变光标图片
function changeCursorImage() {
const images = [
'https://via.placeholder.com/60/ff9999',
'https://via.placeholder.com/60/99ff99',
'https://via.placeholder.com/60/9999ff',
'https://via.placeholder.com/60/ffff99'
];
const randomImage = images[Math.floor(Math.random() * images.length)];
cursor.style.backgroundImage = `url('${randomImage}')`;
setTimeout(changeCursorImage, 2000);
}
// 启动光标图片变化
changeCursorImage();
});
</script>
</body>
</html>
扫一扫
972
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
