HTML5 SVG糖果爱心动画特效

HTML5 SVG糖果爱心动画特效实现

原创已于 2025-06-27 11:27:38 修改 · 497 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

于 2025-06-14 13:32:00 首次发布

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 SVG糖果爱心动画特效</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #ffebee;
overflow: hidden;
font-family: 'Arial', sans-serif;
}

.candy-heart-container {
position: relative;
width: 400px;
height: 400px;
}

.candy-heart {
position: absolute;
width: 200px;
height: 180px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter: drop-shadow(0 0 15px rgba(233, 30, 99, 0.5));
animation: pulse 2s ease infinite;
}

.candy-heart path {
stroke: #c2185b;
stroke-width: 5;
fill: #e91e63;
stroke-dasharray: 1550;
stroke-dashoffset: 1550;
animation: draw 3s ease-in-out forwards;
}

@keyframes draw {
to {
stroke-dashoffset: 0;
}
}

@keyframes pulse {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
}
50% {
transform: translate(-50%, -50%) scale(1.1);
}
}

.candy-stripes {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: visible;
}

.stripe {
position: absolute;
width: 200px;
height: 20px;
background: rgba(255, 255, 255, 0.3);
transform-origin: left center;
animation: stripe-animation 4s ease-in-out infinite;
}

@keyframes stripe-animation {
0%, 100% {
transform: rotate(0deg) translateY(0);
opacity: 0.3;
}
50% {
transform: rotate(5deg) translateY(-10px);
opacity: 0.7;
}
}

.candy-dots {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

.dot {
position: absolute;
width: 15px;
height: 15px;
background: white;
border-radius: 50%;
opacity: 0.8;
animation: dot-float 5s ease-in-out infinite;
}

@keyframes dot-float {
0%, 100% {
transform: translate(0, 0);
}
25% {
transform: translate(5px, -5px);
}
50% {
transform: translate(0, -10px);
}
75% {
transform: translate(-5px, -5px);
}
}

.candy-highlights {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

.highlight {
position: absolute;
width: 40px;
height: 20px;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
filter: blur(5px);
animation: highlight-shine 3s ease-in-out infinite;
}

@keyframes highlight-shine {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 0.7;
}
}

.message {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
color: #e91e63;
text-align: center;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
opacity: 0;
animation: fade-in 2s ease 1s forwards;
}

@keyframes fade-in {
to {
opacity: 1;
}
}

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

.floating-candy {
position: absolute;
opacity: 0;
animation: float-up 6s linear forwards;
}

@keyframes float-up {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(-500px) rotate(360deg);
opacity: 0;
}
}

.hidden-link {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: rgba(0, 0, 0, 0.3);
font-size: 12px;
text-decoration: none;
z-index: 100;
}
</style>
</head>
<body>
<div class="candy-heart-container">
<svg class="candy-heart" viewBox="0 0 200 180">
<path d="M100,30 C120,0 180,20 180,70 C180,120 100,170 100,170 C100,170 20,120 20,70 C20,20 80,0 100,30 Z"/>
</svg>

<div class="candy-stripes">
<div class="stripe" style="top: 30%; left: 10%; animation-delay: 0s;"></div>
<div class="stripe" style="top: 50%; left: 10%; animation-delay: 0.5s;"></div>
<div class="stripe" style="top: 70%; left: 10%; animation-delay: 1s;"></div>
</div>

<div class="candy-dots">
<div class="dot" style="top: 40%; left: 30%; animation-delay: 0s;"></div>
<div class="dot" style="top: 60%; left: 25%; animation-delay: 0.5s;"></div>
<div class="dot" style="top: 50%; left: 70%; animation-delay: 1s;"></div>
<div class="dot" style="top: 30%; left: 65%; animation-delay: 1.5s;"></div>
<div class="dot" style="top: 70%; left: 60%; animation-delay: 2s;"></div>
</div>

<div class="candy-highlights">
<div class="highlight" style="top: 20%; left: 30%; animation-delay: 0s;"></div>
<div class="highlight" style="top: 70%; left: 60%; animation-delay: 1s;"></div>
</div>

<div class="floating-candies" id="floating-candies"></div>

<div class="message">甜蜜情人节<br>爱如糖果般甜美</div>
</div>