e4b3a132b1
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 45s
- Introduced new CSS and JS files for Pi Day, Pride, Rain, and Storm effects. - Updated existing seasonal styles (e.g., Halloween, Hearts, Resurrection) to improve performance with 'contain: layout paint'. - Enhanced animations for seasonal effects, including adjustments to keyframes and element creation logic. - Added configuration options for new effects in the main seasonals.js file. - Updated test-site.html to include new seasonal options in the dropdown.
87 lines
1.6 KiB
CSS
87 lines
1.6 KiB
CSS
.carnival-container {
|
|
display: block;
|
|
position: fixed;
|
|
overflow: hidden;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
perspective: 600px;
|
|
contain: layout paint;
|
|
}
|
|
|
|
.carnival-wrapper {
|
|
position: fixed;
|
|
z-index: 15;
|
|
top: -20px;
|
|
will-change: transform;
|
|
animation-name: carnival-fall;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: 1;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.carnival-sway-wrapper {
|
|
will-change: transform;
|
|
animation-name: carnival-sway;
|
|
animation-timing-function: ease-in-out;
|
|
animation-iteration-count: infinite;
|
|
animation-direction: alternate;
|
|
}
|
|
|
|
.carnival-confetti {
|
|
width: 8px;
|
|
height: 16px;
|
|
background-color: #f0f;
|
|
will-change: transform;
|
|
animation-name: carnival-flutter;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
.carnival-confetti.circle {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.carnival-confetti.square {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.carnival-confetti.triangle {
|
|
width: 10px;
|
|
height: 10px;
|
|
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
|
}
|
|
|
|
@keyframes carnival-fall {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
transform: translateY(120vh);
|
|
}
|
|
}
|
|
|
|
@keyframes carnival-sway {
|
|
0% {
|
|
transform: translateX(calc(var(--sway-amount, 50px) * -1));
|
|
}
|
|
100% {
|
|
transform: translateX(var(--sway-amount, 50px));
|
|
}
|
|
}
|
|
|
|
@keyframes carnival-flutter {
|
|
0% {
|
|
transform: rotate3d(var(--rx, 1), var(--ry, 1), var(--rz, 0), 0deg);
|
|
}
|
|
100% {
|
|
transform: rotate3d(var(--rx, 1), var(--ry, 1), var(--rz, 0), var(--rot-dir, 360deg));
|
|
}
|
|
}
|