Για να κατανοήσουμε τη δομή της σήμανσης μας, ας εστιάσουμε στο σκάφος για ένα δευτερόλεπτο:

>

>
>
>

Τώρα, ας δούμε το πρώτο banner στη σελίδα επίδειξης. Υπάρχουν τρία ξεχωριστά κινούμενα σχέδια που λαμβάνουν χώρα στο πλοίο:

• Κινούμενα σχέδια - όταν το σκάφος γλιστράει από την αριστερή πλευρά. Αυτό ισχύει άμεσα για μια μη ταξινομημένη λίστα (ομάδα στοιχείων σκάφους).
• Κινούμενα σχέδια - που δίνει στο σκάφος ένα εφέ λικνίσματος, προσομοιώνοντας το σκάφος που επιπλέει στο νερό. Αυτό ισχύει άμεσα για τα στοιχεία της λίστας (για το σκάφος).
• Κινούμενα σχέδια - που κρύβουν το ερωτηματικό. Αυτό ισχύει για το div (ερωτηματικό).

Αν δεν πελαγώσετε, ρίξτε μια άλλη ματιά στη σελίδα επίδειξης. Θα δείτε ότι το animation που εφαρμόζεται στο στοιχείο της λίστας (το σκάφος), προκαλώντας την ανύψωση του σκάφους, επηρεάζει και το DIV μέσα σε αυτό (με ερωτηματικό). Επιπλέον, η κινούμενη εικόνα "slide in" που εφαρμόζεται σε μια μη ταξινομημένη λίστα (ομάδα) επηρεάζει επίσης το στοιχείο της λίστας και το DIV μέσα σε αυτήν (το σκάφος και το ερωτηματικό). Αυτό μας οδηγεί σε σημαντικές παρατηρήσεις:

Τα παιδικά στοιχεία κληρονομούν κινούμενα σχέδια από τους γονείς τους, εκτός από τα δικά τους κινούμενα σχέδια.Αυτή η γνώση έχει προστεθεί στο οπλοστάσιό μας, αλλά ο αριθμός των παιδιών / γονέων κατά τη δημιουργία ενός κινούμενου σχεδίου θα σας συνεπάρει (και ο επεξεργαστής του φορητού υπολογιστή της γιαγιάς σας)!

css

Προτού φτάσουμε στα πραγματικά ενδιαφέροντα πράγματα και αρχίσουμε να δημιουργούμε κινούμενα σχέδια, πρέπει ακόμα να διαμορφώσουμε στυλ σε προγράμματα περιήγησης που έχουν κολλήσει στον 18ο αιώνα.

Εναλλακτικά στυλ για παλαιότερα προγράμματα περιήγησης


Απλώς θα δημιουργήσουμε εναλλακτικά στυλ σαν να μην υπάρχει κινούμενη εικόνα CSS (η ιδέα ότι δεν υπάρχει κινούμενη εικόνα CSS θα κάνει οποιονδήποτε ενήλικα όχι μόνο να κλάψει, αλλά να κρέμεται δίπλα μου :)). Με άλλα λόγια, εάν το animation μας αποτύχει να παίξει, το banner θα πρέπει να φαίνεται αξιοπρεπές. Με αυτόν τον τρόπο, όταν κάποιος προβάλλει το banner χρησιμοποιώντας ένα παλιό πρόγραμμα περιήγησης, θα δει ένα κανονικό, στατικό banner αντί για ένα κενό διάστημα.

Για παράδειγμα: εάν κάποιος χρησιμοποιεί CSS όπως αυτό, θα υπάρξουν προβλήματα:

/* ΛΑΘΟΣ ΤΡΟΠΟ! */


0% (αδιαφάνεια: 0 ; )
100% (αδιαφάνεια: 1 ;)
}

Div(
αδιαφάνεια: 0 /* Αυτό το μπλοκ είναι κρυφό από προεπιλογή!*/

}

Εάν το πρόγραμμα περιήγησης του χρήστη δεν υποστηρίζει κινούμενα σχέδια, το banner θα παραμείνει αόρατο στον χρήστη. Και τότε ο πελάτης θα σπάσει την πόρτα στο γραφείο του πωλητή -με ένα αλυσοπρίονο στα χέρια- και θα απαιτήσει να του εξηγήσουν γιατί δεν πούλησαν το προϊόν του! Και αν δεν καταλάβουν ότι ένα πρόγραμμα περιήγησης μπορεί να είναι τόσο άθλιο, η ζωή τους θα τελειώσει τρομερά και οι τελευταίες τους λέξεις θα είναι κατάρες στον Internet Explorer... :)

Αλλά μην ανησυχείτε, θα παρέχουμε εκτεταμένη υποστήριξη προγράμματος περιήγησης:

/* Ο ΣΩΣΤΟΣ ΤΡΟΠΟΣ */

@keyframe our-fade-in-animation (
0% (αδιαφάνεια: 0 ; )
100% (αδιαφάνεια: 1 ;)
}

Div(
αδιαφάνεια: 1 /* αυτό το div θα είναι ορατό από προεπιλογή */
animation: our-fade-in-animation 1s 1 ;
}

Όπως μπορείτε να δείτε, το DIV θα εξακολουθεί να εμφανίζεται ακόμα κι αν το κινούμενο σχέδιο αποτύχει να παίξει. Εάν το κινούμενο σχέδιο είναι σε θέση να παίξει, τότε το DIV θα κρυφτεί αμέσως και το animation θα παίξει μέχρι το τέλος.

Τώρα που ξέρουμε πώς να κάνουμε τα κινούμενα banner μας να υποστηρίζουν παλαιότερα προγράμματα περιήγησης, ας προχωρήσουμε σε μερικά βασικά CSS.

