jQuery爱心雨飘落动画特效

ziblog

已于 2025-06-27 13:13:36 修改

阅读量664

点赞数 23

CC 4.0 BY-SA版权

文章标签：智能 javascript 前端爱心雨

于 2025-06-13 11:35:55 首次发布

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery爱心雨飘落动画特效</title>
<style>
/* 基础样式 */
body {
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
height: 100vh;
font-family: Arial, sans-serif;
}

/* 爱心样式 */
.heart {
position: absolute;
pointer-events: none;
animation: falling linear forwards;
transform-origin: center;
z-index: 1;
}

/* 爱心雨动画 */
@keyframes falling {
to {
transform: translateY(100vh) rotate(360deg);
}
}

/* 插入链接样式 */
.inserted-link {
position: fixed;
bottom: 20px;
right: 20px;
color: #ff69b4;
font-size: 14px;
text-decoration: none;
z-index: 100;
background: rgba(0, 0, 0, 0.5);
padding: 5px 10px;
border-radius: 5px;
transition: all 0.3s;
}

.inserted-link:hover {
color: #fff;
background: rgba(255, 105, 180, 0.7);
}

/* 标题样式 */
.title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ff69b4;
font-size: 48px;
text-align: center;
text-shadow: 0 0 10px #ff69b4,
0 0 20px #ff69b4,
0 0 30px #ff69b4;
z-index: 10;
opacity: 0.9;
}
</style>
</head>
<body>
<div class="title">爱心雨特效</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
// 爱心颜色数组
const heartColors = [
'#ff69b4', // 热粉色
'#ff1493', // 深粉色
'#ff00ff', // 紫红色
'#ff33cc', // 霓虹粉
'#ff66b2' // 浅粉色
];

// 爱心形状SVG
const heartSVG = `
<svg viewBox="0 0 32 29.6" width="100%" height="100%">
<path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z" fill="{color}"/>
</svg>
`;

// 创建爱心雨
function createHeart() {
// 随机大小 (20px - 50px)
const size = Math.random() * 30 + 20;

// 随机起始位置 (水平方向)
const startPosX = Math.random() * $(window).width();

// 随机动画持续时间 (3s - 8s)
const duration = Math.random() * 5 + 3;

// 随机颜色
const color = heartColors[Math.floor(Math.random() * heartColors.length)];

// 创建爱心元素
const heart = $('<div class="heart"></div>').css({
left: startPosX,
top: -50,
width: size + 'px',
height: size + 'px',
animationDuration: duration + 's'
});

// 设置SVG内容并填充颜色
heart.html(heartSVG.replace('{color}', color));

// 添加到页面
$('body').append(heart);

// 动画结束后移除元素
setTimeout(function() {
heart.remove();
}, duration * 1000);
}

// 初始创建一些爱心
for (let i = 0; i < 15; i++) {
setTimeout(createHeart, i * 300);
}

// 每隔一段时间创建新的爱心
setInterval(createHeart, 300);

// 点击页面任意位置创建爱心
$(document).on('click', function(e) {
for (let i = 0; i < 5; i++) {
setTimeout(function() {
const heart = $('<div class="heart"></div>').css({
left: e.pageX + (Math.random() * 40 - 20),
top: e.pageY + (Math.random() * 40 - 20),
width: '30px',
height: '30px',
animationDuration: '4s'
});

const color = heartColors[Math.floor(Math.random() * heartColors.length)];
heart.html(heartSVG.replace('{color}', color));

$('body').append(heart);

setTimeout(function() {
heart.remove();
}, 4000);
}, i * 100);
}
});

// 窗口大小改变时调整爱心位置
$(window).on('resize', function() {
$('.heart').each(function() {
const left = parseFloat($(this).css('left'));
if (left > $(window).width()) {
$(this).css('left', $(window).width() - 50);
}
});
});
});
</script>
</body>
</html>