在QQ空间中添加鼠标特效代码，可以让你的空间更加生动有趣，以下是一些常见的鼠标特效代码示例，你可以直接复制并粘贴到你的QQ空间HTML代码中。
跟随鼠标的星星效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mouse Follow Stars</title>
<style>
body {
overflow: hidden;
margin: 0;
height: 100vh;
background: #000;
}
.star {
position: absolute;
width: 2px;
height: 2px;
background: white;
box-shadow: 0 0 5px white;
border-radius: 50%;
pointer-events: none;
}
</style>
</head>
<body>
<script>
document.addEventListener('mousemove', function(e) {
const star = document.createElement('div');
star.className = 'star';
star.style.left = e.clientX + 'px';
star.style.top = e.clientY + 'px';
document.body.appendChild(star);
setTimeout(() => {
star.remove();
}, 1000);
});
</script>
</body>
</html>鼠标点击爆炸效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mouse Click Explosion</title>
<style>
body {
overflow: hidden;
margin: 0;
height: 100vh;
background: #000;
}
.explosion {
position: absolute;
width: 10px;
height: 10px;
background: red;
border-radius: 50%;
pointer-events: none;
animation: explode 1s ease-out forwards;
}
@keyframes explode {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(5); opacity: 0; }
}
</style>
</head>
<body>
<script>
document.addEventListener('click', function(e) {
const explosion = document.createElement('div');
explosion.className = 'explosion';
explosion.style.left = e.clientX + 'px';
explosion.style.top = e.clientY + 'px';
document.body.appendChild(explosion);
setTimeout(() => {
explosion.remove();
}, 1000);
});
</script>
</body>
</html>鼠标悬停旋转效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mouse Hover Rotate</title>
<style>
body {
overflow: hidden;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #000;
}
.rotate-box {
width: 100px;
height: 100px;
background: red;
transition: transform 0.3s ease-in-out;
}
</style>
</head>
<body>
<div class="rotate-box"></div>
<script>
const box = document.querySelector('.rotate-box');
document.addEventListener('mousemove', function(e) {
const rect = box.getBoundingClientRect();
const x = e.clientX - rect.left - rect.width / 2;
const y = e.clientY - rect.top - rect.height / 2;
const angle = Math.atan2(y, x) * (180 / Math.PI);
box.style.transform =rotate(${angle}deg);
});
</script>
</body>
</html>鼠标点击散射效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mouse Click Scatter</title>
<style>
body {
overflow: hidden;
margin: 0;
height: 100vh;
background: #000;
}
.scatter {
position: absolute;
width: 5px;
height: 5px;
background: white;
border-radius: 50%;
pointer-events: none;
}
</style>
</head>
<body>
<script>
document.addEventListener('click', function(e) {
for (let i = 0; i < 100; i++) {
const scatter = document.createElement('div');
scatter.className = 'scatter';
scatter.style.left = e.clientX + 'px';
scatter.style.top = e.clientY + 'px';
scatter.style.transform =translate(${Math.random() * 20 - 10}px, ${Math.random() * 20 - 10}px);
scatter.style.animation =scatter ${Math.random() * 2 + 1}s ease-out forwards;
document.body.appendChild(scatter);
}
});
</script>
<style>
@keyframes scatter {
0% { transform: translate(0, 0); opacity: 1; }
100% { transform: translate(var(--x), var(--y)); opacity: 0; }
}
</style>
</body>
</html>你可以将这些代码片段直接复制到你的QQ空间HTML编辑器中，以实现不同的鼠标特效，这些代码可能需要根据你的具体需求进行调整和优化。
本文来自作者[思蕾]投稿，不代表刢刢七立场，如若转载，请注明出处：https://007bld.cn/baike/202501-32029.html
评论列表（4条）
我是刢刢七的签约作者“思蕾”！
希望本篇文章《qq空间鼠标特效代码 qq特效代码大全可复制》能对你有所帮助！
本站[刢刢七]内容主要涵盖：本公司专业开发 破解定制各类游戏辅助插件，一对一指导包有效果
本文概览：在QQ空间中添加鼠标特效代码，可以让你的空间更加生动有趣，以下是一些常见的鼠标特效代码示例，你可以直接复制并粘贴到你的QQ空间HTML代码中， 跟随鼠标的星星效果<!DO...