跟随鼠标的皮卡丘特效

原创已于 2025-06-27 13:23:00 修改 · 777 阅读

·

8

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

于 2025-06-09 17:00:21 首次发布

<!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>
body {
margin: 0;
padding: 0;
background-color: #f0f0f0;
overflow: hidden;
height: 100vh;
cursor: none;
}

.pikachu {
position: absolute;
width: 100px;
height: 100px;
background-image: url('https://i.imgur.com/3QX6xQk.png');
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
transform: translate(-50%, -50%);
transition: transform 0.1s ease-out;
z-index: 9999;
}

.tail {
position: absolute;
width: 60px;
height: 30px;
background-image: url('https://i.imgur.com/JzVvZQz.png');
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
transform-origin: left center;
transition: transform 0.2s ease-out;
z-index: 9998;
}

.spark {
position: absolute;
width: 10px;
height: 10px;
background-color: #ffcc00;
border-radius: 50%;
pointer-events: none;
opacity: 0;
z-index: 9997;
}

.link {
position: absolute;
bottom: 20px;
right: 20px;
color: #666;
font-family: Arial, sans-serif;
text-decoration: none;
z-index: 1;
}
</style>
</head>
<body>
<div class="pikachu" id="pikachu"></div>
<div class="tail" id="tail"></div>

<script>
const pikachu = document.getElementById('pikachu');
const tail = document.getElementById('tail');
let mouseX = 0;
let mouseY = 0;
let pikachuX = 0;
let pikachuY = 0;
let tailAngle = 0;
let direction = 1;

// 跟随鼠标移动
document.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;

// 创建电火花效果
if (Math.random() > 0.7) {
createSpark();
}
});

// 动画循环
function animate() {
// 皮卡丘位置缓动
pikachuX += (mouseX - pikachuX) * 0.1;
pikachuY += (mouseY - pikachuY) * 0.1;

// 更新皮卡丘位置
pikachu.style.left = pikachuX + 'px';
pikachu.style.top = pikachuY + 'px';

// 尾巴摆动效果
tailAngle += 0.1 * direction;
if (tailAngle > 0.5) direction = -1;
if (tailAngle < -0.5) direction = 1;

// 更新尾巴位置和角度
const tailX = pikachuX - 30;
const tailY = pikachuY;
tail.style.left = tailX + 'px';
tail.style.top = tailY + 'px';
tail.style.transform = `rotate(${tailAngle}rad)`;

// 根据移动方向翻转皮卡丘
if (mouseX > pikachuX) {
pikachu.style.transform = 'translate(-50%, -50%) scaleX(1)';
tail.style.transform = `rotate(${tailAngle}rad) scaleX(1)`;
} else {
pikachu.style.transform = 'translate(-50%, -50%) scaleX(-1)';
tail.style.transform = `rotate(${-tailAngle}rad) scaleX(-1)`;
}

requestAnimationFrame(animate);
}

// 创建电火花效果
function createSpark() {
const spark = document.createElement('div');
spark.className = 'spark';

// 随机位置
const angle = Math.random() * Math.PI * 2;
const distance = 20 + Math.random() * 30;
const x = pikachuX + Math.cos(angle) * distance;
const y = pikachuY + Math.sin(angle) * distance;

spark.style.left = x + 'px';
spark.style.top = y + 'px';
spark.style.opacity = '0.8';
spark.style.transform = `scale(${0.5 + Math.random()})`;

document.body.appendChild(spark);

// 动画
let scale = 0.5 + Math.random();
let opacity = 0.8;

const sparkInterval = setInterval(() => {
scale += 0.05;
opacity -= 0.05;

spark.style.transform = `scale(${scale})`;
spark.style.opacity = opacity;

if (opacity <= 0) {
clearInterval(sparkInterval);
spark.remove();
}
}, 30);
}

// 初始化位置
pikachuX = window.innerWidth / 2;
pikachuY = window.innerHeight / 2;
pikachu.style.left = pikachuX + 'px';
pikachu.style.top = pikachuY + 'px';
tail.style.left = (pikachuX - 30) + 'px';
tail.style.top = pikachuY + 'px';

// 开始动画
animate();
</script>
</body>
</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。