Αυτό το άρθρο θα παρέχει:
- Μέθοδος 1: Εφέ Fade-in με χρήση της ιδιότητας κινούμενων εικόνων CSS
- Μέθοδος 2: Εφέ Fade-in με χρήση της ιδιότητας μετάβασης CSS
Μέθοδος 1: Εφέ Fade-in με χρήση της ιδιότητας 'animation' CSS
Για να σχεδιάσετε μια απλή σελίδα HTML, προσθέστε το ακόλουθο στοιχείο σε αυτήν:
- Πρόσθεσε το ' ' στοιχείο μαζί με το ' στυλ ' Χαρακτηριστικό. Το χαρακτηριστικό 'style' περιέχει τις ιδιότητες στυλ του στοιχείου.
- Εφαρμόστε το ' χρώμα ιδιότητα ' στο χαρακτηριστικό style για τον καθορισμό του χρώματος κειμένου του στοιχείου.
- Μετά από αυτό, χρησιμοποιήστε το ' ' στοιχείο για να προσθέσετε κάποιο κείμενο ή μια απλή παράγραφο.
Παρακάτω είναι ο κώδικας HTML:
< h2 στυλ = 'color: rgb(84, 8, 191)' >
Ιστότοπος εκμάθησης Linuxhint
< / h2 >
< Π > εφέ fade-in κατά τη φόρτωση της σελίδας < / Π >
Η σελίδα HTML δημιουργήθηκε με επιτυχία:
Στην ενότητα CSS, για να εφαρμόσετε το εφέ fade-in στη σελίδα, το ' κινουμένων σχεδίων 'Η ιδιότητα CSS θα χρησιμοποιηθεί στο ' <σώμα> ' στοιχείο της σελίδας HTML.
Στοιχείο «σώματος» στυλ
σώμα {animation: fadeInPage ease 3s;
animation-itation-count: ένας ;
}
Το '
' εφαρμόζεται με τις ακόλουθες ιδιότητες CSS:- ' κινουμένων σχεδίων ” είναι η συντομογραφία που ορίζει την κίνηση καθορίζοντας πολλαπλές τιμές. Εδώ, ορίζεται το όνομα της κινούμενης εικόνας, η λειτουργία κίνησης-χρονομέτρησης και η διάρκεια κίνησης.
- ' κινούμενη εικόνα-επανάληψη-μέτρηση ' ορίζει πόσες φορές θα πρέπει να επαναληφθεί η κινούμενη εικόνα.
Εφαρμογή κανόνων '@keyframes' για 'κινούμενα σχέδια'
@keyframes fadeInPage {0 % {
αδιαφάνεια: 0 ;
}
100 % {
αδιαφάνεια: ένας ;
}
}
Για να ορίσετε το « @keyframes ” κανόνες για το animation, αναφέρετε το όνομα του animation μετά τη λέξη-κλειδί @keyframes. Τροποποιήστε τη συμπεριφορά του κινούμενου σχεδίου ως εξής:
- στο ' 0% 'κινούμενα σχέδια, το ' αδιαφάνεια Η ιδιότητα λαμβάνει την τιμή 0. Σημαίνει ότι όταν ξεκινά η κινούμενη εικόνα, η εικόνα είναι διαφανής.
- στο ' 100% ' animation, η αδιαφάνεια έχει οριστεί σε ' ένας ”, που παραπέμπει σε μονόχρωμο.
Παραγωγή
Ας προχωρήσουμε προς τη δεύτερη μέθοδο για την εφαρμογή του εφέ Fade-in κατά τη φόρτωση της σελίδας.
Μέθοδος 2: Εφέ Fade-in με χρήση της ιδιότητας 'μετάβασης' CSS
Προσθέστε ένα ' σε φορτίο ' χαρακτηριστικό εντός του ' <σώμα> ' στοιχείο. Αυτό το συμβάν ενεργοποιείται κατά τη φόρτωση της σελίδας. Κατά τη φόρτωση, η αδιαφάνεια του στοιχείου σώματος έχει οριστεί σε ' ένας ”, που σχετίζεται με ένα συμπαγές χρώμα:
< σώμα σε φορτίο = 'document.body.style.opacity='1'' >Σε αυτό το παράδειγμα, το CSS ' μετάβαση 'η ιδιότητα χρησιμοποιείται για την προσθήκη ενός εφέ εξασθενίσεως:
σώμα {αδιαφάνεια: 0 ;
μετάβαση: αδιαφάνεια 6s;
}
Ακολουθεί η εξήγηση των ιδιοτήτων που αναφέρθηκαν παραπάνω:
- ' αδιαφάνεια Η ιδιότητα ” ορίζει τη διαφάνεια των στοιχείων.
- Χρήση CSS ' μετάβαση ”, αλλάξτε σταδιακά τις τιμές των ιδιοτήτων σε ένα καθορισμένο χρονικό διάστημα.
Παραγωγή
Σας έχουμε διδάξει τις μεθόδους χρήσης CSS για ένα εφέ fade-in κατά τη φόρτωση της σελίδας.
συμπέρασμα
Πολλές ιδιότητες CSS μπορούν να χρησιμοποιηθούν για την εφαρμογή ενός εφέ fade-in σε στοιχεία HTML. Πιο συγκεκριμένα, το « κινουμένων σχεδίων », « αδιαφάνεια ', και ' μετάβαση Οι ιδιότητες μπορούν να χρησιμοποιηθούν για τον καθορισμό κινούμενων εφέ σε σελίδες ή στοιχεία. Τα κινούμενα σχέδια προσαρμόζονται χρησιμοποιώντας το ' @keyframe ” κανόνες. Αυτό το άρθρο εξήγησε τις μεθόδους για την προσθήκη ενός εφέ εξασθένισης στη φόρτωση της σελίδας χρησιμοποιώντας CSS.