Υπάρχουν τρία βασικά πράγματα που πρέπει να θυμάστε:

• Επειδή αυτές οι διαφημίσεις μπορούν να χρησιμοποιηθούν σε διάφορους ιστότοπους, θα κάνουμε όλα τα στυλ CSS μας πολύ συγκεκριμένα. Θα ξεκινήσουμε να δηλώνουμε κάθε επιλογέα με id: #ad-1. Αυτό θα αποτρέψει την παρέμβαση στα στυλ banner μας από υπάρχοντα στυλ και στοιχεία.
• Θα το κάνουμε σκόπιμα αγνοήστε τη λειτουργία καθυστέρησης κινούμενης εικόναςκατά τη δημιουργία της κινούμενης εικόνας μας. Εάν χρησιμοποιούσαμε τη δυνατότητα καθυστέρησης κινούμενης εικόνας καθώς και τη σχεδίαση για τα στοιχεία μας με τον σωστό τρόπο (ορατή από προεπιλογή), θα ήταν όλα ορατά στην οθόνη πριν αρχίσει τελικά η αναπαραγωγή της κινούμενης εικόνας. Γι' αυτό ξεκινάει αμέσως το animation, το οποίο μας επιτρέπει να κρύβουμε στοιχεία από την οθόνη μέχρι να τα χρειαστούμε. Θα προσομοιώσουμε την καθυστέρηση κινούμενης εικόνας αυξάνοντας τη διάρκεια και προσαρμόζοντας χειροκίνητα τα βασικά καρέ. Θα δείτε παραδείγματα αυτού καθώς αρχίζουμε να δημιουργούμε κινούμενα σχέδια.
• Εάν είναι δυνατόν, χρησιμοποιήστε ένα κινούμενο σχέδιο για πολλά στοιχεία. Με αυτόν τον τρόπο, μπορούμε να εξοικονομήσουμε πολύ χρόνο και να μειώσουμε το bloat του κώδικα. Μπορείτε να δημιουργήσετε πολλά διαφορετικά εφέ στο ίδιο κινούμενο σχέδιο προσαρμόζοντας τη διάρκεια και τις μεταβάσεις.

Έτσι, θα αρχίσουμε να δημιουργούμε το διαφημιστικό μας banner. Ας φροντίσουμε να έχει σχετική θέση (θέση: σχετική) ώστε να τοποθετηθούν σωστά τα στοιχεία στο εσωτερικό του. Πρέπει επίσης να βεβαιωθούμε ότι η υπερχείλιση: η ιδιότητα κρυφής έχει ρυθμιστεί να αποκρύπτει οτιδήποτε άλλο:

#διαφήμιση-1 (
πλάτος: 720 px
ύψος: 300 px
float : αριστερά ;
περιθώριο : 40 px auto 0 ;
background-image : url (../images/ad-1/background.png ) ;
φόντο-θέση : κέντρο ;
background-repeat : no-repeat ;
υπερχείλιση: κρυφός
θέση : σχετική ;
box-shadow: 0px 0px 6px #000 ;
}

#ad-1 #content(
πλάτος: 325 px
float : δεξιά ;
περιθώριο : 40 px ;
text-align : κέντρο ;
z-index : 4 ;
θέση : σχετική ;
υπερχείλιση: ορατός
}
#ad-1 h2 (
font-family : "Alfa Slab One" , cursive ;
χρώμα : #137dd5 ;
μέγεθος γραμματοσειράς: 50 px;
Ύψος γραμμής : 50 px ;

κινούμενα σχέδια: καθυστερημένη-εξασθένιση-animation 7s 1 ease-in-out; /* Το H2 θα εξαφανιστεί με καθυστέρηση προσομοίωσης κινούμενων εικόνων */
}
#ad-1 h3 (

χρώμα : #202224 ;
μέγεθος γραμματοσειράς : 31 px ;
ύψος γραμμής : 31 px ;
text-shadow : 0px 0px 4px #fff ;
animation: καθυστερημένη-εξασθένιση-κινούμενα σχέδια 10s 1 ease-in-out; /* Το H3 θα εξαφανιστεί με καθυστέρηση προσομοίωσης κινούμενων εικόνων */
}
φόρμα #ad-1 (
περιθώριο : 30 px 0 0 6 px ;
θέση : σχετική ;
animation: φόρμα-κινούμενα σχέδια 12s 1 ease-in-out; /* Αυτός ο κωδικός μετακινεί τη φόρμα email μας */
}
#ad-1 #email (
πλάτος: 158 px;
ύψος: 48 px;
float : αριστερά ;
padding: 020px
μέγεθος γραμματοσειράς : 16 px ;
font-family : "Lucida Grande" , sans-serif ;
χρώμα : #fff ;
text-shadow : 1px 1px 0px #a2917d ;
border-top-left-radius: 5px ;
border-bottom-left-radius: 5px ;
περίγραμμα : 1px στερεό #a2917d ;
περίγραμμα : κανένα ;
box-shadow: -1px -1px 1px #fff ;
φόντο-χρώμα : #c7b29b ;
background-image : linear-gradient(bottom , rgb (216 , 201 , 185 ) 0% , rgb (199 , 178 , 155 ) 100% ) ;
}
#ad-1 #email :focus (
background-image : linear-gradient(bottom , rgb (199 , 178 , 155 ) 0% , rgb (199 , 178 , 155 ) 100% ) ;

}
#ad-1 #submit (
ύψος: 50 px
float : αριστερά ;
δρομέας : δείκτης ;
padding: 020px
μέγεθος γραμματοσειράς : 20 px ;
font-family : "Boogaloo" , cursive ;
χρώμα : #137dd5 ;
text-shadow : 1px 1px 0px #fff ;
περίγραμμα-πάνω-δεξιά-ακτίνα: 5px ;
border-bottom-right-radius: 5px ;
περίγραμμα : 1px στερεό #bcc0c4 ;
σύνορο-αριστερά : κανένα
φόντο-χρώμα : #fff ;
background-image : linear-gradient(bottom , rgb (245 , 247 , 249 ) 0% , rgb (255 , 255 , 255 ) 100% ) ;
}
#ad-1 #submit :hover (
background-image : linear-gradient(bottom , rgb (255 , 255 , 255 ) 0% , rgb (255 , 255 , 255 ) 100% ) ;
}

