Κινούμενο χιόνι με CSS

Francisco J.

1 λεπτό

Κινούμενο χιόνι με CSS3

Αν και βάλτε κινούμενο χιόνι σε μια σελίδα, είτε από εμάς είτε από έναν πελάτη, ακούγεται σαν μια πρακτική σχεδιασμού παλαιότερη από οτιδήποτε άλλο, η αλήθεια είναι ότι το κινούμενα σχέδια που παρουσιάζουμε με την ευκαιρία αυτή είναι η θάλασσα του κομψού. Επίσης δεν χρειάζεστε JavaScript, είναι απλό CSS3.

Το πρώτο πράγμα είναι να ρίξουμε μια ματιά το κινούμενο σχέδιο.

Φαίνεται αρκετά καλό, έτσι; Για να το εφαρμόσουμε, πρέπει μόνο να δημιουργήσουμε τρεις εικόνες με άσπρες κουκκίδες και να τις κινούμε χρησιμοποιώντας την ιδιότητα @keyframes του CSS3 ως εξής:

/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

Προσθήκη των διαφορετικών προθέματα για διαφορετικά προγράμματα περιήγησης, στη συνέχεια καθιερώνοντας για το σώμα μας:

body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}

Προσθέτοντας επίσης τα απαραίτητα προθέματα. Η πλήρης διαδικασία με λεπτομερείς εξηγήσεις, ευγενική προσφορά του Joshua Johnson, βρίσκεται στο blog του.

Περισσότερες πληροφορίες - CSS3 Gradient Generator, CSS3 Gradient Generator
Πηγή - Design Shack


Αφήστε το σχόλιό σας

Η διεύθυνση email σας δεν θα δημοσιευθεί. Τα υποχρεωτικά πεδία σημειώνονται με *

*

*

  1. Υπεύθυνος για τα δεδομένα: Miguel Ángel Gatón
  2. Σκοπός των δεδομένων: Έλεγχος SPAM, διαχείριση σχολίων.
  3. Νομιμοποίηση: Η συγκατάθεσή σας
  4. Κοινοποίηση των δεδομένων: Τα δεδομένα δεν θα κοινοποιούνται σε τρίτους, εκτός από νομική υποχρέωση.
  5. Αποθήκευση δεδομένων: Βάση δεδομένων που φιλοξενείται από τα δίκτυα Occentus (ΕΕ)
  6. Δικαιώματα: Ανά πάσα στιγμή μπορείτε να περιορίσετε, να ανακτήσετε και να διαγράψετε τις πληροφορίες σας.