(flotte Musik) Willkommen zurück zum Kurs von KnowledgeCity auf Cascading Style Sheets. Ich bin Cliff Brozo, ich bin dein Lehrer. Und heute schauen wir uns die Formatierung eines Cube-Timers an. In einer früheren Lektion Wir hatten einen Timer, der den Überblick hielt wie viel Zeit jeder Spieler in Anspruch genommen hat jeden Hinweis zu beantworten. Außerdem möchten wir einen Timer haben das mal der gesamte prozess damit der Benutzer weiß wie viel Zeit sie für das gesamte Spiel aufgewendet haben. Unser Spieltimer hat die Form eines Würfels und es wird die Minuten verfolgen, Sekunden und sogar Stunden dass der Benutzer benötigt, um das Spiel zu beenden. Der Würfel wird gedreht so dass, wenn wir darüber schweben, es wird sich drehen und ihm ein schickes Aussehen verleihen. Wir werden lernen, dass wir drei Gesichter brauchen, eine für die Stunden, eine für die Minuten und eine für die Sekunden. Und wenn der Würfel sitzt und zählt, es wird auch die Farben ändern. Werfen wir einen Blick auf den Code. Bei der Betrachtung unserer Entwicklungsplattform von Atom, wir bemerken, dass ab Zeile 22, und weiter durch Linie 27, Wir haben einen SPAN namens item2, Das wird den Grid-Timer platzieren im zweiten Element im Raster. Schauen wir uns an, wie das aussieht. Dies wäre die Klasse für item1. Dies ist die Klasse für item2. Wie Sie sehen können, hat die Figur drei verschiedene Klassen weil jedes der Elemente separat formatiert ist. Wir haben also ein Top, das die Sekunden verfolgt. Die rechte Seite, die die Minuten verfolgt und die linke Seite, die die Stunden verfolgt. Diese Elemente haben IDs von Sekunden, Minuten und Stunden. Ich möchte auch Ihre Aufmerksamkeit auf sich ziehen zu dieser Zeile hier, Nummer 34, Das hat einen Wert von hms, Stunden, Minuten, Sekunden und eine Klasse von Hideme und ich möchte Ihnen zeigen, was passiert, wenn ich diese Klasse lösche. Und starte das Spiel neu. (lebhafte Musik) Und das ist ein Weg für mich um ein Telefonfeld in das Spielbrett zu legen dass die Benutzer nicht sehen. Alles, was es tut, ist die Eingabe zu nehmen vom Würfel-Timer und platzieren in das Formularfeld so dass, wenn der Benutzer das Spiel einreicht, Ich werde genau wissen, wie lange sie gebraucht haben um das Spiel zu beenden. Jetzt muss das nicht gezeigt werden und deshalb habe ich die Klasse von Hideme, Ich werde das zurück in Zeile 34 setzen, das verbirgt diesen bestimmten Bereich. Der Benutzer kann also nicht sehen, dass es da ist. Wir werden sehen, wie dieser Gegenstand in nur einer Sekunde versteckt ist. Das ist also der HTML-Code, den wir uns ansehen werden. Werfen wir einen Blick auf das CSS. Beginnend in Zeile 45, Wir haben die Hideme-Klasse, wodurch die Deckkraft auf Null gesetzt wird, Effektives Rendern des Artikels hier für Stunden, Minuten und Sekunden unsichtbar. Ich habe eine Schrift für mein gesamtes Board. Wieder verwende ich die Jeopardy-Schriftart und Gewichte und Stile von fett und normal. Die Abbildung zeigt den tatsächlichen Würfel und wie jeder Teil des Würfels zusammengesetzt ist ist das, was wir uns ansehen werden. Die Breite von 50 Pixeln steuert jede Breite jeder Seite des Würfels. Das gleiche gilt für die Höhe. Also jede dieser Zahlen, Die Null, die Eins, die 51, 52 ist eigentlich ein Quadrat das macht gut drei teile des würfels aus. Wir können niemals den Rücken sehen und tatsächlich existiert der Rücken nicht wirklich. Die Illusion, dass dies ein Würfel ist, ist da wegen der Art und Weise, wie diese gedreht werden. Ich habe dies in eine relative Position gebracht so dass es in diesem Gitterpunkt sitzen wird. Ich habe eine Marge von 15% festgelegt nur um mir etwas Platz an der Wand zu geben. Ich habe meine ursprüngliche Farbe auf DodgerBlue eingestellt. Das wird sich jedoch ändern. Wie Sie sehen, drehen sich die Farben. Sie gehen von gelb über grün nach blau und wir werden sehen, wie das in einer Minute passiert. Es ist schwer, den Textschatten von fünf Pixeln zu sehen aber es gibt wirklich einen und wenn Sie um die Zahl sehen, es ist meistens sichtbar, wenn die Zahlen heller werden, Es leuchtet ein bisschen. Dieses Leuchten kommt vom Textschatten. Meine Animation dauert 10 Sekunden aber es ist unendlich, also geht es weiter und weiter und weiter. Wir werden das gleich sehen. Die Zeilenhöhe von 45 Pixel zentriert die Zahl auf der Vorderseite des Würfels. Und anstatt es unten zu haben des Würfels oder oben, es bringt es genau in die Mitte. Um diesen Würfel zu animieren auf dreidimensionale Weise, Ich muss mein 3D-Setup beibehalten und was ich tue, ist, dass ich die x- und y-Achse drehe. Und wenn ich schwebe, drehe ich sie noch mehr. Im Moment wird der Würfel also gedreht auf der horizontalen Achse 35 Grad und 45 Grad auf der y-Achse und deshalb gibt es dir die Illusion von der Oberseite oder in unsere Richtung kippen. Wenn ich über dem Würfel schwebe, Die Rotation ändert sich und der Würfel dreht sich auf mich zu. Ich kann mit diesen Zahlen spielen und lassen Sie es so viel oder so wenig drehen, wie ich will. Und ich habe eine Übergangszeit von zwei Sekunden eingestellt um diese Drehung zu machen. Wenn ich also über dem Würfel schwebe, Es dauert zwei Sekunden, bis die Vorwärtsdrehung abgeschlossen ist und zwei Sekunden, um die Drehung rückwärts abzuschließen. Hier kommt die Schwebefigur ins Spiel.