Τώρα θα διαμορφώσουμε το νερό και θα επικαλέσουμε το κατάλληλο animation:

#ad-1 ul#νερό (
/* Αν θέλαμε να προσθέσουμε ένα άλλο κινούμενο σχέδιο για το νερό (π.χ. κινείται οριζόντια), θα μπορούσαμε να το κάνουμε εδώ */
}
#ad-1 li#water-back (
πλάτος: 1200 px
ύψος: 84px;
background-image : url (../images/ad-1/water-back.png ) ;

z-index : 1 ;
θέση : απόλυτη ;
κάτω: 10 px
αριστερά: -20 px
animation: water-back-animation 3s άπειρη ευκολία εισόδου. /* Εφέ αναπήδησης νερού */
}
#ad-1 li#water-front (
πλάτος: 1200 px
ύψος: 158 px;
φόντο-εικόνα: url ( ../images/ad-1/waterfront.png) ;
background-repeat : repeat-x ;
z-index : 3 ;
θέση : απόλυτη ;
κάτω : -70 px ;
αριστερά: -30 px
animation: water-front-animation 2s infinite ease-in-out? /* Ένα άλλο εφέ αναπήδησης νερού - είναι ελαφρώς διαφορετικό. Θα κάνουμε αυτό το κινούμενο σχέδιο λίγο πιο γρήγορα για να δώσουμε κάποια προοπτική. */
}

Τώρα ας δημιουργήσουμε στυλ για το σκάφος και όλα τα στοιχεία του. Και πάλι, θα επικαλεστούμε το κατάλληλο κινούμενο σχέδιο:

#ad-1 ul#boat (
πλάτος: 249 px;
ύψος: 215 px
z-index : 2 ;
θέση : απόλυτη ;
κάτω: 25 px
αριστερά: 20 px
υπερχείλιση: ορατός
animation: boat-in-animation 3s 1 ease-out; /* Μετακίνηση της ομάδας στην αρχή */
}
#ad-1 ul#boat li (
πλάτος: 249 px;
ύψος: 215 px
background-image : url (../images/ad-1/boat.png ) ;
θέση : απόλυτη ;
κάτω: 0px
αριστερά: 0px
υπερχείλιση: ορατός
animation: boat-animation 2s infinite ease-in-out? /* Απομίμηση ενός σκάφους που χτυπά στο νερό - ένα παρόμοιο animation χρησιμοποιείται ήδη για το ίδιο το νερό. */
}
#ad-1 #question-mark (
πλάτος: 24 px
ύψος: 50 px
φόντο-εικόνα: url ( ../images/ad-1/question-mark.png) ;
θέση : απόλυτη ;
δεξιά : 34 px ;
κορυφή : -30 px ;
κινούμενα σχέδια: καθυστερημένη-εξασθένιση-animation 4s 1 ease-in-out; /* Απόκρυψη του ερωτηματικού */
}

Τέλος, θα δημιουργήσουμε στυλ για την ομάδα των σύννεφων και για ένα σύννεφο. Θα ενεργοποιήσουμε επίσης ένα αρκετά έξυπνο animation που θα τους δώσει ένα συνεχές εφέ κύλισης. Ακολουθεί μια απεικόνιση του τι θα συμβεί:



Αυτά είναι τα στυλ:

#ad-1 #clouds (
θέση : απόλυτη ;
κορυφή: 0px;
z-index : 0
animation: cloud-animation 30s άπειρη γραμμική? /* Μετακινήστε τα σύννεφα προς τα αριστερά, άπειρες φορές */
}
#ad-1 #cloud-group-1 (
πλάτος: 720 px
θέση : απόλυτη ;
αριστερά: 0px
}
#ad-1 #cloud-group-2 (
πλάτος: 720 px
θέση : απόλυτη ;
αριστερά : 720 px ;
}
#ad-1 .cloud-1 (
πλάτος: 172 px
ύψος: 121px;
background-image : url (../images/ad-1 /cloud-1 .png) ;
θέση : απόλυτη ;
κορυφή: 10 εικονοστοιχεία;
αριστερά : 40 px ;
}
#ad-1 .cloud-2 (
πλάτος: 121 px;
ύψος: 75 px
background-image : url (../images/ad-1 /cloud-2 .png) ;
θέση : απόλυτη ;
κορυφή : -25 px ;
αριστερά: 300 px
}
#ad-1 .cloud-3 (
πλάτος: 132 px;
ύψος: 105 px
background-image : url (../images/ad-1 /cloud-3 .png) ;
θέση : απόλυτη ;
κορυφή : -5 px ;
αριστερά : 530 px ;
}

Ουφφ! Υπήρχε πολύς κώδικας CSS εδώ. Το πιο ενδιαφέρον όμως είναι πιο πέρα!

Κινουμένων σχεδίων


Θυμηθείτε: Μέχρι αυτό το σημείο, δεν υπήρχε πραγματικό animation. Αν προβάλλατε το banner τώρα, θα βλέπατε κάτι που θα έδειχνε ακόμη και ένα παλιό πρόγραμμα περιήγησης - μια στατική διαφήμιση. ΑΠΟτώραθα δημιουργήσουμε πραγματικά το animation που έχουμε ήδη καλέσει στον κώδικα CSS μας.

Τώρα που το banner μας εμφανίζεται καλά, ας εμπλουτίσουμε αυτή τη στατική διαφήμιση! Ας πάμε κατευθείαν στον κώδικα - θα σας πω στα σχόλια τι θα συμβεί:

συμπέρασμα

Κατά τη διάρκεια αυτού του σεμιναρίου, μάθαμε τα βασικά σημεία για τη δημιουργία κινούμενων εικόνων με υποστήριξη για παλαιότερα προγράμματα περιήγησης:

1. Τα παιδικά στοιχεία κληρονομούν τα κινούμενα σχέδια του γονέα τους εκτός από το δικό τους κινούμενο σχέδιο. Μπορούμε να το χρησιμοποιήσουμε για να δημιουργήσουμε πιο σύνθετα κινούμενα σχέδια.
2. Για τα στυλ διαφημίσεών μας, πρέπει να χρησιμοποιούμε πολύ συγκεκριμένους επιλογείς, ώστε οι διαφημίσεις μας να μην παρακάμπτονται από άλλα στυλ ιστότοπου.
3. Πρέπει να διαμορφώσουμε το στυλ των στοιχείων, έτσι ώστε, εάν η κινούμενη εικόνα δεν παίζει, η διαφήμιση πρέπει να φαίνεται αξιοπρεπής.
4. Όποτε είναι δυνατόν, χρησιμοποιήστε το ίδιο κινούμενο σχέδιο για πολλά στοιχεία - εξοικονομεί χρόνο και αποτρέπει τη διόγκωση κώδικα.
5. Συχνά αναφερόμαστε στον Internet Explorer ως «το πρόγραμμα περιήγησης του 18ου αιώνα», ενώ κουνάμε τη γροθιά μας με αηδία και θυμό. :)

Καλή τύχη με τα πειράματά σας CSS.

Ας φτιάξουμε ένα διαφημιστικό banner χρησιμοποιώντας CSS3. Προς το παρόν, μόνο τα προγράμματα περιήγησης Firefox και WebKit υποστηρίζουν πλήρως κινούμενα σχέδια CSS3. Αλλά αρκεί απλώς να κάνετε το banner να λειτουργεί σε άλλα προγράμματα περιήγησης. Ωστόσο, μην περιμένετε εξαιρετική απόδοση παντού (ειδικά σε IE 7 και παλαιότερα) πειραματιζόμενοι με τις πιο πρόσφατες τεχνικές CSS.

Σημείωση:Για εξοικονόμηση χώρου στη σελίδα, έχουν παραληφθεί όλα τα προθέματα προμηθευτή του προγράμματος περιήγησης. Δείτε τον πηγαίο κώδικα.

Σήμανση HTML

Ας δούμε πρώτα τη δομή του banner σε HTML. Σε αυτό το σημείο, πρέπει να φανταστούμε πώς θα λειτουργεί το κινούμενο σχέδιο:

Χαμένος?

Χαλαρώστε - θα βοηθήσουμε.



Για μια βαθύτερη κατανόηση της δομής σήμανσης, ας εστιάσουμε στο σκάφος:

Τρεις κινούμενες εικόνες εμφανίζονται με το σκάφος:

Γλίστρημα του σκάφους στα αριστερά. Ισχύει για μια μη ταξινομημένη λίστα (ομάδα).

Προσομοίωση ενός σκάφους που λικνίζεται στο νερό. Εφαρμόζεται στο στοιχείο της λίστας (σκάφος).

Η εμφάνιση ερωτηματικού. Εφαρμόζεται σε στοιχείο div (ερωτηματικό).

Αν κοιτάξετε τη σελίδα επίδειξης, μπορείτε να δείτε ότι η κίνηση για το στοιχείο της λίστας (σκάφος) επηρεάζει επίσης το στοιχείο div μέσα σε αυτό (ερωτηματικό). Επίσης, το κινούμενο σχέδιο "ολίσθησης" για μια λίστα χωρίς σειρά επηρεάζει το στοιχείο της λίστας (το σκάφος και το ερωτηματικό).

Επομένως, μπορεί να συναχθεί το συμπέρασμα ότι παιδικά στοιχείαλαμβάνουν κινούμενα σχέδια γονέα εκτός από τις δικές τους ενέργειες. Τώρα μένει μόνο να απαριθμήσουμε τις δομές γονέα/παιδιού.

css

Πριν ξεκινήσετε την ανάλυση της δημιουργίας ενός κινούμενου σχεδίου, πρέπει να παρέχετε συμβατό προς τα πίσωμε παλαιότερα προγράμματα περιήγησης.

συμβατότητα προς τα πίσω

Θα διασφαλίσουμε τη συμβατότητα προς τα πίσω απλά διαμορφώνοντας το στυλ της σήμανσης σαν να CSS κινούμενα σχέδιαδεν υπάρχει καθόλου. Εάν κάποιος δει τη σελίδα σε ένα παλιό πρόγραμμα περιήγησης, θα δει μια κανονική στατική εικόνα, όχι ένα κενό λευκό διάστημα.

Για παράδειγμα: πρέπει να χρησιμοποιήσω CSS; όπως το παρακάτω, τότε θα υπάρξουν προβλήματα:

