Αυτή η απλή επίδειξη εξηγεί πώς να χρησιμοποιείτε κινούμενα σχέδια CSS για ενδιαφέροντα οπτικά εφέ.
Η προσθήκη ενός κινούμενου φόντου στον ιστότοπο ή την εφαρμογή σας μπορεί να συμβάλει σε ένα μοναδικό, ενδιαφέρον σχέδιο. Τα δημιουργικά υπόβαθρα μπορούν να προκαλέσουν συναισθήματα και να βελτιώσουν την εμπειρία του χρήστη.
Υπάρχουν πολλοί τρόποι για να δημιουργήσετε ένα κινούμενο φόντο για την εφαρμογή σας, αλλά ένας απλός συνδυασμός απλού HTML και CSS λειτουργεί ιδιαίτερα καλά. Δείτε αυτό το παράδειγμα, μάθετε πώς λειτουργεί ο κώδικας του και δείτε μια ζωντανή επίδειξη του τελικού κινούμενου φόντου.
Δημιουργήστε τη δομή HTML
Θα δημιουργήσετε ένα μπλε φόντο με φυσαλίδες που μεγαλώνουν και επιπλέουν προς τα πάνω. Μπορείτε να δείτε το τελικό αποτέλεσμα σε αυτό Codepen.
Ξεκινήστε δημιουργώντας ένα Ενότητα με την τάξη περικάλυμμα για να φιλοξενήσει το animation.
Στη συνέχεια, δημιουργήστε 10 div που θα αντιπροσωπεύουν τις φυσαλίδες. Μέσα σε κάθε div, δημιουργήστε ένα διάστημα με την κλάση τελεία. Μπορείς μάθετε αυτές τις βασικές ετικέτες HTML σε 10 λεπτά εάν είστε νέος στην HTML.
<body>
<sectionclass="wrapper">
<h1>Animated Backgroundh1>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
section>
body>Στυλ με κώδικα CSS
Μπορείτε να δημιουργήσετε απίστευτα εφέ φόντου χρησιμοποιώντας μόνο HTML. Αλλά για αυτό το έργο, θα χρησιμοποιήσετε CSS για το στυλ και την κίνηση του φόντου.
Αρχικά, ρυθμίστε το περιθώριο και το padding στο 0 για να εξασφαλίσετε ότι δεν υπάρχουν κενά γύρω από το φόντο.
* {
margin: 0;
padding: 0;
}Στη συνέχεια, διαμορφώστε τη γονική ενότητα χρησιμοποιώντας την κλάση περιτυλίγματος. Αυτή η ενότητα θα έχει 100% πλάτος και ύψος για να γεμίσει ολόκληρη τη σελίδα. Ορίστε το χρώμα του φόντου του ως απόχρωση του μπλε και δώστε του μια απόλυτη θέση.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}Δώστε στυλ και στο H1 με απόλυτη θέση. Για να το τοποθετήσετε στο κέντρο της σελίδας, ξεκινήστε ρυθμίζοντας την επάνω αριστερή θέση του στο 50%. Στη συνέχεια, χρησιμοποιήστε το translate για να το μετακινήσετε προς τα πάνω και προς τα αριστερά, ώστε το κέντρο του να βρίσκεται ακριβώς στη μέση.
.wrapperh1 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
font-family: sans-serif;
word-spacing: 2px;
color: #fff;
font-size: 2rem;
font-weight: 900;
}Στη συνέχεια, δώστε στυλ στα div που θα είναι κυκλικά ώστε να λειτουργούν ως κινούμενα συννεφάκια. Δώστε σε κάθε div ύψος, πλάτος και περίγραμμα. Η μεγάλη ακτίνα συνόρων διασφαλίζει ότι το περίγραμμα είναι κύκλος. Επίσης, ορίστε μια διάρκεια κινούμενης εικόνας χρησιμοποιώντας την ιδιότητα CSS animation.
.wrapperdiv {
height: 60px;
width: 60px;
border: 2pxsolidrgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4slinearinfinite;
}Δώστε στυλ στις τελείες με ύψος και πλάτος 5 εικονοστοιχείων. Δώστε στις τελείες μια ακτίνα περιγράμματος και ένα λευκό φόντο. Τοποθετήστε το καθένα απολύτως, κοντά στην επάνω δεξιά γωνία του γονικού τμήματός του.
div.dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}Στη συνέχεια, χρησιμοποιήστε τον επιλογέα nth-child για να τοποθετήσετε κάθε div με διαφορετικές ρυθμίσεις. Μπορείτε να ονομάσετε το κινούμενο σχέδιο έμψυχος; θα το ορίσετε αργότερα χρησιμοποιώντας @keyframes.
Χρήση nο παιδί (2) για να απευθυνθώ στο πρώτο div από το πρώτο παιδί του .περικάλυμμα στοιχείο είναι το h1.
.wrapperdiv:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8slinearinfinite;
}.wrapperdiv:nth-child(3) {
top: 60%;
left: 80%;
animation: animate 10slinearinfinite;
}.wrapperdiv:nth-child(4) {
top: 40%;
left: 40%;
animation: animate 3slinearinfinite;
}.wrapperdiv:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7slinearinfinite;
}
.wrapperdiv:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9slinearinfinite;
}
Μπορείτε να δώσετε στα χαμηλότερα div υψηλότερα ποσοστά, ώστε να ανεβαίνουν στην κορυφή σε διαφορετικά διαστήματα.
.wrapperdiv:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5slinearinfinite;
}.wrapperdiv:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8slinearinfinite;
}.wrapperdiv:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10slinearinfinite;
}.wrapperdiv:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6slinearinfinite;
}
.wrapperdiv:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10slinearinfinite;
}
Χρησιμοποιήστε @keyframes για να αλλάξετε σταδιακά και να περιστρέψετε τους κύκλους και τις τελείες σε διαφορετικά διαστήματα. Στον παρακάτω κώδικα, οι τελείες περιστρέφονται κατά 70 μοίρες και οι κύκλοι κατά 360. Αυτή η περιστροφή δημιουργεί το εφέ φυσαλίδας.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}Μπορείς Κάντε τα φόντο πιο κομψά χρησιμοποιώντας μοτίβα CSS. Τα μοτίβα σάς επιτρέπουν να δημιουργείτε κύματα, πλέγματα, φύλλα και άλλα μοτίβα για να σας βοηθήσουν να δημιουργήσετε εκπληκτικά κινούμενα σχέδια.
Μπορείτε να δημιουργήσετε κίνηση σε πολλές ιδιότητες χρησιμοποιώντας CSS
Μπορείτε να δημιουργήσετε διαφορετικούς τύπους κινούμενων εικόνων χρησιμοποιώντας CSS. Αυτά περιλαμβάνουν την αλλαγή του χρώματος του φόντου και την καθυστέρηση του χρόνου εκτέλεσης μιας κινούμενης εικόνας.
Μπορείτε επίσης να ορίσετε πόσο συχνά θα εκτελείται μια κινούμενη εικόνα, ακόμη και στο άπειρο. Μπορείτε επίσης να ορίσετε την κατεύθυνση που πρέπει να κινείται η κινούμενη εικόνα: προς τα εμπρός ή προς τα πίσω. Είναι διασκεδαστικό να παίζετε με κινούμενα σχέδια και μπορείτε να τα χρησιμοποιήσετε για να ζωντανέψετε τις εφαρμογές σας.
