万圣节巫婆魔法场景特效-优快云博客

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

<!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;
display: flex;
justify-content: center;
align-items: center;
background: #0a0a0a;
overflow: hidden;
font-family: Arial, sans-serif;
}

.scene {
position: relative;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, #1a0033, #000);
}

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

.witch {
position: absolute;
width: 200px;
height: 300px;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
}

.witch-body {
position: absolute;
width: 100px;
height: 150px;
background: #4a2545;
bottom: 0;
left: 50px;
border-radius: 50% 50% 0 0;
}

.witch-head {
position: absolute;
width: 80px;
height: 80px;
background: #f5deb3;
border-radius: 50%;
bottom: 150px;
left: 60px;
}

.witch-hat {
position: absolute;
width: 120px;
height: 80px;
background: #000;
bottom: 220px;
left: 40px;
border-radius: 50% 50% 0 0;
}

.witch-hat::after {
content: '';
position: absolute;
width: 20px;
height: 100px;
background: #000;
bottom: -100px;
left: 50px;
}

.broom {
position: absolute;
width: 200px;
height: 20px;
background: #8B4513;
bottom: 50px;
left: -50px;
transform: rotate(20deg);
z-index: 2;
}

.broom::after {
content: '';
position: absolute;
width: 150px;
height: 80px;
background: #556B2F;
bottom: -30px;
left: 50px;
border-radius: 50%;
transform: rotate(20deg);
}

.magic-circle {
position: absolute;
width: 300px;
height: 300px;
border: 3px dashed #ff00ff;
border-radius: 50%;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
animation: rotate 20s linear infinite;
opacity: 0.6;
}

.magic-circle::before {
content: '';
position: absolute;
width: 250px;
height: 250px;
border: 2px dashed #00ffff;
border-radius: 50%;
top: 25px;
left: 25px;
animation: rotate-reverse 15s linear infinite;
}

.sparkle {
position: absolute;
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
filter: blur(1px);
animation: sparkle-move 3s infinite;
}

.sparkle:nth-child(1) {
top: 100px;
left: 100px;
animation-delay: 0s;
}
.sparkle:nth-child(2) {
top: 200px;
left: 300px;
animation-delay: 0.5s;
}
.sparkle:nth-child(3) {
top: 150px;
left: 500px;
animation-delay: 1s;
}
.sparkle:nth-child(4) {
top: 250px;
left: 200px;
animation-delay: 1.5s;
}
.sparkle:nth-child(5) {
top: 180px;
left: 400px;
animation-delay: 2s;
}

.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(6) {
top: 50px;
left: -50px;
animation-delay: 0s;
}
.bat:nth-child(7) {
top: 100px;
left: -50px;
animation-delay: 2s;
}
.bat:nth-child(8) {
top: 150px;
left: -50px;
animation-delay: 4s;
}
.bat:nth-child(9) {
top: 200px;
left: -50px;
animation-delay: 6s;
}
.bat:nth-child(10) {
top: 250px;
left: -50px;
animation-delay: 8s;
}

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

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

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

@keyframes sparkle-move {
0% { transform: translate(0, 0); opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { transform: translate(100px, -100px); opacity: 0; }
}

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

/* 插入的链接样式 */
.custom-link {
position: fixed;
bottom: 20px;
right: 20px;
color: rgba(255,255,255,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: white;
background: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div class="scene">
<div class="moon"></div>

<div class="witch">
<div class="witch-hat"></div>
<div class="witch-head"></div>
<div class="witch-body"></div>
<div class="broom"></div>
</div>

<div class="magic-circle"></div>

<div class="sparkle"></div>
<div class="sparkle"></div>
<div class="sparkle"></div>
<div class="sparkle"></div>
<div class="sparkle"></div>

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


</body>
</html>