Skip to content

Instantly share code, notes, and snippets.

@rafesposo
Created December 18, 2023 23:34
Show Gist options
  • Save rafesposo/03c25fba708ba37bfb7526c4a9b2bb63 to your computer and use it in GitHub Desktop.
Save rafesposo/03c25fba708ba37bfb7526c4a9b2bb63 to your computer and use it in GitHub Desktop.
Snowflake effect in your website
<style>
.snowflake {
color: #fff;
font-size: 1em;
font-family: Arial;
text-shadow: 0 0 1px #000;
}
@-webkit-keyframes snowflakes-fall {
0% {
top: -10%
}
100% {
top: 100%
}
}
@-webkit-keyframes snowflakes-shake {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px)
}
50% {
-webkit-transform: translateX(80px);
transform: translateX(80px)
}
100% {
-webkit-transform: translateX(0px);
transform: translateX(0px)
}
}
@keyframes snowflakes-fall {
0% {
top: -10%
}
100% {
top: 100%
}
}
@keyframes snowflakes-shake {
0% {
transform: translateX(0px)
}
50% {
transform: translateX(80px)
}
100% {
transform: translateX(0px)
}
}
.snowflake {
position: fixed;
top: -10%;
z-index: 9999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
-webkit-animation-name: snowflakes-fall, snowflakes-shake;
-webkit-animation-duration: 10s, 3s;
-webkit-animation-timing-function: linear, ease-in-out;
-webkit-animation-iteration-count: infinite, infinite;
-webkit-animation-play-state: running, running;
animation-name: snowflakes-fall, snowflakes-shake;
animation-duration: 10s, 3s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
animation-play-state: running, running
}
.snowflake:nth-of-type(0) {
left: 1%;
-webkit-animation-delay: 0s, 0s;
animation-delay: 0s, 0s
}
.snowflake:nth-of-type(1) {
left: 10%;
-webkit-animation-delay: 1s, 1s;
animation-delay: 1s, 1s
}
.snowflake:nth-of-type(2) {
left: 20%;
-webkit-animation-delay: 6s, .5s;
animation-delay: 6s, .5s
}
.snowflake:nth-of-type(3) {
left: 30%;
-webkit-animation-delay: 4s, 2s;
animation-delay: 4s, 2s
}
.snowflake:nth-of-type(4) {
left: 40%;
-webkit-animation-delay: 2s, 2s;
animation-delay: 2s, 2s
}
.snowflake:nth-of-type(5) {
left: 50%;
-webkit-animation-delay: 8s, 3s;
animation-delay: 8s, 3s
}
.snowflake:nth-of-type(6) {
left: 60%;
-webkit-animation-delay: 6s, 2s;
animation-delay: 6s, 2s
}
.snowflake:nth-of-type(7) {
left: 70%;
-webkit-animation-delay: 2.5s, 1s;
animation-delay: 2.5s, 1s
}
.snowflake:nth-of-type(8) {
left: 80%;
-webkit-animation-delay: 1s, 0s;
animation-delay: 1s, 0s
}
.snowflake:nth-of-type(9) {
left: 90%;
-webkit-animation-delay: 3s, 1.5s;
animation-delay: 3s, 1.5s
}
</style>
<div class="snowflakes" aria-hidden="true">
<div class="snowflake"> ❅ </div>
<div class="snowflake"> ❅ </div>
<div class="snowflake"> ❆ </div>
<div class="snowflake"> ❄ </div>
<div class="snowflake"> ❅ </div>
<div class="snowflake"> ❆ </div>
<div class="snowflake"> ❄ </div>
<div class="snowflake"> ❅ </div>
<div class="snowflake"> ❆ </div>
<div class="snowflake"> ❄ </div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment