卡通汉堡包动画特效

原创已于 2025-06-27 13:11:56 修改 · 613 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-12 13:38:41 首次发布

<!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;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #FFD166;
font-family: 'Arial', sans-serif;
overflow: hidden;
}

.container {
position: relative;
width: 100%;
max-width: 500px;
text-align: center;
z-index: 10;
}

h1 {
color: #EF476F;
font-size: 2.5em;
text-shadow: 2px 2px 0 #FFF;
margin-bottom: 30px;
animation: bounce 2s infinite;
}

@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

.burger {
position: relative;
width: 200px;
height: 150px;
margin: 0 auto 40px;
cursor: pointer;
}

/* 汉堡包顶部面包 */
.top-bun {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 220px;
height: 60px;
background: #F4A261;
border-radius: 110px 110px 20px 20px;
box-shadow: 0 5px 0 #E76F51;
z-index: 5;
transition: all 0.3s;
}

/* 芝麻粒 */
.sesame {
position: absolute;
width: 8px;
height: 8px;
background: #FFF;
border-radius: 50%;
box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

/* 汉堡包肉饼 */
.patty {
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 30px;
background: #8B4513;
border-radius: 15px;
box-shadow: 0 3px 0 #5E2C04;
z-index: 4;
transition: all 0.3s;
}

/* 奶酪 */
.cheese {
position: absolute;
top: 90px;
left: 50%;
transform: translateX(-50%);
width: 180px;
height: 15px;
background: #FFD700;
border-radius: 5px;
z-index: 3;
transition: all 0.3s;
clip-path: polygon(0% 0%, 100% 0%, 90% 50%, 100% 100%, 0% 100%, 10% 50%);
}

/* 生菜 */
.lettuce {
position: absolute;
top: 105px;
left: 50%;
transform: translateX(-50%);
width: 190px;
height: 15px;
background: #7CFC00;
border-radius: 10px;
z-index: 2;
transition: all 0.3s;
clip-path: polygon(
0% 50%, 10% 0%, 20% 50%, 30% 0%, 40% 50%,
50% 0%, 60% 50%, 70% 0%, 80% 50%, 90% 0%, 100% 50%,
90% 100%, 80% 50%, 70% 100%, 60% 50%, 50% 100%,
40% 50%, 30% 100%, 20% 50%, 10% 100%, 0% 50%
);
}

/* 汉堡包底部面包 */
.bottom-bun {
position: absolute;
top: 120px;
left: 50%;
transform: translateX(-50%);
width: 220px;
height: 30px;
background: #F4A261;
border-radius: 20px 20px 50px 50px;
box-shadow: 0 -5px 0 #E76F51;
z-index: 1;
transition: all 0.3s;
}

/* 汉堡包打开动画 */
.burger.open .top-bun {
transform: translateX(-50%) translateY(-40px) rotate(-10deg);
}

.burger.open .patty {
transform: translateX(-50%) translateY(-20px);
}

.burger.open .cheese {
transform: translateX(-50%) translateY(-10px);
}

.burger.open .lettuce {
transform: translateX(-50%) translateY(0px);
}

.burger.open .bottom-bun {
transform: translateX(-50%) translateY(20px) rotate(10deg);
}

/* 番茄片 */
.tomato {
position: absolute;
top: 75px;
left: 50%;
transform: translateX(-50%) scale(0);
width: 180px;
height: 10px;
background: #FF6347;
border-radius: 10px;
z-index: 3;
transition: all 0.3s;
}

.burger.open .tomato {
transform: translateX(-50%) scale(1);
}

/* 酱汁滴落效果 */
.sauce {
position: absolute;
width: 10px;
height: 10px;
background: #FF4500;
border-radius: 50% 50% 50% 0;
opacity: 0;
z-index: 6;
}

.burger.open .sauce {
animation: sauceDrip 1.5s forwards;
}

@keyframes sauceDrip {
0% {
transform: translateY(0);
opacity: 0;
}
20% {
opacity: 1;
}
100% {
transform: translateY(100px);
opacity: 0;
}
}

/* 盘子 */
.plate {
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 300px;
height: 30px;
background: #FFF;
border-radius: 50%;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
z-index: 0;
}

.plate::before {
content: '';
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 2px dashed #DDD;
border-radius: 50%;
}

/* 描述文本 */
.description {
color: #073B4C;
margin: 20px 0 30px;
font-size: 1.1em;
line-height: 1.6;
}

/* 链接按钮 */
.link {
margin-top: 30px;
}

.link a {
display: inline-block;
padding: 12px 25px;
background: #EF476F;
color: white;
text-decoration: none;
border-radius: 30px;
font-weight: bold;
box-shadow: 0 5px 0 #D90429;
transition: all 0.2s;
}

.link a:hover {
transform: translateY(3px);
box-shadow: 0 2px 0 #D90429;
}

/* 漂浮的食物元素 */
.floating-item {
position: absolute;
opacity: 0.6;
animation: float 10s infinite linear;
z-index: -1;
}

@keyframes float {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(-100vh) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<h1>美味汉堡包</h1>

<div class="burger" id="burger">

<div class="sesame" style="top: 15px; left: 30px;"></div>
<div class="sesame" style="top: 10px; left: 90px;"></div>
<div class="sesame" style="top: 20px; left: 150px;"></div>
<div class="sesame" style="top: 15px; left: 190px;"></div>


<div class="top-bun"></div>
<div class="patty"></div>
<div class="tomato"></div>
<div class="cheese"></div>
<div class="lettuce"></div>
<div class="bottom-bun"></div>


<div class="sauce" style="left: 40%; animation-delay: 0.3s;"></div>
<div class="sauce" style="left: 60%; animation-delay: 0.6s;"></div>
<div class="sauce" style="left: 50%; animation-delay: 0.9s;"></div>
</div>

<div class="plate"></div>

<div class="description">
点击汉堡包查看美味层次！<br>
看看我们精心准备的各种新鲜食材
</div>


</div>