102 lines
1.9 KiB
CSS
102 lines
1.9 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;
|
|
}
|
|
|
|
.carnival-wrapper {
|
|
position: fixed;
|
|
z-index: 15;
|
|
top: -20px;
|
|
will-change: top;
|
|
animation-name: carnival-fall;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
.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: ease-in-out;
|
|
animation-iteration-count: infinite;
|
|
animation-duration: 2s;
|
|
}
|
|
|
|
.carnival-confetti.circle {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.carnival-confetti.square {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.carnival-confetti.triangle {
|
|
width: 0;
|
|
height: 0;
|
|
background-color: transparent !important;
|
|
border-left: 5px solid transparent;
|
|
border-right: 5px solid transparent;
|
|
border-bottom: 10px solid;
|
|
width: 10px;
|
|
height: 10px;
|
|
background-color: inherit;
|
|
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
|
}
|
|
|
|
@keyframes carnival-fall {
|
|
0% {
|
|
top: -10%;
|
|
}
|
|
100% {
|
|
top: 110%;
|
|
}
|
|
}
|
|
|
|
@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(1, 1, 1, 0deg);
|
|
}
|
|
25% {
|
|
transform: rotate3d(1, 0.5, 0, 90deg);
|
|
}
|
|
50% {
|
|
transform: rotate3d(0.5, 1, 0.5, 180deg);
|
|
}
|
|
75% {
|
|
transform: rotate3d(0, 0.5, 1, 270deg);
|
|
}
|
|
100% {
|
|
transform: rotate3d(1, 1, 1, 360deg);
|
|
}
|
|
}
|