/* ΟΧΙ ΣΩΣΤΑ! */ @keyframe our-fade-in-animation ( 0% (αδιαφάνεια:0;) 100% (αδιαφάνεια:1;) ) div ( αδιαφάνεια: 0; /* Αυτό το div είναι κρυμμένο από προεπιλογή - ωχ!*/ κινούμενη εικόνα: μας -fade-in-animation 1s 1;)

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

Έτσι διασφαλίζουμε τη συμβατότητα προς τα πίσω με παλαιότερα προγράμματα περιήγησης:

/* TRUE */ @keyframe our-fade-in-animation ( 0% (αδιαφάνεια:0;) 100% (αδιαφάνεια:1;) ) div ( αδιαφάνεια: 1; /* Αυτό το div είναι ορατό από προεπιλογή */ κινούμενη εικόνα: μας -fade-in-animation 1s 1;)

Τώρα το στοιχείο div θα αποδοθεί ακόμα και αν η κινούμενη εικόνα δεν εκτελεστεί. Και στο σύγχρονα προγράμματα περιήγησηςΤο div θα κρυφτεί πρώτα κατά τη διάρκεια της κινούμενης εικόνας.

Το Ίδρυμα

Τώρα ξέρουμε πώς να διασφαλίσουμε τη συμβατότητα προς τα πίσω (η οποία θα βοηθήσει στην αποφυγή προβλημάτων κατά την εργασία με πραγματικά έργα). Ήρθε η ώρα να δημιουργήσουμε τη βάση του κώδικα CSS μας.

Πρέπει να θυμάστε 3 σημεία:

Δεδομένου ότι το banner θα χρησιμοποιηθεί σε διαφορετικούς ιστότοπους, θα κάνουμε όλους τους επιλογείς CSS ξεχωριστούς.Όλα θα ξεκινήσουν με #ad-1. Έτσι, θα προσπαθήσουμε να αποφύγουμε την επικάλυψη του κώδικα μας και του κώδικα του ιστότοπου.

Παραβλέπουμε σκόπιμα την καθυστέρηση κινούμενης εικόναςστις ρυθμίσεις. Εάν χρησιμοποιείτε καθυστέρηση κινούμενης εικόνας όταν ορίζετε στυλ με προεπιλεγμένη ορατότητα στοιχείων, τότε η δομή του banner θα σπάσει από την ξαφνική εξαφάνιση ή εμφάνιση τμημάτων της εικόνας μετά την ολοκλήρωση της κινούμενης εικόνας. Η καθυστέρηση κινούμενης εικόνας προσομοιώνεται από τη διάρκεια και τη ρύθμιση καρέ.

Οταν είναι δυνατόν χρησιμοποιήστε ένα κινούμενο σχέδιο για πολλά στοιχεία.Έτσι, εξοικονομούμε χρόνο και μειώνουμε το μέγεθος του κώδικα.

Δημιουργούμε λοιπόν τη βάση για το banner μας. Ας το ρυθμίσουμε σε σχετική τοποθέτηση, ώστε τα εσωτερικά στοιχεία να μπορούν να τοποθετηθούν σωστά. Θα αποκρύψει επίσης όλα όσα ξεφεύγουν από το πεδίο εφαρμογής του στοιχείου:

#ad-1 ( πλάτος: 720 εικονοστοιχεία; ύψος: 300 εικονοστοιχεία; αιώρηση: αριστερά; περιθώριο: 40 εικονοστοιχεία αυτόματα 0; εικόνα φόντου: url(../images/ad-1/background.png); θέση φόντου: κέντρο; φόντο -επανάληψη: χωρίς επανάληψη, υπερχείλιση: κρυφή, θέση: σχετική, πλαίσιο-σκιά: 0 εικονοστοιχεία 0 εικονοστοιχεία 6 εικονοστοιχεία #000; )

Στη συνέχεια ορίζουμε στυλ για τα πεδία κειμένου και εισαγωγής. Καλούμε τα κατάλληλα κινούμενα σχέδια. Πρέπει επίσης να βεβαιωθείτε ότι το περιεχόμενο έχει τον υψηλότερο δείκτη z για τα κινούμενα μέρη, ώστε να μην επικαλύπτονται:

