(helle Musik) Willkommen zurück zum Kurs von Knowledge City auf Cascading Style Sheets. Ich bin Cliff Brozo. Und in dieser Lektion werden wir einen Blick darauf werfen so etwas wie ein Begrüßungsbildschirm. Jetzt werden Sie vielleicht sehen, dass der Rest unserer vierten Lektion leer ist. Wir werden gleich darauf zurückkommen, Aber schauen wir uns an, was zum Schaffen gehört ein Begrüßungsbildschirm. Bei der Betrachtung von Adam und unserer Entwicklungsplattform Wir haben ein einfaches HTML-Dokument das hat die allgemeinen Informationen oben oben gezeigt zu einer splash.css-Datei, und wir haben zwei Wrapper, man heißt Container, man heißt Inhalt, und diese beiden werden den Weg bewältigen Der Text wird auf dem Bildschirm angezeigt. Wie du sehen kannst, Unser gesamter Text ist auf eine H2-Überschrift von zwei Größen eingestellt. und für jeden dieser Punkte habe ich eine Klasse angewendet, eine separate, naja, ich nenne sie Regeln für wie jede Zeile dieses Textes angezeigt wird, und im Grunde haben wir hier die Anweisungen für wie man das Spiel spielt. Wir müssen dem Benutzer eine Art Wissen vermitteln damit sie wissen, was zu tun ist. Ich habe also 11 verschiedene Regeln. Nun, der letzte ist nicht gerade eine Regel. Der letzte zeigt tatsächlich auf den Beginn des Spiels, und jede Regel erklärt einen anderen Teil wie das Spiel gespielt wird. Werfen wir einen Blick auf das CSS und wir werden uns darauf konzentrieren zu schauen all die verschiedenen Regelnummern. In unserem CSS, beginnend in Zeile 10, Sie können sehen, dass ich meinen Container habe, das setzt eine feste Position und richtet alles ein so dass es in der oberen linken Ecke ist. Ich verwende 100% der Breite und Höhe des Bildschirms. und dieser Container geht den ganzen Weg in den Hintergrund, und was ich hier mache, ist, dass ich erschaffe ein Radiogradientenhintergrund, und wieder erlaubt mir dies, anstatt eine einfache Farbe zu haben, Ich möchte ein bisschen Farbe von der Mitte nach außen zu den Rändern kommen, und du wirst sehen, wie das aussieht, also anstelle eines einfachen blauen Hintergrunds, Wir werden eine weiche weiße Mitte bekommen und nach außen wachsen und verschwimmen, wenn es nach außen geht. Der Inhaltsteil hat das gleiche mit Ausnahme des sich ändernden Z-Index, und was das tut, ist, dass ich es auf eine sehr hohe Zahl setze, 1.000 sollten ausreichen, und das stellt sicher, dass der Inhalt angezeigt wird wird auf alles gehen, was sich in dem Container befindet, Welches ist der Hintergrund. Meine Regeln für H2 beginnen in Zeile 30 und ich stelle die allgemeine Schriftgröße ein bis zum Fünffachen der Ansichtsbreite, und ich möchte sicherstellen, dass es den Bildschirm ausfüllt. Ich zentriere den Text. Ich verwandle alles in Großbuchstaben. Ich mache die Farbe transparent und ich erstelle eine Animation namens Einblenden und Ausblenden von Unschärfe. Diese Animation wird drei Sekunden lang sein, und jeder dieser H2 wird haben diese Attribute mit ihnen verbunden, und deshalb habe ich diesen speziellen Container dafür erstellt. Dann richte ich jede Regel einzeln ein und ich erstelle eine andere Schriftgröße für jede der Regeln, und der Grund für die unterschiedlichen Schriftgrößen, Ich beginne hier mit sieben, lasse mich auf fünf fallen, Das hängt davon ab, wie viel Text ich zeigen werde. Die kürzeren Regeln haben eine größere Schriftart. und je mehr Wörter in der Regel sind wird ein bisschen eine kleinere Schrift haben um sicherzustellen, dass sie auf den Bildschirm passen. Der Schlüssel hier ist die Animationsverzögerung, und was ich versuche zu erreichen wird eine Reihe von Sekunden eingerichtet wann diese Dinge erscheinen sollten. Also ganz am Anfang, Was passiert, ist, dass Regel eins bei null Sekunden beginnt. Es gibt keine Animationsverzögerung. Wenn dies beginnt, erscheint tatsächlich die erste Regel. Diese Regel besagt, dass dies Wissensstadt ist. Das ist Regel Nummer eins. Das erscheint also sofort auf dem Bildschirm. Dann bleibt es dort fünf Sekunden lang weil Regel Nummer zwei eine Verzögerung von fünf Sekunden hat damit der Benutzer die Möglichkeit hat, die Regeln zu lesen. Jetzt verzögert sich jede dieser Animationen wird unterschiedlich viele Sekunden warten müssen damit der Benutzer Zeit hat, die Regel zu lesen, und je mehr Wörter auf der Regel stehen, je länger die Animation ist, In der Regel sind 10 Sekunden lang genug. und wie Sie sehen können, sind viele von ihnen 10 Sekunden. Regel Nummer drei ist neun. Wenn wir hier unten in Zeile 79 die Nummer neun erreichen, das sind 15 Sekunden und das ist viel Text, und wir möchten dem Benutzer eine Chance geben um den gesamten Text zu lesen, der dort steht. Regel Nummer neun, wie sich herausstellt, erscheint erst nach einer Minute 10 in den Anfang dieses Bildschirms, und Sie können sehen, dass die Verzögerung 70 Sekunden beträgt. Dies ist also eine Möglichkeit, alle Regeln Bildschirm für Bildschirm zu codieren. aber nur mit einem Bildschirm mit CSS.
