纯css动画荷包蛋动画-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS荷包蛋动画</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
}

.frying-pan {
position: relative;
width: 300px;
height: 300px;
background: linear-gradient(to bottom, #8B4513, #A0522D);
border-radius: 50%;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
}

.frying-pan::before {
content: '';
position: absolute;
width: 90%;
height: 90%;
background: linear-gradient(to bottom, #A0522D, #8B4513);
border-radius: 50%;
}

.frying-pan::after {
content: '';
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 20px;
background: #696969;
border-radius: 0 0 10px 10px;
}

.egg {
position: relative;
width: 180px;
height: 180px;
animation: sizzle 2s infinite alternate;
}

.egg-white {
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.9);
border-radius: 50% 50% 45% 45%;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
animation: bubble 3s infinite ease-in-out;
}

.egg-yolk {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: radial-gradient(circle at 30% 30%, #FFD700, #FF8C00);
border-radius: 50%;
box-shadow: 0 0 15px rgba(255, 165, 0, 0.7);
animation: wobble 2s infinite ease-in-out;
}

.bubble {
position: absolute;
background: rgba(255, 255, 255, 0.7);
border-radius: 50%;
animation: float 3s infinite ease-in-out;
}

.bubble:nth-child(1) {
width: 15px;
height: 15px;
top: 30%;
left: 20%;
animation-delay: 0s;
}

.bubble:nth-child(2) {
width: 10px;
height: 10px;
top: 50%;
left: 70%;
animation-delay: 0.5s;
}

.bubble:nth-child(3) {
width: 8px;
height: 8px;
top: 70%;
left: 30%;
animation-delay: 1s;
}

@keyframes sizzle {
0% { transform: translateY(0); }
100% { transform: translateY(-5px); }
}

@keyframes bubble {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}

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

@keyframes float {
0% { transform: translateY(0) scale(1); opacity: 0.7; }
50% { transform: translateY(-20px) scale(1.1); opacity: 1; }
100% { transform: translateY(-40px) scale(0.8); opacity: 0; }
}

.credit {
position: absolute;
bottom: 20px;
color: #666;
font-size: 12px;
}
</style>
</head>
<body>
<div class="frying-pan">
<div class="egg">
<div class="egg-white"></div>
<div class="egg-yolk"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
</div>
</div>


</body>
</html>