/home/bonphmya/wendykred.online/wp-content/plugins/conveythis-translate/app/widget/css/confetti.css
.icon {
font-size: 32px;
font-weight: bold;
letter-spacing: 32px;
position: relative;
}
.confetti {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.confetti-piece {
position: absolute;
width: 8px;
height: 16px;
background: #ffd300;
top: 0;
opacity: 0;
}
.confetti-piece:nth-child(1) {
left: 7%;
transform: rotate(30deg);
-webkit-animation: makeItRain 1000ms infinite ease-out;
animation: makeItRain 1000ms infinite ease-out;
-webkit-animation-delay: 260ms;
animation-delay: 260ms;
-webkit-animation-duration: 992ms;
animation-duration: 992ms;
}
.confetti-piece:nth-child(2) {
left: 14%;
transform: rotate(65deg);
-webkit-animation: makeItRain 1000ms infinite ease-out;
animation: makeItRain 1000ms infinite ease-out;
-webkit-animation-delay: 59ms;
animation-delay: 59ms;
-webkit-animation-duration: 704ms;
animation-duration: 704ms;
}
.confetti-piece:nth-child(3) {
left: 21%;
transform: rotate(74deg);
-webkit-animation: makeItRain 1000ms infinite ease-out;
animation: makeItRain 1000ms infinite ease-out;
-webkit-animation-delay: 52ms;
animation-delay: 52ms;
-webkit-animation-duration: 991ms;
animation-duration: 991ms;
}
.confetti-piece:nth-child(4) {
left: 28%;
transform: rotate(-56deg);
-webkit-animation: makeItRain 1000ms infinite ease-out;
animation: makeItRain 1000ms infinite ease-out;
-webkit-animation-delay: 480ms;
animation-delay: 480ms;
-webkit-animation-duration: 976ms;
animation-duration: 976ms;
}
.confetti-piece:nth-child(5) {
left: 35%;
transform: rotate(26deg);
-webkit-animation: makeItRain 1000ms infinite ease-out;
animation: makeItRain 1000ms infinite ease-out;
-webkit-animation-delay: 6ms;
animation-delay: 6ms;
-webkit-animation-duration: 705ms;
animation-duration: 705ms;
}
.confetti-piece:nth-child(6) {
left: 42%;
transform: rotate(24deg);
-webkit-animation: makeItRain 1000ms infinite ease-out;
animation: makeItRain 1000ms infinite ease-out;
-webkit-animation-delay: 473ms;
animation-delay: 473ms;
-webkit-animation-duration: 829ms;
animation-duration: 829ms;
}
.confetti-piece:nth-child(7) {
left: 49%;
transform: rotate(5deg);
-webkit-animation: makeItRain 1000ms infinite ease-out;
animation: makeItRain 1000ms infinite ease-out;
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
-webkit-animation-duration: 1128ms;
animation-duration: 1128ms;
}
.confetti-piece:nth-child(8) {
left: 56%;
transform: rotate(76deg);
-webkit-animation: makeItRain 1000ms infinite ease-out;
animation: makeItRain 1000ms infinite ease-out;
-webkit-animation-delay: 487ms;
animation-delay: 487ms;
-webkit-animation-duration: 1072ms;
animation-duration: 1072ms;
}
.confetti-piece:nth-child(9) {
left: 63%;
transform: rotate(-75deg);
-webkit-animation: makeItRain 1000ms infinite ease-out;
animation: makeItRain 1000ms infinite ease-out;
-webkit-animation-delay: 158ms;
animation-delay: 158ms;
-webkit-animation-duration: 1166ms;
animation-duration: 1166ms;
}
.confetti-piece:nth-child(10) {
left: 70%;
transform: rotate(74deg);
-webkit-animation: makeItRain 1000ms infinite ease-out;
animation: makeItRain 1000ms infinite ease-out;
-webkit-animation-delay: 220ms;
animation-delay: 220ms;
-webkit-animation-duration: 890ms;
animation-duration: 890ms;
}
.confetti-piece:nth-child(11) {
left: 77%;
transform: rotate(4deg);
-webkit-animation: makeItRain 1000ms infinite ease-out;
animation: makeItRain 1000ms infinite ease-out;
-webkit-animation-delay: 188ms;
animation-delay: 188ms;
-webkit-animation-duration: 1057ms;
animation-duration: 1057ms;
}
.confetti-piece:nth-child(12) {
left: 84%;
transform: rotate(-30deg);
-webkit-animation: makeItRain 1000ms infinite ease-out;
animation: makeItRain 1000ms infinite ease-out;
-webkit-animation-delay: 399ms;
animation-delay: 399ms;
-webkit-animation-duration: 830ms;
animation-duration: 830ms;
}
.confetti-piece:nth-child(13) {
left: 91%;
transform: rotate(68deg);
-webkit-animation: makeItRain 1000ms infinite ease-out;
animation: makeItRain 1000ms infinite ease-out;
-webkit-animation-delay: 147ms;
animation-delay: 147ms;
-webkit-animation-duration: 891ms;
animation-duration: 891ms;
}
.confetti-piece:nth-child(odd) {
background: #17d3ff;
}
.confetti-piece:nth-child(even) {
z-index: 1;
}
.confetti-piece:nth-child(4n) {
width: 5px;
height: 12px;
-webkit-animation-duration: 2000ms;
animation-duration: 2000ms;
}
.confetti-piece:nth-child(3n) {
width: 3px;
height: 10px;
-webkit-animation-duration: 2500ms;
animation-duration: 2500ms;
-webkit-animation-delay: 1000ms;
animation-delay: 1000ms;
}
.confetti-piece:nth-child(4n-7) {
background: #ff4e91;
}
@-webkit-keyframes makeItRain {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
transform: translateY(600px);
}
}
@keyframes makeItRain {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
transform: translateY(600px);
}
}