纯CSS3卡通甜甜圈动画特效-优快云博客

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

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS3卡通甜甜圈动画特效</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #ffcce6, #ffb3d9);
overflow: hidden;
font-family: Arial, sans-serif;
}

.plate {
position: relative;
width: 300px;
height: 300px;
background: #f0f0f0;
border-radius: 50%;
box-shadow:
0 10px 20px rgba(0,0,0,0.1),
inset 0 5px 15px rgba(255,255,255,0.8);
display: flex;
justify-content: center;
align-items: center;
animation: rotate 20s linear infinite;
}

.donut {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background: #e6b800;
box-shadow:
0 5px 15px rgba(0,0,0,0.2),
inset 0 -10px 20px rgba(0,0,0,0.1);
animation: bounce 2s ease-in-out infinite;
}

.donut:before {
content: '';
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: #ffcc00;
border-radius: 50%;
box-shadow:
inset 0 5px 10px rgba(255,255,255,0.5),
inset 0 -5px 10px rgba(0,0,0,0.1);
}

.icing {
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
width: 180px;
height: 80px;
background: #ff6699;
border-radius: 50% 50% 40% 40%;
box-shadow:
inset 0 5px 10px rgba(255,255,255,0.5),
inset 0 -5px 10px rgba(0,0,0,0.1);
animation: wiggle 3s ease-in-out infinite;
}

.sprinkles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

.sprinkle {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
animation: sprinkle-color 5s infinite alternate;
}

.bite {
position: absolute;
width: 40px;
height: 40px;
background: linear-gradient(135deg, #ffcce6, #ffb3d9);
border-radius: 50%;
top: 30px;
right: 30px;
transform: rotate(45deg);
z-index: 2;
}

.eyes {
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 30px;
z-index: 3;
}

.eye {
width: 20px;
height: 20px;
background: #663300;
border-radius: 50%;
animation: blink 4s infinite;
}

.mouth {
position: absolute;
width: 40px;
height: 20px;
border-bottom: 4px solid #663300;
border-radius: 0 0 40px 40px;
top: 100px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
animation: smile 5s infinite;
}

.link {
position: absolute;
bottom: 20px;
right: 20px;
color: #ff6699;
font-size: 14px;
text-decoration: none;
font-weight: bold;
}

@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

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

@keyframes wiggle {
0%, 100% { transform: translateX(-50%) rotate(0deg); }
25% { transform: translateX(-50%) rotate(5deg); }
75% { transform: translateX(-50%) rotate(-5deg); }
}

@keyframes sprinkle-color {
0% { background: #ff0000; }
25% { background: #00ff00; }
50% { background: #0000ff; }
75% { background: #ffff00; }
100% { background: #ff00ff; }
}

@keyframes blink {
0%, 48%, 52%, 100% { height: 20px; }
50% { height: 2px; }
}

@keyframes smile {
0%, 70%, 100% {
width: 40px;
height: 20px;
border-radius: 0 0 40px 40px;
}
80% {
width: 30px;
height: 30px;
border-radius: 50%;
}
}
</style>
</head>
<body>
<div class="plate">
<div class="donut">
<div class="icing"></div>
<div class="bite"></div>
<div class="eyes">
<div class="eye"></div>
<div class="eye"></div>
</div>
<div class="mouth"></div>
<div class="sprinkles" id="sprinkles"></div>
</div>
</div>