Adding confetti to a guide
Hi! I want to add confetti to a guide. I found the KB that has the code snippet, but I don't want the confetti to appear on the whole window, I just want the confetti contained within the guide. Does anyone know how to modify the snippet to do that?
0
コメント
I do it with CSS and HTML. Put the code in the step that you want to show it.
#confettis {
overflow: hidden;
position: absolute;
height: 100%;
width: 100%;
}
.confetti {
left: 50%;
width: 16px;
height: 16px;
position: absolute;
transform-origin: left top;
animation: confetti 5s ease-in-out -2s infinite;
}
@keyframes confetti {
0% {
transform: rotateZ(15deg) rotateY(0deg) translate(0, 0);
}
25% {
transform: rotateZ(5deg) rotateY(360deg) translate(-5vw, 20vh);
}
50% {
transform: rotateZ(15deg) rotateY(720deg) translate(5vw, 60vh);
}
75% {
transform: rotateZ(5deg) rotateY(1080deg) translate(-10vw, 80vh);
}
100% {
transform: rotateZ(15deg) rotateY(1440deg) translate(10vw, 110vh);
}
}
.confetti:nth-child(1) {
left: 10%;
animation-delay: 0;
background-color: #fc0120;
}
.confetti:nth-child(2) {
left: 20%;
animation-delay: -5s;
background-color: #8257e6;
}
.confetti:nth-child(3) {
left: 30%;
animation-delay: -3s;
background-color: #ffbf4d;
}
.confetti:nth-child(4) {
left: 40%;
animation-delay: -2.5s;
background-color: #fe5d7a;
}
.confetti:nth-child(5) {
left: 50%;
animation-delay: -4s;
background-color: #45ec9c;
}
.confetti:nth-child(6) {
left: 60%;
animation-delay: -6s;
background-color: #f6e327;
}
.confetti:nth-child(7) {
left: 70%;
animation-delay: -1.5s;
background-color: #f769ce;
}
.confetti:nth-child(8) {
left: 80%;
animation-delay: -2s;
background-color: #007de7;
}
.confetti:nth-child(9) {
left: 90%;
animation-delay: -3.5s;
background-color: #63b4fc;
}
.confetti:nth-child(10) {
left: 100%;
animation-delay: -2.5s;
background-color: #f9c4ea;
}
<div id="confettis">
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
</div>
Oh thank you! My apologies but I'm not as familiar with CSS and HTML. I got it to work but how do I make it less like a waterfall and more like a single pop of confetti?
サインインしてコメントを残してください。