#ad-1 #content ( πλάτος: 325 px; float: δεξιά; περιθώριο: 40 px; στοίχιση κειμένου: κέντρο; z-index: 4; θέση: σχετική; υπερχείλιση: ορατό; ) #ad-1 h2 ( γραμματοσειρά-οικογένεια: "Alfa Slab One", γράμμα, χρώμα: #137dd5, μέγεθος γραμματοσειράς: 50 εικονοστοιχεία, ύψος γραμμής: 50 εικονοστοιχεία, σκιά κειμένου: 0 εικονοστοιχεία 0 εικονοστοιχεία 4 εικονοστοιχεία #fff, κινούμενη εικόνα: animation με καθυστέρηση 7s 1 ease-in-out. /* Εμφάνιση h2 με ψεύτικη καθυστέρηση */ ) #ad-1 h3 ( font-family: "Boogaloo", cursive; χρώμα: #202224; μέγεθος γραμματοσειράς: 31px; line-height: 31px; text-shadow: 0px 0px 4px #fff; κινούμενη εικόνα: delayed-fade-animation 10s 1 easy-in-out; /* Εμφάνιση h3 με προσομοίωση καθυστέρηση */ ) #ad-1 φόρμα ( περιθώριο: 30 px 0 0 6 px; θέση: σχετική; κινούμενη εικόνα: μορφή-animation 12s 1 ease-in-out; /* Σύρετε προς τα έξω τη φόρμα για την εισαγωγή μιας διεύθυνσης email με προσομοιωμένη καθυστέρηση */ ) #ad-1 #email ( πλάτος: 158px; ύψος: 48px; float: αριστερά; padding: 0 20px; μέγεθος γραμματοσειράς: 16 εικονοστοιχεία; οικογένεια γραμματοσειράς: "Lucida Grande", sans-serif; χρώμα: #fff; σκιά κειμένου: 1px 1px 0px #a2917d; περίγραμμα-πάνω-αριστερά-ακτίνα: 5px r-bottom-left-radius: 5px; περίγραμμα: 1px στερεό #a2917d; περίγραμμα: κανένας; box-shadow: -1px -1px 1px #fff; χρώμα φόντου: #c7b29b; φόντο-εικόνα: γραμμική κλίση(κάτω, rgb(216,201,185) 0%, rgb(199,178,155) 100%); ) #ad-1 #email:focus ( background-image: linear-gradient(bottom, rgb(199.178.155) 0%, rgb(199.178.155) 100%); ) #ad-1 #submit (ύψος: 50px; float: αριστερά ; δρομέας: δείκτης, συμπλήρωση: 0 20 εικονοστοιχεία, μέγεθος γραμματοσειράς: 20 εικονοστοιχεία, οικογένεια γραμματοσειράς: "Boogaloo", γράμμα, χρώμα: #137dd5; σκιά κειμένου: 1 px 1px 0px #fff, περίγραμμα-πάνω-δεξιά-ακτίνα: 5px ; border-bottom-right-radius: 5px; border:1px solid #bcc0c4; border-left: none; background-color: #fff; background-image: linear-gradient(bottom, rgb(245,247,249) 0%, rgb( 255,255,255) 100%); ) #ad-1 #submit:hover ( background-image: linear-gradient(κάτω, rgb(255,255,255) 0%, rgb(255,255,255) 100%); )

Τώρα ας διαμορφώσουμε το νερό και ας καλέσουμε το κατάλληλο κινούμενο σχέδιο:

#ad-1 ul#water( /* Εάν χρειάζεστε άλλη κινούμενη εικόνα νερού, μπορείτε να την προσθέσετε εδώ */ ) #ad-1 li#water-back ( πλάτος: 1200px; ύψος: 84px; background-image: url(. . /images/ad-1/water-back.png); background-repeat: repeat-x; z-index: 1; position: absolute; bottom: 10px; αριστερά: -20px; animation: water-back-animation 3s άπειρη ευκολία εισόδου; /* Απομίμηση πιτσιλιστικών κυμάτων */ ) #ad-1 li#water-front ( πλάτος: 1200px; ύψος: 158px; background-image: url(../images/ad-1/water -μπροστινό .png); επανάληψη φόντου: επανάληψη-x; δείκτης z: 3; θέση: απόλυτη; κάτω: -70 εικονοστοιχεία; αριστερά: -30 εικονοστοιχεία; κινούμενη εικόνα: κινούμενη εικόνα 2 δευτερόλεπτα άπειρη ευκολία εισόδου; / * Άλλα κινούμενα σχέδια με πιτσίλισμα κυμάτων θα τρέχουν λίγο πιο γρήγορα για να δημιουργήσουν ένα προοπτικό εφέ. */ )

Ορίστε στυλ για το σκάφος και τα στοιχεία του. Καλούμε επίσης τα κατάλληλα κινούμενα σχέδια:

#ad-1 ul#boat ( πλάτος: 249 εικονοστοιχεία; ύψος: 215 εικονοστοιχεία; δείκτης z: 2; θέση: απόλυτη; κάτω: 25 εικονοστοιχεία; αριστερά: 20 εικονοστοιχεία; υπερχείλιση: ορατή; κινούμενη εικόνα: βάρκα σε κινούμενη εικόνα 3s 1 ευκολία ; /* Σύρει την ομάδα όταν ξεκινά η διαφήμιση */ ) #ad-1 ul#boat li ( πλάτος: 249px; ύψος: 215px; background-image: url(../images/ad-1/boat.png); θέση: απόλυτο, κάτω: 0 εικονοστοιχεία, αριστερά: 0 εικονοστοιχεία, υπερχείλιση: ορατή, κινούμενη εικόνα: κινούμενη εικόνα 2s άπειρη ευκολία εισόδου, /* Προσομοίωση του σκάφους που χτυπά στο νερό - παρόμοια με την κινούμενη εικόνα που χρησιμοποιείται ήδη στο ίδιο το νερό. */ ) #ad-1 #question-mark ( πλάτος: 24 εικονοστοιχεία; ύψος: 50 εικονοστοιχεία; εικόνα φόντου: url(../images/ad-1/question-mark.png); θέση: απόλυτη; δεξιά: 34 εικονοστοιχεία; κορυφή: -30 εικονοστοιχεία; κινούμενη εικόνα: καθυστερημένη-εξασθένιση-κινούμενη εικόνα 4s 1 ease-in-out; /* Fade στο ερωτηματικό */ )

Τώρα ας δημιουργήσουμε τα στυλ για τα σύννεφα. Για αυτούς, θα χρησιμοποιήσουμε κινούμενα σχέδια με την επίδραση της ατελείωτης κίνησης. η εικόνα δείχνει την ουσία της ιδέας:



Και εδώ είναι ο κωδικός CSS:

