Δημιουργήστε ένα κινούμενο φόντο με HTML και CSS
Η προσθήκη ενός κινούμενου φόντου στον ιστότοπο ή την εφαρμογή σας μπορεί να συμβάλει σε ένα μοναδικό, ενδιαφέρον σχέδιο. Τα δημιουργικά υπόβαθρα μπορούν να προκαλέσουν συναισθήματα και να βελτιώσουν την εμπειρία του χρήστη.
Υπάρχουν πολλοί τρόποι για να δημιουργήσετε ένα κινούμενο φόντο για την εφαρμογή σας, αλλά ένας απλός συνδυασμός απλού HTML και CSS λειτουργεί ιδιαίτερα καλά. Δείτε αυτό το παράδειγμα, μάθετε πώς λειτουργεί ο κώδικας του και δείτε μια ζωντανή επίδειξη του τελικού κινούμενου φόντου.
Πίνακας περιεχομένων
Δημιουργήστε τη δομή HTML
Θα δημιουργήσετε ένα μπλε φόντο με φυσαλίδες που μεγαλώνουν και επιπλέουν προς τα πάνω. Μπορείτε να δείτε το τελικό αποτέλεσμα σε αυτό Codepen.
Ξεκινήστε δημιουργώντας μια ενότητα με το περιτύλιγμα της τάξης για να φιλοξενήσει το κινούμενο σχέδιο.
Στη συνέχεια, δημιουργήστε 10 div που θα αντιπροσωπεύουν τις φυσαλίδες. Μέσα σε κάθε div, δημιουργήστε ένα διάστημα με την κουκκίδα κλάσης. Μπορείτε να μάθετε αυτές τις βασικές ετικέτες HTML σε 10 λεπτά, αν είστε νέος στην HTML.
<body>
<section class="wrapper">
<h1>Animated Background</h1>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="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 για να το μετακινήσετε προς τα πάνω και προς τα αριστερά, ώστε το κέντρο του να βρίσκεται ακριβώς στη μέση.
.wrapper h1 {
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.
.wrapper div {
height: 60px;
width: 60px;
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4s linear infinite;
}
Δώστε στυλ στις τελείες με ύψος και πλάτος 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.
Χρησιμοποιήστε το nth-child(2) για να απευθυνθείτε στο πρώτο div αφού το πρώτο παιδί του στοιχείου .wrapper είναι το h1.
.wrapper div:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8s linear infinite;
}.wrapper div:nth-child(3) {
top: 60%;
left: 80%;
animation: animate 10s linear infinite;
}
.wrapper div:nth-child(4) {
top: 40%;
left: 40%;
animation: animate 3s linear infinite;
}
.wrapper div:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7s linear infinite;
}
.wrapper div:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9s linear infinite;
}
Μπορείτε να δώσετε στα χαμηλότερα div υψηλότερα ποσοστά, ώστε να ανεβαίνουν στην κορυφή σε διαφορετικά διαστήματα.
.wrapper div:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5s linear infinite;
}.wrapper div:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8s linear infinite;
}
.wrapper div:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10s linear infinite;
}
.wrapper div:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6s linear infinite;
}
.wrapper div:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10s linear infinite;
}
Χρησιμοποιήστε @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. Αυτά περιλαμβάνουν την αλλαγή του χρώματος του φόντου και την καθυστέρηση του χρόνου εκτέλεσης μιας κινούμενης εικόνας.
Μπορείτε επίσης να ορίσετε πόσο συχνά θα εκτελείται μια κινούμενη εικόνα, ακόμη και στο άπειρο. Μπορείτε επίσης να ορίσετε την κατεύθυνση που πρέπει να κινείται η κινούμενη εικόνα: προς τα εμπρός ή προς τα πίσω. Είναι διασκεδαστικό να παίζετε με κινούμενα σχέδια και μπορείτε να τα χρησιμοποιήσετε για να ζωντανέψετε τις εφαρμογές σας.