/* Add snow animation to the body */ body { background-color: #000; /* Set your desired background color */ overflow: hidden; } /* Create a snowflake */ .snowflake { position: absolute; background: transparent; width: 10px; height: 10px; border-radius: 50%; animation: snowfall linear infinite; pointer-events: none; } /* Keyframes for snowfall animation */ @keyframes snowfall { 0% { transform: translateY(0) translateX(0) rotate(0); opacity: 1; } 100% { transform: translateY(100vh) translateX(-100vw) rotate(360deg); opacity: 0; } } /* Generate multiple snowflakes */ /* Adjust the count and size as needed */ .snowflake:nth-child(1) { top: -10px; left: 10%; width: 8px; height: 8px; animation-duration: 6s; animation-delay: 0s; } .snowflake:nth-child(2) { top: -10px; left: 20%; width: 10px; height: 10px; animation-duration: 5s; animation-delay: 1s; } /* Add more .snowflake rules as needed for more snowflakes */ /* Apply to specific image or container */ .image-container { position: relative; width: 100%; /* Set your image/container width */ height: 100%; /* Set your image/container height */ } /* Example: Apply the snow effect to an image */ .image-container img { width: 100%; height: auto; } /* Media query for responsiveness */ @media screen and (max-width: 768px) { .snowflake { display: none; } }