#ad-1 #clouds ( θέση: απόλυτη; κορυφή: 0 εικονοστοιχεία; z-index: 0; κινούμενη εικόνα: cloud-animation 30s άπειρη γραμμική; /* Κύλιση στα σύννεφα προς τα αριστερά, επαναφορά και επανάληψη */ ) #ad-1 #cloud -ομάδα -1 ( πλάτος:720 εικονοστοιχεία; θέση: απόλυτη; αριστερά: 0 εικονοστοιχεία; ) #ad-1 #cloud-group-2 ( πλάτος: 720 εικονοστοιχεία; θέση: απόλυτη; αριστερά: 720 εικονοστοιχεία; ) #ad-1 .cloud-1 ( πλάτος : 172 εικονοστοιχεία; ύψος: 121 εικονοστοιχεία; εικόνα φόντου: url(../images/ad-1/cloud-1.png); θέση: απόλυτη; επάνω: 10 εικονοστοιχεία; αριστερά: 40 εικονοστοιχεία; ) #ad-1 .cloud -2 ( πλάτος: 121 εικονοστοιχεία; ύψος: 75 εικονοστοιχεία; εικόνα φόντου: url(../images/ad-1/cloud-2.png); θέση: απόλυτη; επάνω: -25 εικονοστοιχεία; αριστερά: 300 εικονοστοιχεία; ) #ad- 1 . cloud-3 (πλάτος: 132 εικονοστοιχεία; ύψος: 105 εικονοστοιχεία; εικόνα φόντου: url(../images/ad-1/cloud-3.png); θέση: απόλυτη; επάνω: -5 εικονοστοιχεία; αριστερά: 530 εικονοστοιχεία; )

Κινούμενα σχέδια

Υπενθύμιση:Από αυτό το σημείο και μετά, τίποτα δεν είναι πραγματικά κινούμενο. Αν κοιτάξετε τώρα το banner μας, θα δείτε μια στατική εικόνα. Εδώ δημιουργούνται τα κινούμενα σχέδια που καλούνται στον παραπάνω κώδικα.

Τώρα ας δώσουμε ζωή στην όμορφη στατική εικόνα μας:

/* Ένα κινούμενο σχέδιο με προσομοιωμένη καθυστέρηση χρησιμοποιείται για την εμφάνιση πολλών στοιχείων. Η προσομοίωση της καθυστέρησης γίνεται ξεκινώντας τη διαδικασία με το 80% του animation να συνεχίζει (και όχι αμέσως). Έτσι μπορείτε να προσομοιώσετε οποιαδήποτε καθυστέρηση: */ @keyframes delayed-fade-animation ( 0% (αδιαφάνεια: 0;) 80% (αδιαφάνεια: 0;) 100% (αδιαφάνεια: 1;) ) /* Κινούμενα σχέδια για την εμφάνιση του μορφή με διεύθυνση ηλεκτρονικού ταχυδρομείουκαι κουμπί. Χρησιμοποιεί επίσης προσομοιωμένη καθυστέρηση */ @keyframes φόρμα-animation ( 0% (αδιαφάνεια: 0; δεξιά: -400 px;) 90% (αδιαφάνεια: 0; δεξιά: -400 px;) 95% (αδιαφάνεια: 0,5; δεξιά: 20 px; ) 100% (αδιαφάνεια: 1; δεξιά: 0 εικονοστοιχεία;) ) /* Αυτή η κινούμενη εικόνα χρησιμοποιείται για να βγάλει το σκάφος από την οθόνη στην αρχή του βίντεο: */ @keyframes boat-in-animation ( 0% (αριστερά: -200px;) 100% (αριστερά : 20px;) ) /* Κινούμενα σχέδια για τα σύννεφα. Η πρώτη ομάδα νεφών αρχίζει να κινείται από το κέντρο και η δεύτερη - στα δεξιά της οθόνης. Η πρώτη ομάδα αφαιρείται αργά από την οθόνη και η δεύτερη εμφανίζεται στα δεξιά. Μόλις η αριστερή ομάδα κρυφτεί εντελώς, τα σύννεφα θα επιστρέψουν γρήγορα στην αρχική τους θέση: */ @keyframes cloud-animation ( 0% (αριστερά: 0px;) 99,9999% (αριστερά: -720px;) 100% (αριστερά: 0px; ) ) / * Τα τρία τελευταία κινούμενα σχέδια είναι σχεδόν τα ίδια - η διαφορά έγκειται στην τοποθέτηση των στοιχείων. Μιμούνται το πιτσίλισμα των κυμάτων του ωκεανού: */ @keyframes boat-animation ( 0% (κάτω: 0px; αριστερά: 0px;) 25% (κάτω: -2px; αριστερά: -2px;) 70% (κάτω: 2px; αριστερά : - 4px;) 100% (κάτω: -1 εικονοστοιχεία; αριστερά: 0 εικονοστοιχεία;) ) @keyframes water-back-animation ( 0% (κάτω: 10 εικονοστοιχεία; αριστερά: -20 εικονοστοιχεία;) 25% (κάτω: 8 εικονοστοιχεία, αριστερά: - 22 εικονοστοιχεία; ) 70% (κάτω: 12 εικονοστοιχεία; αριστερά: -24 εικονοστοιχεία;) 100% (κάτω: 9 εικονοστοιχεία; αριστερά: -20 εικονοστοιχεία;) ) @keyframes water-front-animation ( 0% (κάτω: -70 px; αριστερά: -30 εικονοστοιχεία ;) 25% (κάτω: -68 εικονοστοιχεία; αριστερά: -32 εικονοστοιχεία;) 70% (κάτω: -72 εικονοστοιχεία; αριστερά: -34 εικονοστοιχεία;) 100% (κάτω: -69 εικονοστοιχεία; αριστερά: -30 εικονοστοιχεία;) )

συμπέρασμα

Σε αυτό το μάθημα, μάθαμε μερικές βασικές έννοιες:

