紫色爱心跳动特效

ziblog

已于 2025-06-27 15:29:50 修改

阅读量896

点赞数 24

CC 4.0 BY-SA版权

文章标签： css css3 html

于 2025-04-30 14:22:26 首次发布

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

<!DOCTYPE html>
<html lang="zh">
<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: #0a0a1a;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}

.heart {
position: relative;
width: 100px;
height: 90px;
animation: heartbeat 1.5s infinite;
}

.heart:before, .heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: linear-gradient(45deg, #6a11cb 0%, #2575fc 100%);
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}

.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}

@keyframes heartbeat {
0% { transform: scale(1); }
25% { transform: scale(1.1); }
50% { transform: scale(1); }
75% { transform: scale(1.1); }
100% { transform: scale(1); }
}

.footer {
position: absolute;
bottom: 20px;
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
}

.footer a {
color: #6a11cb;
text-decoration: none;
}

.floating-hearts {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}

.floating-heart {
position: absolute;
width: 20px;
height: 18px;
opacity: 0;
animation: float 6s ease-in infinite;
}

.floating-heart:before, .floating-heart:after {
position: absolute;
content: "";
left: 10px;
top: 0;
width: 10px;
height: 16px;
background: linear-gradient(45deg, rgba(106, 17, 203, 0.7) 0%, rgba(37, 117, 252, 0.7) 100%);
border-radius: 10px 10px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}

.floating-heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}

@keyframes float {
0% {
transform: translateY(0) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100vh) rotate(360deg);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="heart"></div>

<div class="floating-hearts" id="floatingHearts"></div>

<div class="footer">

</div>

<script>
// 创建漂浮的小爱心
function createFloatingHearts() {
const container = document.getElementById('floatingHearts');
const heartCount = 15;

for (let i = 0; i < heartCount; i++) {
const heart = document.createElement('div');
heart.className = 'floating-heart';

// 随机位置
const left = Math.random() * 100;
const delay = Math.random() * 5;
const duration = 3 + Math.random() * 4;
const size = 10 + Math.random() * 20;

heart.style.left = `${left}vw`;
heart.style.bottom = `-20px`;
heart.style.animationDelay = `${delay}s`;
heart.style.animationDuration = `${duration}s`;
heart.style.width = `${size}px`;
heart.style.height = `${size * 0.9}px`;

container.appendChild(heart);
}
}

// 页面加载后创建爱心
window.addEventListener('load', createFloatingHearts);

// 每隔一段时间重新创建爱心，保持动态效果
setInterval(() => {
const container = document.getElementById('floatingHearts');
container.innerHTML = '';
createFloatingHearts();
}, 6000);
</script>
</body>
</html>