纯CSS3绘制火龙果动画特效

原创已于 2025-06-27 11:31:43 修改 · 879 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-13 14:01:27 首次发布

<!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, #f5f7fa, #c3cfe2);
overflow: hidden;
font-family: Arial, sans-serif;
}

.dragon-fruit {
position: relative;
width: 200px;
height: 300px;
animation: float 3s ease-in-out infinite;
}

.fruit-body {
position: absolute;
width: 100%;
height: 100%;
background: #ff4d6d;
border-radius: 100px 100px 150px 150px;
box-shadow:
inset -10px -10px 30px rgba(0,0,0,0.2),
inset 10px 10px 30px rgba(255,255,255,0.3);
}

.leaf {
position: absolute;
width: 30px;
height: 80px;
background: #4caf50;
border-radius: 15px;
top: -40px;
transform-origin: bottom center;
}

.leaf:nth-child(1) {
left: 50%;
transform: translateX(-50%) rotate(0deg);
animation: leaf-sway 3s ease-in-out infinite;
}

.leaf:nth-child(2) {
left: 30%;
transform: rotate(-20deg);
animation: leaf-sway 3.5s ease-in-out infinite reverse;
}

.leaf:nth-child(3) {
right: 30%;
transform: rotate(20deg);
animation: leaf-sway 4s ease-in-out infinite;
}

.scale {
position: absolute;
width: 20px;
height: 20px;
background: rgba(255,255,255,0.3);
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.5);
animation: scale-pulse 2s infinite alternate;
}

.title {
position: absolute;
top: 50px;
color: #ff4d6d;
font-size: 28px;
text-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

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

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

@keyframes leaf-sway {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(10deg); }
}

@keyframes scale-pulse {
0% { transform: scale(0.8); opacity: 0.7; }
100% { transform: scale(1.2); opacity: 1; }
}
</style>
</head>
<body>
<h1 class="title">火龙果动画特效</h1>

<div class="dragon-fruit">
<div class="fruit-body" id="fruit-body">

</div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
</div>