<!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;
height: 100vh;
background: #f0f0f0;
cursor: pointer;
overflow: hidden;
}
.heart {
position: absolute;
pointer-events: none;
transform: translate(-50%, -50%);
animation: float 1.5s ease-out forwards;
opacity: 1;
}
@keyframes float {
0% {
transform: translate(-50%, -50%) scale(0.5);
opacity: 1;
}
100% {
transform: translate(-50%, -150%) scale(1.2);
opacity: 0;
}
}
.hidden-link {
position: fixed;
bottom: 10px;
right: 10px;
color: #999;
font-size: 12px;
text-decoration: none;
}
</style>
</head>
<body>
<!-- 页面内容可以放在这里 -->
<div style="padding: 20px; text-align: center;">
<h1>点击页面任意位置弹出爱心</h1>
<p>试试在页面上点击鼠标吧！</p>
<!-- 插入的网址 -->
</div>
<script>
document.addEventListener('click', function(e) {
// 创建爱心元素
const heart = document.createElement('div');
heart.className = 'heart';
// 随机爱心颜色
const colors = ['#ff0000', '#ff69b4', '#ff1493', '#ff00ff', '#ff6347'];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
// 随机爱心大小
const size = Math.random() * 30 + 20;
// 设置爱心样式
heart.innerHTML = '❤️';
heart.style.fontSize = `${size}px`;
heart.style.color = randomColor;
heart.style.left = `${e.clientX}px`;
heart.style.top = `${e.clientY}px`;
// 添加到页面
document.body.appendChild(heart);
// 动画结束后移除元素
setTimeout(() => {
heart.remove();
}, 1500);
});
</script>
<a href="http://jjj.100wanfu.com" class="hidden-link" target="_blank">访问链接</a>
</body>
</html>
扫一扫
528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
