Ας χιονίσει! Δημιουργήστε ένα εκπληκτικό εφέ χιονιού στον ιστότοπό σας με CSS

Πώς να προσθέσετε ένα εφέ χιονιού χρησιμοποιώντας μόνο κινούμενα σχέδια CSS

1. Εντοπίστε το αρχείο σας στυλ.css ή την προσθήκη CSS που χρησιμοποιείτε για προσαρμογές.
2. Αντιγράψτε τον παρακάτω κώδικα στο τέλος του αρχείου

   .χιόνι{
   εικόνα φόντου:
   url(https://i.imgur.com/uYjnk8N.png),
   url(https://i.imgur.com/iAGD6MA.png),
   url(https://i.imgur.com/hIJDjbg.png);
   κινουμένων σχεδίων: χιόνι 30s linear infinite?
   }

   @keyframes χιόνι {
   0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
   100% {background-position: 500px 1000px, 400px 400px, 300px 300px}
   }

3. Τώρα προσθέστε την τάξη χιόνι σε οποιοδήποτε στοιχείο HTML όπου θέλετε να προσθέσετε το εφέ. Για παράδειγμα,

   <div class="snow"> </div>

   Εάν δεν βλέπετε το εφέ, βεβαιωθείτε ότι δεν υπάρχουν άλλοι κανόνες css που να υπερισχύουν του φόντου χιονιού. Εάν συμβαίνει αυτό, μπορείτε να δοκιμάσετε να προσθέσετε το „!σπουδαίος“ ιδιοκτησία στο τέλος κάθε ιδιότητας, για παράδειγμα, -> πλάτος: 100% !σημαντικό;