165 lines
3.7 KiB
CSS
165 lines
3.7 KiB
CSS
.halloween-container {
|
|
display: block;
|
|
position: fixed;
|
|
overflow: hidden;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
contain: layout paint;
|
|
}
|
|
|
|
.halloween {
|
|
will-change: transform;
|
|
position: fixed;
|
|
bottom: -10%;
|
|
z-index: 15;
|
|
user-select: none;
|
|
cursor: default;
|
|
animation-name: halloween-fall, halloween-shake;
|
|
animation-duration: 10s, 3s;
|
|
animation-timing-function: linear, ease-in-out;
|
|
animation-iteration-count: infinite, infinite;
|
|
animation-play-state: running, running
|
|
}
|
|
|
|
|
|
|
|
@keyframes halloween-fall {
|
|
0% {
|
|
bottom: -10%;
|
|
}
|
|
|
|
100% {
|
|
bottom: 110%;
|
|
}
|
|
}
|
|
|
|
@keyframes halloween-shake {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateX(0)
|
|
}
|
|
|
|
50% {
|
|
transform: translateX(80px)
|
|
}
|
|
}
|
|
|
|
/* --- Fog Layer --- */
|
|
.halloween-fog-layer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 40vh;
|
|
pointer-events: none;
|
|
z-index: 1000;
|
|
overflow: hidden;
|
|
mask-image: linear-gradient(to top, black, transparent);
|
|
}
|
|
.halloween-fog-blob {
|
|
position: absolute;
|
|
bottom: -10vh;
|
|
width: 150vw;
|
|
height: 50vh;
|
|
background: radial-gradient(ellipse at center, rgba(120, 130, 140, 0.4) 0%, transparent 60%);
|
|
border-radius: 50%;
|
|
filter: blur(15px);
|
|
}
|
|
.halloween-fog-blob:nth-child(1) {
|
|
will-change: transform;
|
|
left: -20vw;
|
|
animation: fog-float1 25s ease-in-out infinite alternate;
|
|
}
|
|
.halloween-fog-blob:nth-child(2) {
|
|
will-change: transform;
|
|
left: -50vw;
|
|
background: radial-gradient(ellipse at center, rgba(100, 110, 120, 0.3) 0%, transparent 65%);
|
|
animation: fog-float2 35s ease-in-out infinite alternate;
|
|
}
|
|
@keyframes fog-float1 {
|
|
0% { transform: translateX(0) scale(1); opacity: 0.8; }
|
|
50% { opacity: 1; }
|
|
100% { transform: translateX(20vw) scale(1.1); opacity: 0.6; }
|
|
}
|
|
@keyframes fog-float2 {
|
|
0% { transform: translateX(0) scale(1.1); opacity: 0.7; }
|
|
50% { opacity: 1; }
|
|
100% { transform: translateX(30vw) scale(1); opacity: 0.5; }
|
|
}
|
|
|
|
/* --- Spiders --- */
|
|
.halloween-spider-wrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
z-index: 1002;
|
|
transform-origin: top;
|
|
will-change: transform;
|
|
pointer-events: auto;
|
|
padding: 20px; /* Increase hit area */
|
|
translate: 0 -50px;
|
|
}
|
|
|
|
.halloween-thread {
|
|
width: 30px; /* Wider hit area for mouse interaction */
|
|
height: 100vh;
|
|
margin-top: -100vh;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
.halloween-thread::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 2px;
|
|
height: 100%;
|
|
background: linear-gradient(to bottom, rgba(200, 200, 200, 0.1), rgba(200, 200, 200, 0.6));
|
|
}
|
|
.halloween-spider {
|
|
will-change: transform;
|
|
animation: spider-swing 3s ease-in-out infinite alternate;
|
|
transform-origin: top center;
|
|
}
|
|
|
|
/* MARK: SPIDER SWAY CONFIGURATION */
|
|
@keyframes wind-sway {
|
|
0% { transform: rotate(0deg); }
|
|
25% { transform: rotate(2deg); }
|
|
75% { transform: rotate(-2deg); }
|
|
100% { transform: rotate(0deg); }
|
|
}
|
|
|
|
@keyframes spider-drop {
|
|
0% { transform: translateY(-50px); }
|
|
30% { transform: translateY(var(--drop-height, 50vh)); }
|
|
60% { transform: translateY(var(--drop-height, 50vh)); }
|
|
100% { transform: translateY(-50px); }
|
|
}
|
|
@keyframes spider-swing {
|
|
0% { transform: rotate(-10deg); }
|
|
100% { transform: rotate(10deg); }
|
|
}
|
|
|
|
/* Mice */
|
|
.halloween-mouse {
|
|
position: absolute;
|
|
z-index: 10000;
|
|
pointer-events: none;
|
|
will-change: left;
|
|
}
|
|
@keyframes mouse-run-right {
|
|
0% { left: -10vw; }
|
|
100% { left: 110vw; }
|
|
}
|
|
@keyframes mouse-run-left {
|
|
0% { left: 110vw; }
|
|
100% { left: -10vw; }
|
|
} |