点击爱心散开动画特效

ziblog

已于 2025-06-27 11:23:02 修改

阅读量829

点赞数 21

CC 4.0 BY-SA版权

文章标签： css css3 javascript

于 2025-06-17 13:52:05 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148714231

<!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;
overflow: hidden;
background: #ffebee;
font-family: Arial, sans-serif;
cursor: pointer;
}

.hearts-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}

.heart {
position: absolute;
width: 30px;
height: 30px;
animation: heart-fly 2s ease-out forwards;
opacity: 0;
}

.heart svg {
width: 100%;
height: 100%;
fill: currentColor;
filter: drop-shadow(0 0 5px currentColor);
}

@keyframes heart-fly {
0% {
transform: translate(-50%, -50%) scale(0.3);
opacity: 0;
}
20% {
opacity: 1;
}
100% {
transform: translate(var(--tx), var(--ty)) scale(1.5);
opacity: 0;
}
}

.instructions {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #e91e63;
font-size: 24px;
text-align: center;
z-index: 0;
pointer-events: none;
text-shadow: 0 0 10px rgba(233, 30, 99, 0.3);
}

/* 插入的链接样式 */
.custom-link {
position: fixed;
bottom: 20px;
right: 20px;
color: rgba(233, 30, 99, 0.7);
text-decoration: none;
font-size: 14px;
background: rgba(255, 255, 255, 0.3);
padding: 8px 15px;
border-radius: 20px;
z-index: 10;
transition: all 0.3s ease;
}

.custom-link:hover {
color: #e91e63;
background: rgba(255, 255, 255, 0.5);
}
</style>
</head>
<body>
<div class="hearts-container" id="heartsContainer"></div>
<div class="instructions">点击屏幕任意位置<br>散开彩色爱心</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
const container = document.getElementById('heartsContainer');
const colors = [
'#e91e63', // 粉红
'#f44336', // 红色
'#9c27b0', // 紫色
'#2196f3', // 蓝色
'#00bcd4', // 青色
'#4caf50', // 绿色
'#ff9800', // 橙色
'#ff5722' // 深橙
];

// 爱心SVG
const heartSVG = `
<svg viewBox="0 0 24 24">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
`;

// 点击事件
document.addEventListener('click', function(e) {
createHearts(e.clientX, e.clientY);
});

// 触摸事件
document.addEventListener('touchstart', function(e) {
e.preventDefault();
const touch = e.touches[0];
createHearts(touch.clientX, touch.clientY);
});

// 创建爱心
function createHearts(x, y) {
const heartCount = 12 + Math.floor(Math.random() * 6);

for (let i = 0; i < heartCount; i++) {
const heart = document.createElement('div');
heart.className = 'heart';
heart.innerHTML = heartSVG;
heart.style.color = colors[Math.floor(Math.random() * colors.length)];
heart.style.left = x + 'px';
heart.style.top = y + 'px';

// 随机飞行方向
const angle = Math.random() * Math.PI * 2;
const distance = 100 + Math.random() * 100;
heart.style.setProperty('--tx', `${Math.cos(angle) * distance}px`);
heart.style.setProperty('--ty', `${Math.sin(angle) * distance - 50}px`);

// 随机动画延迟和持续时间
heart.style.animationDelay = `${Math.random() * 0.5}s`;
heart.style.animationDuration = `${1 + Math.random() * 1.5}s`;

container.appendChild(heart);

// 动画结束后移除元素
setTimeout(() => {
heart.remove();
}, 2000);
}
}
});
</script>
</body>
</html>