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: 0;
|
|
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: rgb(0, 0, 0);
|
|
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: translate3d(0, -10vh, 0);
|
|
}
|
|
100% {
|
|
transform: translate3d(0, 110vh, 0);
|
|
}
|
|
}
|
|
|
|
@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));
|
|
}
|
|
}
|