万圣节动画场景特效

原创已于 2025-06-27 11:22:11 修改 · 471 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-17 13:56:38 首次发布

<!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;
height: 100vh;
overflow: hidden;
background: linear-gradient(to bottom, #1a0033, #000);
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}

/* 月亮 */
.moon {
position: absolute;
width: 100px;
height: 100px;
background: #f5f5dc;
border-radius: 50%;
top: 50px;
right: 100px;
box-shadow: 0 0 40px #f5f5dc;
animation: pulse 4s infinite alternate;
}

/* 幽灵 */
.ghost {
position: absolute;
width: 120px;
height: 150px;
left: 30%;
bottom: 100px;
animation: float 3s ease-in-out infinite;
}

.ghost-body {
position: absolute;
width: 120px;
height: 120px;
background: rgba(255, 255, 255, 0.9);
border-radius: 60px 60px 0 0;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.ghost-body::before,
.ghost-body::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
top: 70px;
}

.ghost-body::before {
left: -15px;
}

.ghost-body::after {
right: -15px;
}

.ghost-bottom {
position: absolute;
width: 120px;
height: 30px;
top: 120px;
display: flex;
justify-content: space-between;
}

.ghost-bottom div {
width: 20px;
height: 30px;
background: rgba(255, 255, 255, 0.9);
border-radius: 0 0 20px 20px;
animation: wave 2s ease-in-out infinite;
}

.ghost-bottom div:nth-child(1) {
animation-delay: 0.1s;
}

.ghost-bottom div:nth-child(2) {
animation-delay: 0.2s;
}

.ghost-bottom div:nth-child(3) {
animation-delay: 0.3s;
}

.ghost-face {
position: absolute;
width: 100%;
top: 40px;
display: flex;
justify-content: center;
gap: 15px;
}

.ghost-eye {
width: 15px;
height: 15px;
background: #333;
border-radius: 50%;
animation: blink 4s ease-in-out infinite;
}

/* 南瓜灯 */
.pumpkin {
position: absolute;
width: 100px;
height: 120px;
right: 30%;
bottom: 80px;
animation: float 4s ease-in-out infinite 1s;
}

.pumpkin-body {
position: absolute;
width: 100px;
height: 120px;
background: #ff8c00;
border-radius: 50% 50% 40% 40%;
box-shadow: 0 0 10px #ff8c00;
}

.pumpkin-ridge {
position: absolute;
width: 10px;
height: 120px;
background: #e67300;
left: 45px;
border-radius: 5px;
}

.pumpkin-ridge::before,
.pumpkin-ridge::after {
content: '';
position: absolute;
width: 10px;
height: 120px;
background: #e67300;
border-radius: 5px;
}

.pumpkin-ridge::before {
transform: rotate(30deg);
transform-origin: left top;
}

.pumpkin-ridge::after {
transform: rotate(-30deg);
transform-origin: right top;
}

.pumpkin-face {
position: absolute;
width: 60px;
height: 40px;
background: #1a0033;
top: 40px;
left: 20px;
border-radius: 50% 50% 0 0;
clip-path: polygon(
0% 100%, 20% 60%, 40% 100%,
60% 60%, 80% 100%, 100% 60%,
100% 100%
);
}

.pumpkin-face::before,
.pumpkin-face::after {
content: '';
position: absolute;
width: 15px;
height: 15px;
background: #1a0033;
border-radius: 50%;
top: 10px;
}

.pumpkin-face::before {
left: 5px;
clip-path: polygon(
0% 100%, 50% 0%, 100% 100%
);
}

.pumpkin-face::after {
right: 5px;
clip-path: polygon(
0% 100%, 50% 0%, 100% 100%
);
}

/* 蝙蝠 */
.bat {
position: absolute;
width: 40px;
height: 20px;
background: #333;
border-radius: 50%;
animation: fly 10s linear infinite;
}

.bat::before,
.bat::after {
content: '';
position: absolute;
width: 30px;
height: 50px;
background: #333;
border-radius: 50% 50% 0 0;
top: -15px;
}

.bat::before {
left: -25px;
transform: rotate(-30deg);
}

.bat::after {
right: -25px;
transform: rotate(30deg);
}

.bat:nth-child(1) {
top: 50px;
left: -50px;
animation-delay: 0s;
}

.bat:nth-child(2) {
top: 100px;
left: -50px;
animation-delay: 2s;
}

.bat:nth-child(3) {
top: 150px;
left: -50px;
animation-delay: 4s;
}

.bat:nth-child(4) {
top: 200px;
left: -50px;
animation-delay: 6s;
}

.bat:nth-child(5) {
top: 250px;
left: -50px;
animation-delay: 8s;
}

/* 动画关键帧 */
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}

@keyframes wave {
0%, 100% {
height: 30px;
transform: translateY(0);
}
50% {
height: 20px;
transform: translateY(10px);
}
}

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

@keyframes pulse {
0%, 100% {
box-shadow: 0 0 40px #f5f5dc;
}
50% {
box-shadow: 0 0 60px #f5f5dc;
}
}

@keyframes fly {
0% {
transform: translateX(-100px);
}
100% {
transform: translateX(calc(100vw + 100px));
}
}

/* 插入的链接样式 */
.custom-link {
position: fixed;
bottom: 20px;
right: 20px;
color: rgba(255, 200, 50, 0.7);
text-decoration: none;
font-size: 14px;
background: rgba(0, 0, 0, 0.3);
padding: 8px 15px;
border-radius: 20px;
z-index: 10;
transition: all 0.3s ease;
}

.custom-link:hover {
color: rgba(255, 200, 50, 1);
background: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="moon"></div>

<div class="ghost">
<div class="ghost-body"></div>
<div class="ghost-bottom">
<div></div>
<div></div>
<div></div>
</div>
<div class="ghost-face">
<div class="ghost-eye"></div>
<div class="ghost-eye"></div>
</div>
</div>

<div class="pumpkin">
<div class="pumpkin-body"></div>
<div class="pumpkin-ridge"></div>
<div class="pumpkin-face"></div>
</div>

<div class="bat"></div>
<div class="bat"></div>
<div class="bat"></div>
<div class="bat"></div>
<div class="bat"></div>

</body>
</html>