1. Τα απόγονα στοιχεία λαμβάνουν τα κινούμενα σχέδια των γονέων τους εκτός από τα κινούμενα σχέδια τους.
2. Όταν δημιουργείτε ένα banner, θα πρέπει να προσπαθήσετε να χρησιμοποιήσετε ένα μοναδικό αναγνωριστικό για να αποφύγετε την επικάλυψη κώδικα με ένα υπάρχον έργο CSS.
3. Τα στοιχεία πρέπει να τοποθετούνται και να διαμορφώνονται σαν να μην είναι διαθέσιμη η κινούμενη εικόνα για να διασφαλιστεί η συμβατότητα προς τα πίσω.
4. Εάν είναι δυνατόν, θα πρέπει να χρησιμοποιήσετε ένα κινούμενο σχέδιο για πολλά στοιχεία.

Αναμφίβολα ένα από τα πιο λαμπερά τάσεις 2012είναι μια εξέλιξη για CCS3, HTML5. Σήμερα προσφέρουμε ένα μεγάλο και πολύ χρήσιμη επισκόπησηπαραδείγματα" 20+: Δημιουργικά και χρήσιμα σεμινάρια CSS3″προσφέρεται στις Specky Boy. Όλα τα παραδείγματα γίνονται στο καθαρισμός χωρίς JavaScript, στα παρουσιαζόμενα μαθήματα υπάρχει επίδειξη και έτοιμα αρχεία CSS3 για λήψη.

Είμαστε σίγουροι ότι αυτά τα κόλπα και οι τεχνικές θα είναι χρήσιμα για τους προγραμματιστές ιστού!

μαθήματα css3 :

1. Συλλογές φωτογραφιών CSS3, ρυθμιστικά, εφέ εικόνας

1.1.Ρυθμιστικό CSS3

Είναι δύσκολο να το πιστέψεις, αλλά αυτό το ρυθμιστικό με διαφορετικά εφέ είναι φτιαγμένο αποκλειστικά σε CSS3, πολύ εντυπωσιακό.

1.2. Φόντο ιστοσελίδας πλήρους οθόνης με εφέ ρυθμιστικού CSS3

Οι σχεδιαστές ιστοσελίδων πειραματίζονται με διαφορετικά υπόβαθρα για έναν ιστότοπο εδώ και πολύ καιρό, αλλά μέχρι στιγμής καθαρό CSSμπορούσε να κάνει πολύ λίγα, έπρεπε να χρησιμοποιήσει JS. Τώρα το CSS3 δίνει τη δυνατότητα να κάνετε με το φόντο του ιστότοπού σας όπως θέλετε - μπορείτε να έχετε ένα φόντο με μεγάλη φωτογραφία υψηλής ποιότητας, μπορείτε να αλλάξετε πολλά φόντο με διαφορετικά εφέ και με δυνατότητα κλιμάκωσης φόντου ανάλογα με τις παραμέτρους της οθόνης. Γενικά, μια καταπληκτική ευκαιρία για δημιουργικούς ιστότοπους.

1.3. Lightbox σε CSS3

Με αυτό το σεμινάριο, μπορείτε να μάθετε πώς να δημιουργείτε ένα Lightbox (Lightbox) με μια ποικιλία εφέ σε καθαρό CSS.

1.4. Ιδιότητες εικόνας CSS3

Αυτό το σεμινάριο παρουσιάζει τις νέες δυνατότητες CSS3 για ιδιότητες εικόνας, όπως στρογγυλεμένες γωνίες, σκιές και άλλα εφέ.

1.5. Κινούμενο banner CSS3

1.6.Γραμμή φόρτωσης CSS3

1.7. Τρισδιάστατη κορδέλα με CSS3



Προβολή επίδειξης ή λήψη αρχείων κώδικα CSS3 →

2. Μενού CSS3, πλοήγηση και κουμπιά

2.1. Μενού Apple.com σε CSS3

Ένα σεμινάριο για τη δημιουργία του διάσημου μενού Apple.com στο CSS3.

2.2. Κινούμενο οριζόντιο μενού CSS3

Ένα απλό σεμινάριο που δείχνει πώς να δημιουργήσετε ένα κινούμενο μενού CSS3 με διαφορετικά εφέ.

2.3. Κινούμενο κατακόρυφο μενού σε CSS3

2.4. Κινούμενα κουμπιά CSS3

Εξαιρετικό σεμινάριο με 7 παραδείγματα κινούμενων δημιουργικών κουμπιών.

2.5. Δημιουργικό κινούμενο μενού με εικόνες CSS3

Σε αυτό το μάθημα, μόνο τα μάτια τρέχουν από τα 10 παραδείγματα που παρουσιάζονται. Τέτοια πολύπλοκα δημιουργικά μενού δημιουργούσαν παλιά αποκλειστικά με τη βοήθεια του JS. ΕΝΤΥΠΩΣΙΑΚΟ!

2.6. Εφέ πλοήγησης κύκλου με CSS3

Ένα ασυνήθιστο εφέ όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το επιλεγμένο στοιχείο πλοήγησης με τη μορφή κύκλου με εικόνα. Σημειώνουμε!

2.7. Αναπτυσσόμενο μενού στο CSS3

Ένα σεμινάριο για την υλοποίηση ενός απλού αναπτυσσόμενου μενού με υποεπίπεδα στο CSS3.

2.8. Πλοήγηση CSS3 με κινούμενες μεταβάσεις

3. Διαφορετικά εφέ στο CSS3

3.1. Επεξήγηση εργαλείου κινούμενης CSS3 χωρίς jQuery