Skip to content

Instantly share code, notes, and snippets.

@nsa-yoda

nsa-yoda/confetti.html

Created October 19, 2020 14:56
Show Gist options
  • Save nsa-yoda/15b645b88401efd5ea50432397a2a554 to your computer and use it in GitHub Desktop.
Save nsa-yoda/15b645b88401efd5ea50432397a2a554 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Confetti (gradient from colorzilla.com)
Raw
confetti.html
<!DOCTYPE html>
<html>
<head>
<title>confetti test</title>
<style>
.container {
width: 100%;
height: 100%;
}
.gradient {
background: #e5f7fc; /* Old browsers */
background: -moz-linear-gradient(left, #e5f7fc 0%, #53cbf1 80%, #5abfdd 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #e5f7fc 0%,#53cbf1 80%,#5abfdd 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #e5f7fc 0%,#53cbf1 80%,#5abfdd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5f7fc', endColorstr='#5abfdd',GradientType=1 ); /* IE6-9 */
}
.confetti {
width: 15px;
height: 15px;
background-color: #f2d74e;
position: absolute;
left: 50%;
animation: confetti 5s ease-in-out -2s infinite;
transform-origin: left top;
}
.confetti:nth-child(1) {
background-color: #f2d74e; left: 10%; animation-delay: 0;
}
.confetti:nth-child(2) {
background-color: #95c3de; left: 20%; animation-delay: -5s;
}
.confetti:nth-child(3) {
background-color: #ff9a91; left: 30%; animation-delay: -3s;
}
.confetti:nth-child(4) {
background-color: #f2d74e; left: 40%; animation-delay: -2.5s;
}
.confetti:nth-child(5) {
background-color: #95c3de; left: 50%; animation-delay: -4s;
}
.confetti:nth-child(6) {
background-color: #ff9a91; left: 60%; animation-delay: -6s;
}
.confetti:nth-child(7) {
background-color: #f2d74e; left: 70%; animation-delay: -1.5s;
}
.confetti:nth-child(8) {
background-color: #95c3de; left: 80%; animation-delay: -2s;
}
.confetti:nth-child(9) {
background-color: #ff9a91; left: 90%; animation-delay: -3.5s;
}
.confetti:nth-child(10) {
background-color: #f2d74e; left: 100%; animation-delay: -2.5s;
}
@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); }
}
</style>
</head>
<body>
<div class="container">
<div class="confetti gradient"></div>
<div class="confetti"></div>
<div class="confetti gradient"></div>
<div class="confetti gradient"></div>
<div class="confetti"></div>
<div class="confetti gradient"></div>
<div class="confetti gradient"></div>
<div class="confetti"></div>
<div class="confetti gradient"></div>
<div class="confetti"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment