Skip to content

Instantly share code, notes, and snippets.

@abenevaut

abenevaut/index.html

Created September 23, 2025 06:12
Show Gist options
  • Save abenevaut/cd5fff06ed028446ffa2239ba04c8aa8 to your computer and use it in GitHub Desktop.
Save abenevaut/cd5fff06ed028446ffa2239ba04c8aa8 to your computer and use it in GitHub Desktop.
Download ZIP
pure css snowflakes
Raw
index.html
<!-- 100 flocons pour un effet dense -->
<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 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 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 class="snowflake"></div>
Raw
style.css
body {
background-color: black;
overflow: hidden;
margin: 0;
height: 100vh;
}
.snowflake {
position: fixed;
width: random(5px, 15px, 1px);
height: random(5px, 15px, 1px);
background-color: white;
border-radius: 50%;
top: -10px;
left: random(0%, 100%);
opacity: random(0.5, 1, 0.1);
animation: fall linear infinite;
animation-duration: random(5s, 15s);
animation-delay: random(0s, 10s);
}
@keyframes fall {
0% {
transform: translateY(0);
opacity: var(--opacity);
}
100% {
transform: translateY(105vh);
opacity: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment