Animationsprojekte für CSS-Schaltflächen

1. Einführung: Hallo, alle zusammen. Ich bin Join the Shortcut. Und willkommen zum spannenden Kurs über animierte CSS-Hobart-Buttons In diesem Kurs tauchen Sie tief in die Welt der Mikrointeraktion ein, tauchen Sie tief in die Welt der indem 20 verschiedene Animationsprojekte für Schaltflächen erstellen, alle nur den Übergang und die Transformation von CSS verwenden Hobart-Animationen mögen klein erscheinen, haben aber einen großen Einfluss auf die Benutzererfahrung Egal, ob Sie ein Anfänger sind, der versucht, Ihr CSS-Spiel zu verbessern, oder ein DB-Haufen, der nach Design-Inspiration sucht Dieser Kurs ist für dich. Jedes Projekt ist kurz, praktisch und enthält drei Tip-Effekte. Von wachsenden Schaltflächen über verschiebbare Kuchen bis hin zu rotierenden Symbolen, springenden Effekten und vielem mehr Sie werden echten CSS-Code in die Hand nehmen und lernen, wie Sie Boarding-Buttons in etwas Auffälliges und Interaktives verwandeln in etwas Auffälliges und Interaktives Keine Bibliotheken, keine Frameworks, CSS-Magie. Sind Sie also bereit, Ihren Webdesigns einen Animations-Thread hinzuzufügen ? Lass uns springen und mit dem Codieren beginnen. 2. Kreativer Drehtöpfeffekt mit CSS: Dies ist also unser erstes Projekt CSS-Transformationseigenschaften verwendet. Wir werden kein Keyframe verwenden, um das Element zu animieren. Wie Sie in diesem Beispiel sehen können, erstellen wir hier eine Schaltfläche Wenn ich mein Auto auf dieser Taste öffne, siehst du hier einen schönen Tastenübergangseffekt. Also werden wir heute in diesem Projekt bauen. Gehen wir also zum Code-Editor von isal Studio und sehen, wie wir dieses Projekt erstellen können Wie Sie sehen können, habe ich meinen isal Studio-Code-Editor bereits geöffnet Und ich erstelle bereits eine TML-Datei mit dem Namen Index Dot TML. Außerdem erstellen wir ein anderes Punkt-CSS im Dateistil, und ich öffne diese Website bereits mit meinem Live-Server Das ist unsere Website. Es ist völlig leer. Dann kehren wir zum User Studio-Code zurück. Zuerst füge ich in meinem Body-Tag einen NCat-Tag, einen - und einen HI-Hashtag In dieses Anca-Tag werde ich Hover Me eingeben. Dann werde ich in den CSS-Dateistil CSS springen. Ich verlinke diese Datei bereits mit diesem EstEML-Dokument. Hier werden wir mit dem Styling beginnen. Zuerst werde ich die Körpermarke ins Visier nehmen. Dann gebe ich in der Liste Höhe, Höhe und 100 VH zu Ich möchte das Anker-Tag in der Mitte dieser Seite platzieren, also verwende ich die Eigenschaft Flocken rechtfertigen den Inhalt, rechtfertigen das Inhaltszentrum. Außerdem werde ich „ Objekt ausrichten“ und „Elemente zentrieren“ verwenden. Ich werde diese Datei einrichten. Wenn ich nach dem Setzen dieser Datei zu meinem Browser zurückkehre, wurde, wie Sie sehen können, der Text zentriert, ich habe das Anker-Tag zentriert. Jetzt öffne ich meinen Browser und meinen Code-Editor Seite an Seite. Wie Sie sehen können, öffnen wir hier meinen Browser und meinen Code-Editor der Einfachheit halber nebeneinander. Mit Flexbox haben wir dieses Element horizontal und vertikal in der Mitte dieser Seite zentriert dieses Element horizontal und vertikal in der Mitte dieser Seite horizontal und vertikal Im Grunde hat es nichts mit Animation zu tun. Wenn du Flexbox and Greet lernen möchtest, kannst du dich für meine anderen Kurse anmelden Lassen Sie uns jetzt das Leak stylen. Ich möchte auf diesen Link mit seinem Tag-Namen A zielen, und innerhalb der Eigenschaft calyces, der ersten Eigenschaft, verwende ich Textdekoration, Textdekoration, Textdekoration, Keine, und ich werde diese Datei einrichten Wenn ich diese Datei einstelle, wird sie, wie Sie sehen, diese Unterstreichung aus dem Text entfernen Danach werde ich eine Schriftfarbe zuweisen. Geben Sie also Farbe ein und ich weise Schwarz zu. Ich möchte für dieses Beispiel eine schwarze Schrift verwenden. Dann definiere ich die Schriftfamilie, die Schriftfamilie, und ich möchte die Luftschrift, die Luftschrift, verwenden. Danach schalten wir die Trouble Raf View und Waraph Danach werde ich der Schriftgröße die Schriftgröße zuweisen, und ich möchte eine Schriftgröße von 45 Pixeln, 45 Pixel, zuweisen Dann möchte ich Border zuweisen. Grenze. Ich möchte einen festen, durchgehenden Pixelrahmen , und die Rahmenfarbe ist auch schwarz. Schwarz. Dann möchte ich Polsterung definieren von oben und unten hinzufüge, ich von oben und unten hinzufüge, definiere ich 30 Pixel und von links und rechts ich 80 Pixel zu Zum Schluss werde ich die Position dieses Elements angeben, einen Typ , der relativ ist. Ich werde diese Datei einrichten. Nachdem wir diese Datei eingerichtet haben, sieht unser Button so aus. Um nun einen schönen grünen Hintergrund zu erstellen, müssen wir das Pseudoelement before verwenden Wenn Sie sich mit Pseudoelementen nicht auskennen, können wir mit CSS vor dem EstimL-Element erstellen, andernfalls nach dem Estimal-Element Also wähle ich das Anker-Tag und hier verwende ich vor p die Klasse Null vor d innerhalb des Alias, hier verwende ich eine Eigenschaft namens content, content, und es ist ein Und um den leeren Inhalt zu definieren, müssen wir Codes von Single Cops verwenden Danach müssen wir die Position definieren und ich verwende Absolute Außerdem muss ich die Startposition definieren, also gebe ich Lab Zero und von oben auch Null ein. Jetzt haben wir also unser Before-Pseudoelement und seine Position befindet sich in der oberen linken Ecke dieses Links Gerade jetzt, bevor das Pseudoelement in der oberen linken Ecke dieses Links platziert wird oberen linken Ecke dieses Links platziert Fügen wir nun die Hintergrundfarbe hinzu. Hintergrundfarbe statt Grün würde ich gerne gelbe Farbe verwenden . Ich habe bereits einen Higa-Wert für diese Hintergrundfarbe kopiert und werde ihn hier einfügen Es wird die orange Farbe zurückgeben. Und dann weise ich diesem Element vor dem positiven Element Höhe zu, Höhe , 100%, und als Nächstes ich auch wed 100% zu. Und ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet hatte, sah sie so aus. Jetzt können Sie sehen, dass das vorherige positive Element als Hintergrundfarbe dieses Anker-Tags erscheint, und es nimmt auch die volle Breite und Höhe dieses Links ein. Aber das Problem ist dieses Element, die Höhe des Textes dieses Anker-Tags. Hier können wir das Hoberm-Wort nicht sehen. Wir können es leicht reparieren. Wenn ich den Wert bestehe, wenn ich diesen Eigenschafts-Z-Index verwende und wenn ich minus einen Wert verwende, dann setze ich diese Datei Jetzt löst es das Problem. Dieser Text wird wieder vor diesem orangefarbenen Hintergrund angezeigt , und jetzt müssen wir diesen gelben Hintergrund aus dieser Richtung im Uhrzeigersinn drehen gelben Hintergrund aus dieser Richtung im Uhrzeigersinn Und wir müssen ihn von der unteren Lippenecke aus drehen. Also müssen wir zuerst den Transformationsursprung definieren, von welcher Position aus ich dieses vor dem positiven Element transformieren möchte Sandro gibt Transformation Oisin ein und ich gebe den Wert für das untere Bein aus dieser Ecke an Dann verwende ich eine weitere Eigenschaft namens transformieren, transformieren, und ich verwende den Wert drehen, innerhalb der runden Strophen drehen, innerhalb der runden Strophen drehen, ich möchte ihn um bis zu -90 Grad drehen Nachdem ich diese Datei eingestellt habe, sieht es so aus, wenn ich dieses Element um -90 Grad von der Ecke aus drehe und dann einen Übergang hinzufüge Übergangstransformation, und ich möchte diesem Übergang noch einmal 1 Sekunde zuweisen Ich möchte diese Transformationseigenschaft für 1 Sekunde ändern, sodass die Rotation in 1 Sekunde abgeschlossen ist. Als Nächstes müssen wir den Huber-Selektor erstellen. Wenn ich dieses Element verschiebe, möchte ich es um bis zu Null Grad drehen Dafür werde ich hier tippen. Zuerst wähle ich das Anchor-Tag aus, dann verwende ich den Huber-Selektor, die HoberPosito-Klasse und Hover Danach wähle ich die vorherige Posito-Klasse aus . Dann heißt es im Auto, dass ich wieder die Eigenschaft transformieren, transformieren und wieder den Drehwert verwenden werde Dieses Mal möchte ich dieses Element um bis zu Null Grad drehen . Ich möchte sagen, dass ich dieses Element an die ursprüngliche Position bringen möchte. jetzt, nachdem ich diese Datei eingerichtet habe, Wenn ich jetzt, nachdem ich diese Datei eingerichtet habe, mit der Maus über diesen Link fahre, können Sie das Ergebnis sehen Wie Sie sehen können, dreht sich mein Auto um 0 Grad, wenn ich mit dem Auto über dieses Element fahre, um das vorherige Element. Es funktioniert also Aber das Problem ist, dass wir diesen orangefarbenen Hintergrund außerhalb dieses Feldes außerhalb dieses Grenzbereichs verstecken müssen diesen orangefarbenen Hintergrund außerhalb dieses Feldes außerhalb dieses Grenzbereichs verstecken . Es ist sehr einfach, dieses Element zu verstecken. Dazu müssen Sie in den Anker-Selektor springen und hier müssen Sie eine Eigenschaft namens overflow verwenden Überlaufen Sie hier, und Sie müssen diese Datei einrichten. Nachdem Sie diese Datei eingerichtet haben, können Sie das Ergebnis sehen. Im Grunde versteckt es das Element außerhalb dieses Randbereichs, aber wenn ich mit dem Cursor über dieses Element fahre, können Sie das Ergebnis sehen Diesmal können Sie diesen wunderschönen Raureffekt, den Huber-Button-Effekt, sehen Huber-Button-Effekt Dieser Hintergrund ist nur im ANCTG-Bereich sichtbar. Außerhalb des Anchtg-Bereichs ist er nicht sichtbar, da wir dieses Element ausblenden Und wenn Sie die Position dieser Rotation ändern möchten , ja, das können Sie Lassen Sie mich Ihnen zeigen, wie, aber vorher werde ich diese Linie empfehlen, weil wir verstehen müssen, wie Diesmal möchte ich dieses Element von dieser Ecke aus in der unteren rechten Ecke drehen dieser Ecke aus in der unteren rechten Ecke Also anstelle von unten links werde ich unten rechts verwenden. Ich werde diesen einstellen. Und jetzt kannst du sehen, wann immer ich Hobe, meine Karten auf diesem Element liegen, dieses orangefarbene Element dreht sich von der unteren rechten Ecke aus der unteren rechten Ecke Aber wenn ich den Wert der Drehung ändere, wenn ich ihn um 90 Grad anstelle von -90 Grad ändere und dann diese Datei, kannst du das unterschiedliche Ergebnis sehen Dieses Mal wird das Element gegen Glaucois gedreht Element gegen Glaucois Wenn ich also mit meinem Auto auf dieses Element steige, kannst du das Ergebnis sehen Und wenn ich die Overflow-Eigenschaft overflow hidden verwende und sie erneut speichere und mein Auto oder den Mauszeiger auf diesen Button bewege, kannst du Hier ändern wir also die Position der Drehung, wenn ich den Wert dieses Transformationsursprungs und den Transformationswert ändere dieses Transformationsursprungs und den Transformationswert So können wir also diesen schönen Button-Hover-Effekt erzeugen diesen schönen Button-Hover-Effekt ohne Animationen zu verwenden, um Übergangseigenschaften zu verwenden Mit Transition und Hover können wir viele Dinge tun Das ist es für dieses Tutorial. In unserem kommenden Tutorial werden wir viele Animationsprojekte behandeln. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Tutorial. 3. Swipe Button Effekt mit CSS: Hallo, alle zusammen. In diesem Projekt werden wir dieses wunderschöne, nette Swipe-Heft kreieren Wenn ich mit der Maus über diesen Link fahre, wird, wie Sie sehen können, eine Hintergrundwischbewegung sanft zu dieser Schaltfläche und sie verdeckt den Hintergrund der Außerdem ist es eine kitschige Button-Textfarbe. Wenn ich mein Haus wieder entferne , ist es wieder an seinem eigenen Platz Mal sehen, wie wir dieses wunderschöne Heft kreieren können. Wie Sie also nebeneinander sehen können, öffne ich meinen Z Sto-Code-Editor und meinen Browser mit der Live Server-Erweiterung und erstelle bereits ein HTML-Dokument mit dem Namen Index Dot TML Damit füge ich dieser Seite bereits eine Style-CSS-Datei hinzu. Im Grunde werden wir eine Swipe-Hoverifi-Schaltfläche erstellen eine Swipe-Hoverifi-Schaltfläche Also füge ich in meinem Body-Tag zunächst ein Anker-Tag A hinzu und den Heldentyp Hover Und ich werde diese Datei einrichten. Um diese Datei einzurichten, wird sie, wie Sie auf meiner Seite sehen können, standardmäßig hier in der Laptop-Ecke abgelegt. Als Nächstes müssen wir diesen Link in der Mitte dieser Seite platzieren . Dazu müssen wir in die CSS-Datei mit dem Tile-Dot springen. Hier wähle ich den Körper des Body-Tags aus und weise dann in den Flüchen unserem Körper Körpergröße zu Höhe 100 VH, 100 Ansicht Fußhöhe und Anzeige hier werde ich Flex verwenden Dann „rechtfertigen“, „enthalten“, „ rechtfertigen“, „zentrieren“. Außerdem werde ich eine weitere Eigenschaft namens Aligns Align Items Center verwenden Aligns Align Items Center Und ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, sieht sie so aus. Jetzt nimmt es das Anker-Tag horizontal und vertikal in der Mitte dieser Seite auf. Als Nächstes müssen wir diesen Link schöner machen. Dafür verwende ich für dieses Anker-Tag seinen Tag-Namen A. Dann möchte ich in der geschwungenen Aussparung zuerst die Unterstreichung von diesem Anker-Tag entfernen die Unterstreichung von diesem Dafür verwende ich Eigenschaft namens Textdekoration Textdekoration, keine. Danach werde ich eine Farbe, eine Farbe, zuweisen und ich möchte erneut einen Hexa-Wert, einen Hashtag, 35, 14 und 35 Es ist lila gefärbt. Dann weise ich der Schriftfamilie die Schriftfamilie zu, und hier weise ich den Bereich zu. Schrift aus der Luft. Als Nächstes weise ich der Schriftgröße eine Schriftgröße 40 Pixeln zu. Danach, danach, werde ich einen Rahmen zuweisen. Rahmen, ich möchte einen durchgehenden Rahmen mit drei Pixeln. Ich werde dieselbe Rahmenfarbe wie die Schrift verwenden. Ich kopiere das Hexa Velo und füge es hier ein. Dann werde ich diese Datei einrichten. Nachdem ich diese Datei eingerichtet hatte, sah sie so aus. Jetzt müssen wir diesem Winkel-Link eine Polsterung hinzufügen. Dafür gebe ich Padding ein. Von oben und unten füge ich 40 Pixel hinzu und von links und rechts füge ich 80 Pixel hinzu Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet hatte, sah sie so aus. Außerdem müssen wir eine Position definieren. Position und Position, die ich relativ zuordnen möchte. Außerdem müssen wir einen Übergang zuweisen , da wir diese Schaltfläche ohne Übergang nicht animieren Ich gebe Übergang ein und füge alles hinzu und lasse das Ganze für 1 Sekunde laufen Ich übergebe eine und werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet hatte, sah sie so aus. Jetzt sieht es viel schöner aus und jetzt werden wir an Swipe Effect arbeiten Die Idee hinter diesem Wife-Effekt ist also, dass wir ein Before-Pseudoelement erstellen müssen Das nimmt die volle Breite und Höhe dieses Links ein. Dann werden wir es außerhalb des Links übersetzen. Und wenn wir mit der Maus über diesen Link fahren, werden wir die Übersetzung entfernen Also wird es an seinen eigenen Ort zurückkehren. Lassen Sie uns nun das Pseudoelement vor dem Pseudoelement erstellen Pseudoelement vor dem Pseudoelement Zuerst tippe ich, ich setze Anker-Tag und dann vorher Dann müssen wir innerhalb der Klasse zuerst einen leeren Inhalt erstellen. Contain ist leer und es ist ein leerer Inhalt. Und das werden wir in dieser Zeile tun. Dann müssen wir die Position und die Position definieren , und ich werde Absolut zuweisen. Als Nächstes müssen wir dieses Element an der oberen Lippenecke platzieren. Hier gebe ich lap t zero, top also zero ein und gebe Höhe, Höhe, 100% Breite, 100% Breite, 100% zu. Dann weise ich die Hintergrundfarbe und die Hintergrundfarbe zu , und ich weise dieselbe Hintergrundfarbe zu, also füge ich diesen Link in dieses Hexa V ein. Ich werde diese Datei festlegen Nachdem Sie diese Datei eingerichtet haben, erscheint, wie Sie sehen können, unser Pseudoelement über dem Huber Mi-Text und seinem Balkentext Wir müssen den Z-Indexwert verwenden , um das Problem zu lösen. Ich werde einen Z-Index zuweisen und einen Wert minus eins übergeben. Ich werde diese Datei einrichten. Nachdem ich diese Datei eingestellt habe, nachdem ich diese Datei eingestellt habe, wird sie jetzt hinter dem Text angezeigt, aber sie ist nicht sichtbar, da die Textfarbe und die Hintergrundfarbe identisch sind. Und jetzt werden wir diesen Wischeffekt aus der letzten Zeit erzeugen, der durch den Übergang leicht zu bewerkstelligen sein wird Also müssen wir dieses Element aus der XXs-Richtung verschieben. Also verwende ich Transform Property, Transform, und ich verwende Translate X Value, Translate X, Translate x, und hier werde ich bestehen. -100%. Und ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet hatte, sah sie so aus. Jetzt geht es über die Grenze hinaus. Jetzt verschiebt es dieses Element zu 100% Lippenseite, weil wir die Minusbreite verwenden. Außerdem ist unser Text aufgrund der weißen Hintergrundfarbe sichtbar . Wenn ich jetzt mit der Maus über diesen Link fahre, möchte ich das Before-Pseudoelement wieder an seinen eigenen Platz Außerdem möchte ich die Textfarbe in Weiß ändern. Wenn ich mit der Maus über diesen Link fahre, also diesen Link auswähle, erstelle ich den Hober-Selektor am roten ATAC-, Doppelpunkt Dann werde ich innerhalb der Klasse X transformieren, transformieren, übersetzen und amnopas Das bedeutet, dass es wieder an seinen eigenen Platz zurückkehrt. Außerdem möchte ich einen Glättungseffekt hinzufügen, also beim Übergang. Damit müssen wir die Zeit definieren, also werde ich 1 Sekunde definieren Nachdem ich diese Datei eingerichtet habe, wenn ich mit der Maus über diesen Link fahre, können Sie sie wieder an ihrem eigenen Ort sehen Jetzt müssen wir die Schriftfarbe dieses Textes ändern. Außerdem müssen wir den Hintergrund außerhalb des Links verstecken. Und es ist sehr einfach, das Überlaufelement auszublenden. Wir müssen nur in das Anchor-Tag springen, dann müssen wir die Overflow-Eigenschaft overflow hidden verwenden die Overflow-Eigenschaft overflow hidden Und ich werde diese Akte ablegen. Wie Sie sehen, bringt diese Datei durcheinander, sie versteckt das Element, das positive Element im Vordergrund. Und wenn ich hoffe, dass meine Autos auf diesem Text stehen, wie Sie sehen, erscheint wieder diese Folie, ist wieder an ihrem eigenen Platz. Der Hintergrund ist also außerhalb von Ding unsichtbar, und wir haben auch den gewünschten Effekt erzielt. Und zum Schluss lassen Sie uns den Text farbig nachzeichnen. Also wähle ich zuerst das Anker-Tag A, Hover Dann im Auto***, wenn ich auf diesen Link klicke, möchte ich die Farbe ändern, Farbe Weiß Ich werde diese Datei einrichten. Wenn ich also nach dem Setzen dieser Datei den Cursor auf diesen Link bewege, ist er weiß geworden und es lief auch reibungslos, weiß geworden und es lief auch reibungslos weil wir in unserem Anchor-Tag Transition All, Transition All, hinzugefügt haben in unserem Anchor-Tag Transition All, Transition All, Jetzt verstehen wir das Konzept des Swipe-Effekts. Wenn du die Richtung ändern willst, ja, das kannst du. Sie können die Richtung leicht ändern. Sie können diese Folie, diese Folie von der rechten Seite, auch von oben und unten, aufrufen. Lass uns jetzt die Richtung ändern. Ich möchte diese Folie von der rechten Seite anzeigen lassen. Dafür müssen Sie es in einer Zeile ändern. Ich werde diese Zeile duplizieren und die vorherige auskommentieren. Dieser ist für Lip. Ich werde meinen Kommentar auf der Lippenseite eingeben. Wenn ich den Wert ändere, wenn ich ihn positiv mache, wird dieser Wert auf der rechten Seite platziert. Wenn ich nach dem Einstellen dieser Datei zu meinem Browser zurückkehre und sie starte, können Sie jetzt sehen, wie sie aus der entgegengesetzten Richtung kommt, auf der rechten Seite dieses Felds. So können wir also die Richtung ändern. Ich hoffe, jetzt ist Ihnen klar wie wir diesen Effekt erzielen können. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Projekt. 4. Button-Hover-Effekt: Hallo, alle zusammen. In diesem Video werden wir den wunderschönen Haeffet kreieren Wenn ich meine Karten auf diese Schaltfläche bewege, kannst du diesen Ha-Effekt erleben Schauen wir uns also an, wie wir diesen schönen Effekt erzielen können. Wie Sie sehen können, befinden wir uns in meinem Results Studio-Code-Editor. Und hier habe ich bereits mein vorheriges TML-Dokument in Exot TML geöffnet mein vorheriges TML-Dokument in Exot TML In unserem Body-Tag erstellen wir bereits dieses Anker-Tag. Außerdem verlinken wir mit der Style Dot CSS-Datei. Und wenn ich in die Style-CSS-Datei springe, dann richten wir, wie Sie sehen, diese Ankerelemente bereits horizontal und vertikal in der Mitte dieser Seite über mir aus. Ich verwende diesen Code erneut , weil ich unsere Projekte nicht zu lang machen möchte. Und jetzt werde ich dieses Ankerelement ins Visier nehmen. Ich gebe A ein, dann verwende ich in der Eigenschaft clivSF Padding, Padding und weise 40 Pixel von oben und unten und 80 Pixel von links und rechts zu unten und 80 Pixel von links und rechts Dann verwende ich eine weitere Eigenschaft namens eine weitere Eigenschaft Schriftfamilie, ich werde sensorisch verwenden. San Salk. Als Nächstes entferne ich die Unterstreichung, also verwende ich Textdekoration Textdekoration, keine. werde ich die Schriftgröße definieren. Schriftgröße, Schriftgröße und ich werde 45 Pixel definieren. Dann füge ich dieser Schrift eine Farbe hinzu. Einige von Ihnen verwenden Farbe, und als Farbe werde ich den Hexa-Wert 26, 26, 26 verwenden , diesen Farbcode, quasi dunkelgrau Dann definiere ich den Buchstabenabstand zwischen den Buchstaben Ich möchte also einen Buchstabenabstand eingeben und einen Buchstabenabstand von zwei Pixeln hinzufügen. Als Nächstes füge ich einen Rahmen hinzu. Rand Ich möchte fünf Pixel und einen durchgehenden Rand hinzufügen, so ist es. Außerdem hat unsere Rahmenfarbe dieselbe Farbe wie die Schrift Kopieren Sie den Farbcode und ich werde ihn hier einfügen. Danach müssen wir die Position (Position) relativ definieren , und wir müssen auch den Übergang definieren. Übergang und ich möchte ihn für 1 Sekunde ändern, einer ist. Ich werde diese Datei einrichten. Nachdem wir diese Datei eingerichtet haben, sieht unser Button so aus. Jetzt müssen wir ein Pseudo-Element verwenden, und ich werde das Before-Pseudoelement verwenden Es ermöglicht uns, ein Element vor dem Element zu erstellen. Ich werde das vorherige Posen erstellen , um auszuwählen, ich werde das Element A, Doppelpunkt, BF als Ziel auswählen. Dann werde ich in der ersten Eigenschaft von Alives einen leeren Inhaltstyp, CONTENT Content, erstellen und hier werde ich einen leeren Inhalt erstellen Dann Semikolon, um diese Zeile zu beenden. Danach werde ich die Position definieren. Position, ich werde absolut verwenden. Dann müssen wir die Position definieren , an der ich dieses Element platzieren möchte, dieses leere Inhaltselement. Ich möchte es platzieren, ich möchte es an der Stelle an dieser Ecke platzieren. Also werde ich von oben an Null vorbeigehen und von links werde ich auch Null passieren. Dann möchte ich mit definieren und ich möchte 100% des Gewichts dieses Containers verwenden. 100%. Außerdem werde ich Höhe, Höhe, ebenfalls 100% zuweisen. Dann müssen wir eine Hintergrundfarbe für dieses Element definieren. Hintergrund und Hintergrundfarbe als Hintergrundfarbe, ich möchte dieselbe Hintergrundfarbe zuweisen, also kopiere ich diese. Ich füge diesen ein und füge ihn auch als Übergang hinzu. Übergang, ich möchte ihn für 1 Sekunde ändern, und ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, sieht sie so aus wie unser Element-Cover-D-Text, und wir müssen den Z-Indexwert verwenden, um erneut apirDTT zu erstellen Jetzt können Sie den Link, den Linktext nicht mehr sehen, weil das vorherige Element davor erscheint und wir wissen, wie wir das Problem mithilfe des Z-Index lösen Lassen Sie uns nun über das Feld drehen sprechen. Erinnern Sie sich an Rotate x with weiter oben in unserem vorherigen Abschnitt? Wir haben bereits gelernt, x zu drehen und Y zu drehen vds Mit Rotate X können wir unser Element entlang der X-Achse drehen und mit Rotate Y können wir das Element entlang der Y-Achse drehen . Lass mich dir das zeigen Wenn ich diese Website öffne, ist dies das Beispiel für Rotation X. Wenn ich meinen Cursar auf dieses rotierende X-Element halte, können Sie das Ergebnis sehen So dreht es sich. Ich drehe dieses Element um 80 Grad und wenn ich es um 90 Grad drehe, wie Sie sehen können, und dann meine Autos darauf schweben lasse , lässt es das Element manchmal komplett verschwinden Wenn ich dieses Element um 90 Grad drehe, wird es auf die gleiche Weise verschwommen, wenn ich den Mauszeiger bewege, um Y-Element zu drehen. Wie Sie sehen können, wurde dieses Element auf diese Das ist es, was „ X drehen“ und „Y drehen“ bewirken. Kommen wir nun zurück zum Code. Hier verwende ich eine weitere Eigenschaft namens transform, transform, und ich verwende den Wert rotate X, diese hier, ich werde dieses Element um 90 Grad drehen. Ich werde diese Datei einrichten. Nach dieser Datei, wie Sie sehen können, verschwindet das Element, denn wie ich Ihnen schon gesagt habe, wenn ich dieses Element um Xxs von X um 90 Grad drehe, wird das Element verschwinden Angenommen, das ist das Element. Wenn ich das Element , wie Sie sehen, um 90 Grad drehe, verschwindet das Element Sie können nur eine einzige Linie sehen. Das ist es also, was wir in diesem Element anwenden. Es ist vor dem Pseudoelement verschwunden. Wenn ich nun mit meiner Kara auf dieses Element fahre, möchte ich das Pseudoelement wieder auf Null setzen Dafür erstelle ich einen Her-Selektor vom Typ S und das Categ A, dann erstelle ich einen Her Selector Hover, dann verwende ich vorher Before Positoclass. Dann verwende ich innerhalb der Aliase dieselbe Eigenschaftstransformation, kopiere sie und füge sie hier ein, aber diesmal verwende kopiere sie und füge sie hier ein, ich Ich werde es wieder auf Null setzen. Null DEG nach dem Setzen dieser Datei, wenn ich zu meinem Browser zurückkehre und meine Karten auf diesem Element sind, wie Sie sehen können, ist es jetzt wieder an seinem eigenen Platz Es dreht das Element um Null Grad. Jetzt können Sie wieder sehen, dass es den Text vergrößert. Sei wieder einmal im Übergang, wir können diese Rotation sehr reibungslos erleben. Außerdem müssen wir die Textfarbe ändern, wenn wir mit der Maus über den Link fahren Wir müssen es in Weiß umwandeln. Wenn wir also auf den Link zielen, andernfalls mit der Maus über den Link, der heiß ist, und dann innerhalb der Farbaussparung, werde ich die Farbe ändern und ihn weiß machen Ich werde das auf fünf einstellen. Als Nächstes werde ich dieses Pseudoelement einen Schritt zurückstellen Also gebe ich hier einen Z-Index minus eins ein. Dass der Text vor dem Element steht. Nachdem ich diese Datei eingerichtet habe und meine Autos über dieses Element schweben lasse, können Sie das Ergebnis sehen Sie können diesen Übergang erleben. Wenn ich mit der Maus darüber fahre, dreht es das Element um null Grad und es ändert auch die Textfarbe, und ich kreiere einen schönen Button-Over-Effekt Was jetzt? Wenn ich dieses Element bei YXS rotiere, wenn du mit Uter ein weiteres Posido-Element erstellst , lass es mich dir zeigen Ich werde diesen Abschnitt duplizieren und dieses Mal werde ich ein weiteres Element oberhalb des Elements erstellen Ich werde Ater Selector verwenden, danach. Dann werde ich es dieses Mal bei YX rotieren. Y, 90 Grad bei YxS. Außerdem werde ich diesen Abschnitt kopieren . Verstehst du diesen Abschnitt Dieses Mal werde ich es auf Ater PositoGlass zeigen. Außerdem müssen wir den Rotationswert ändern . Wir müssen es um Y drehen lassen. Und ich werde diese Datei einstellen Wenn ich nach dem Einstellen dieser Datei meinem Carter auf dieses Element fahre, können Sie hier einen wunderschönen Button-Effekt erleben Wenn ich mein Auto über dieses Element schweben lasse, dreht es beide Vorher-Element auch das Nachher-Element ab 920 Grad. Deshalb hat es einen schönen Schwebeeffekt erzeugt. Ich hoffe, jetzt ist es für Sie klar, wie wir diesen schönen Button-Hover-Effekt erzeugen können Also danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf unser nächstes Projekt. 5. Leuchtender Buttoneffekt: Hallo, alle zusammen. In diesem Projekt werden wir diesen Effekt erzeugen, wenn ich mit der Maus über diesen Link fahre wenn ich mit der Maus über diesen Link Hier können Sie diesen Effekt erleben. Lassen Sie mich Ihnen jetzt die Schnee-Demonstration zeigen. Was genau passiert hier. Wenn ich mit der Maus über diesen Link fahre, können Sie dieses Ergebnis sehen Nachdem Sie mit ihr über diesen Link gegangen sind, , wie Sie sehen können, die Hintergrundfarbe geändert Außerdem können Sie feststellen, dass es eine dicke weiße Linie gibt, die um 45 Grad geneigt ist und gleichzeitig den Link passiert, wenn ich mit der Maus über den Link fahre und auch die Hintergrundfarbe ändere Wir werden diesen Effekt erzielen. Kehren wir zum Studio-Code-Editor des Benutzers zurück. Wie Sie sehen können, haben wir in unserem Body-Tag bereits TML für den Dokumentnamen, den Indexpunkt , erstellt unserem Body-Tag bereits TML für den Dokumentnamen, den Indexpunkt , Geben Sie hier A ein und klicken Sie auf CTTagHber Dann verbinde ich bereits eine CSS-Datei mit diesem Style-Punkt-CSS Und wenn ich in die CSS-Datei mit dem Stil springe, gebe ich , wie Sie sehen können, zuerst die Höhe in unserem Hauptteil an , dann verwenden wir Displayflakes und richten Content Center und Align In Center aus, Content Center und Align In Center um das Anker-Tag vertikal und horizontal in der Mitte dieser Seite zu positionieren das Anker-Tag vertikal und horizontal in der Mitte dieser Seite Jetzt füge ich zunächst einen dunkelgrauen Hintergrund hinzu, eine enge Hintergrundfarbe Und ich verwende einen Hexa-Wert mit dem Tag Has Tag 22, zwei, und ich lege diese Datei fest Nachdem ich diese Datei eingestellt habe, hat sie, wie Sie sehen können, diesmal die Hintergrundfarbe in dunkelgrau geändert . Als Nächstes werde ich dieses Anker-Tag ins Visier nehmen. Ich werde diesen Button stylen. Sie geben also A ein und innerhalb der Eigenschaft Clivus first verwende ich Takes Decoration, Text Decoration Benötigt Dekoration, ich werde Non-Property verwenden. Dann entferne ich die Unterstreichung aus dem Text, ich werde diesem Text eine Farbe zuweisen, und ich möchte der weißen Farbe Weiß zuweisen Als Nächstes weise ich Schriftfamilie und Schriftfamilie zu, und ich möchte die Schriftfamilie Sans zuweisen Dann weise ich die Schriftgröße zu. Schriftgröße, ich möchte eine Schriftgröße von fast 40 Pixeln zuweisen, 40 Pixel. Ich denke, es reicht dafür. Ich hab das verärgert. So sieht es aus. Jetzt füge ich einen Rahmen hinzu, einen festen Rand. Eine Art Rahmeneigenschaft, und ich möchte einen festen Rahmen mit drei Pixeln, einen festen Rahmen. Dann weise ich der Rahmenfarbe eine Rahmenfarbe zu, füge die Farbe Weiß und Weiß hinzu Rahmenfarbe eine Rahmenfarbe zu, füge die Farbe Weiß und Weiß und lege diese Datei fest Dann füge ich Polsterung hinzu, Polsterung von irgendeinem Typ, Polsterung Von oben und unten weise ich 40 Pixel zu und von links nach rechts weise ich 80 Pixel zu. Und ich werde diese Datei einrichten. Ich habe diese Datei eingestellt, so sieht sie aus. Dann werde ich Transition Property verwenden. Übergang für Übergang, ich weise all diesen Eigenschaften den Übergang zu , also alle, und dann definiere ich die Übergangsdauer, die 0,3 Sekunden beträgt. Dann definiere ich die Position relativ. Und ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet hatte, sah sie so aus. Als Nächstes möchte ich die Hintergrundfarbe ändern , wenn ich mit der Maus über diesen Link fahre Ich möchte es rot machen. Ich werde einen Hover-Selektor, einen Anker-Tag und einen Doppelpunkt-Hover erstellen Anker-Tag und einen Doppelpunkt-Hover Dann werde ich innerhalb der Spalte die Hintergrundfarbe irgendwie ändern, hintergrundfarben, hintergrundfarben, und ich werde Rot als Farbe ROT zuweisen Jetzt verordne ich diese Datei. Ich habe über diesen Link geklickt, wie du siehst, jetzt wechselt die Hintergrundfarbe in rote Farbe Und jetzt möchte ich die dicke weiße Linie erstellen. Und dafür werde ich das Pseudo-Element Before verwenden. Also werde ich das Before-Pseudoelement erstellen. Zuerst werde ich auf das Ka-Tag zielen, dann auf den Doppelpunkt und dann auf das Unikat davor Dann erstelle ich in den Kelchen zunächst einen leeren Inhalt, der einen Doppelpunkt enthält, und das ist leerer Inhalt Dann möchte ich die Hintergrundfarbe für dieses Element definieren. Hintergrundfarbe, und ich möchte weiße Farbe zuweisen. Weiß. Danach definiere ich die Position des Pseudoelements Ich tippe Position und dieses Mal möchte ich die absolute Position zuweisen Dann möchte ich dieses Element an dieser Ecke platzieren , in der oberen späten Ecke. Von oben weise ich Null zu und von links weise ich auch Null zu. Dann müssen wir die Höhe dieses Elements innerhalb der Höhe definieren. Für die Breite gebe ich 100%, 100% und für die Höhe weise ich Höhe zu, ich weise 50 Pixel zu und lege diese Datei fest. Nachdem ich diese Datei eingerichtet habe, sieht sie so aus. Das ist unser vorheriges Pseudoelement. Und jetzt möchte ich es auf die linke Seite außerhalb des Linkbereichs verschieben die linke Seite außerhalb des Linkbereichs Dafür werden wir Transform Property verwenden, irgendeinen Typ Transform Transit X minus, ich möchte es auf -100% übersetzen Und ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet hatte, sah sie so aus. Ich verschiebe dieses Pseudoelement von vor diesem Bereich, aus diesem Cat-Tag-Bereich Und jetzt möchte ich dieses Element um 45 Grad drehen. Also hier verwende ich den Wert drehen, drehen. Und ich möchte es um bis zu 45 Grad drehen, und ich werde diese Datei unterschreiben Nachdem wir es um bis zu 45 Grad gedreht haben, sieht unsere Linie so aus Wenn ich jetzt mit meinem Auto auf diese Taste fahre, möchte ich diese Linie nach rechts bewegen, um den Effekt zu erzielen Außerdem müssen wir dem Glättungseffekt einen Übergang zuweisen. Ich werde diesen Eigenschaftsübergang verwenden, also kopiere ich diesen und füge ihn hier ein Jetzt werde ich einige Änderungen vornehmen, wenn ich mit der Maus über den Link in meiner Ich möchte das vorherige Psudo-Element verschieben. Dafür müssen wir ein Selektor-Anker-Tag erstellen, dann den Mauszeiger bewegen und dann Before-Psudoelement vorher verwenden Dann heißt es im Auto: Hey, ich benutze Transform Property, Transform, ich benutze Transform Property, Transform, Translate. Übersetze, und ich möchte es auf 100% erhöhen, nicht auf minus, positive 100%. Außerdem möchte ich während des Botments die Elemente drehen, Rotate 45 D EG verwende Jetzt, nach Septifive, wenn ich über meine Autos fahre , können Sie sehen, wie sich dieses Element auf die rechte Seite bewegt Und du kannst den Übergang auch spüren. Jetzt müssen wir den überschüssigen Bereich, den überschüssigen Bereich außerhalb des Anca-Tags, vergrößern. Dafür müssen wir die Overflow-Eigenschaft verwenden. Um das Problem zu lösen, müssen wir in den Anca-Tag-Selektor springen und hier müssen wir eine Eigenschaft namens overflow, overflow hidden verwenden Nachdem Sie diese Datei eingerichtet haben, können Sie jetzt feststellen, dass das Pseudo-Element vorher nicht sichtbar ist, aber wenn ich meine Casa darauf öffne, können Sie den schönen Effekt erzielen So können wir dieses Projekt erstellen. Ich hoffe, jetzt ist es für dich klar. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Projekt. 6. Skalierungsschaltfläche für Text mit CSS: Hallo, alle zusammen. Ich bin wieder mit einem neuen, projektbezogenen Button-Hover-Effekt In dieser Lektion werden wir diesen schönen Haffet erstellen und diesen vor dem Pseudoelein verwenden Pseudoelein Lassen Sie uns also in den Studio-Code-Editor springen und sehen, wie wir das Studio-Code-Editor springen und Wie Sie sehen können, befinden wir uns in meinem Studio-Code-Editor, und wie Sie sehen können, haben wir bereits ein HTML-Dokument mit dem Namen Index Dot HTML erstellt Und im Body-Tag nimmt Harry das Tag und schneidet es aus, und Heartypeh Dann erstelle ich bereits eine Style-CSS-Datei und verknüpfe diese Datei mit dem Tabellendokument Lassen Sie uns nun zum Style-CSS-Stapel springen. Wie Sie sehen können, rechtfertigen diese Playfiq, wie wir die Höhe zuweisen, die Ausrichtung der Elemente im Inhaltszentrum Um dieses Ankerelement horizontal und vertikal in die Mitte dieser Seite Lassen Sie uns dieses Element nun stylen. Ich wähle dieses Element mit seinem Tag-Namen A aus, dann ist innerhalb der Aliase die erste Eigenschaft, die ich verwenden werde, die Dekoration Benötigt Dekoration, ich werde keine verwenden. Dann verwende ich eine weitere Eigenschaft namens color, color, und weise ihr eine Textfarbe zu. Ich werde eine Art dunkelgrauer Farben verwenden, um Haztag 26, 26 Dann werde ich die Schriftfamilie definieren. Schriftfamilie, ich werde Sansai zuweisen. Dann definiere ich die Schriftgröße, Schriftgröße 40 Pixel Danach definiere ich Rahmen und Rahmen und weise einen durchgehenden Rahmen mit drei Pixeln zu. Durchgehend und unsere Rahmenfarbe ist Hatag und ich werde dieselbe Farbe verwenden , die ich für die Schriftfarbe verwende Als Nächstes definiere ich die Polsterung. Polsterung von oben und unten, ich werde 40 Pixel von links und rechts definieren, ich werde 80 Pixel definieren Jetzt werde ich den Übergang definieren. Übergang, und ich möchte den Übergang für Oop anwenden, und ich werde die Übergangszeit auf 0,5 Sekunden definieren. Und ich muss auch die Position (Position) relativ definieren. Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, sieht unser Button so aus. Und jetzt verwende ich das Pseudo-Element vor, um unseren Effekt zu erzeugen Also hier werde ich tippen. Zuerst wähle ich den Anti-Tag aus, dann verwende ich Before Procedure Selector BEFORE Dann füge ich zunächst Inhalt und Inhalt hinzu und gebe dann O M In dem einzelnen Kurs tippe ich also über mich Danach definiere ich die Position, die absolute Position. Als Nächstes definiere ich das Tempo, in dem ich diesen Text platzieren werde. Ich möchte diesen Inhalt an dieser Ecke platzieren. Ich werde von oben tippen, ich werde Null übergeben und auch von links werde ich Null übergehen. Dann definiere ich Höhe und Breite, Höhe, gebe Höhe 100% und Breite 100% zu und Breite 100% Dann füge ich diesem Element, dem positiven Element, eine Hintergrundfarbe hinzu . Ich gebe Hintergrundfarbe und möchte dieselbe Farbe zuweisen, diese dunkelgraue Farbe. Als Nächstes weise ich Schriftfarbe und Farbe zu, und ich weise der Farbe Weiß zu, weil wir dafür sorgen müssen, dass sie weiß sichtbar ist. Und ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet hatte, sah sie so aus. In unseren vorherigen Beispielen erstellen wir die meiste Zeit einen leeren Inhalt. Aber dieses Mal in dieser Meise haben wir diesen Text über mich gelegt. Und jetzt müssen wir diesen Text in der Mitte dieses Containers platzieren , vertikal und horizontal. Dafür verwende ich die Eigenschaft Flex, zeige Flocken als Ausrichtung des Inhalts an, richte den Inhalt in der Mitte aus und richte das Element so aus, dass es mittig zeige Flocken als Ausrichtung des Inhalts an, richte den Inhalt ausgerichtet Und ich werde diese Datei einstellen Nachdem ich diese Datei eingerichtet habe , sieht sie so aus. Jetzt möchte ich die Kampfzeit auf dem dunkelgrauen Hintergrund erhöhen. Ich möchte die Anpassung anhand der horizontalen Größe skalieren lassen und das Hintergrundelement wird dadurch sehr Außerdem werden wir die Opazität auf Null setzen. Es wird es also transparent machen. Und wenn ich mit der Maus über diesen Link fahre, möchte ich de erneut skalieren Ich möchte wieder eins daraus machen. Damit werde ich auch die Oposität ändern. Ich werde es wieder schaffen. Ich möchte es wieder sichtbar machen. Also lass es uns tun. Zuerst verwende ich scale, some t, transform, und ich möchte die Skill-Value-Skala verwenden, und ich möchte es fünfmal machen. Nachdem ich diese Datei eingerichtet habe, sieht sie so aus. Ich mache es viel größer als das vorherige. Es skaliert diese Hintergrundelemente um das Fünffache ihrer Größe, aber ich möchte, dass sie außerhalb dieses Links versteckt werden. Hier in diesem Ankerelement werde ich Overflow Property, Overflow, Overflow verwenden Versteckt, und ich werde diese Datei einrichten. Nach dem Speichern sah es so aus. Jetzt können Sie außerhalb des Linkbereichs sehen, das vorherige Pseudoteil-Element ausgeblendet ist Außerdem müssen Sie dieses Element vollständig transparent machen. Im Vorher-Selektor wende ich die Opazitätseigenschaft, Opazität und dann Opazität Null an Wenn ich diese Datei eingestellt habe, sah sie so aus. Jetzt ist das Hintergrundelement V fore vollständig transparent. Außerdem ist es in unserem Überlaufbereich nicht sichtbar. Jetzt möchte ich Transition anwenden. Hier werde ich den Übergang ausprobieren, und ich möchte die gesamte Eigenschaft des Übergangs anwenden, und ich werde mir 0,5 Sekunden Zeit nehmen. Ich werde diese Datei einrichten. Als Nächstes möchte ich beim Schweben dieses Pseudoelement zu einem Eg machen Ich möchte den Umfang dieses Pseudoelements reduzieren und außerdem müssen wir den Transparenzwert erhöhen Wir müssen es sichtbar machen. Ich gebe A, Doppelpunkt Heber, Doppelpunkt ein und verwende den Before-Selektor. Ich werde zuerst auf das Kraftelement zielen, dann innerhalb der Klasse, auf die ich die Transformationseigenschaft und die Transformationsskala anwenden möchte , und ich möchte es zu einem machen Außerdem werde ich Opa City Opacity machen, ich werde eins daraus machen Ich möchte es vollständig sichtbar machen, wenn ich mit der Maus darüber fahre, und ich werde diese Datei einrichten Jetzt, nachdem ich diese Datei eingerichtet habe, wenn ich mit der Maus über dieses Anker-Tag fahre, erzielen wir das gewünschte Ergebnis Dieses Ergebnis. Ich hoffe, jetzt ist es für dich klar, wie wir diesen schönen Va-Button Hova Left kreieren können Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf unser nächstes Projekt. Wir sehen uns bald. 7. Kreisförmiger Wechselknopf: Hallo, alle zusammen. Wieder einmal bin ich zurück mit einem neuen projektbezogenen Button Herefit In dieser Lektion werden wir diesen großartig aussehenden Button Haefet erstellen diesen großartig aussehenden Button Wie Sie sehen können, wenn ich mit dem Mauszeiger darüber fahre, können Sie diesen Effekt erleben Wenn ich mit der Maus über diese Schaltfläche fahre, diese Schaltfläche von oben mit einem roten Hintergrund gefüllt Lassen Sie uns also mit dem Praktischen beginnen und sehen, wie wir es erstellen können Wie Sie also nebeneinander sehen können, öffne ich meinen ist Studio-Code-Editor und meinen Browser mit der Light-Server-Erweiterung, und ich erstelle bereits ein HTML-Dokument dem Namen Index Dot HTML. Damit erstelle ich bereits diese Style-Dot-CSS-Datei und verknüpfe diese CSS-Datei mit diesem Dokument. Jetzt werde ich innerhalb des Body-Tags zunächst ein Button-Tag erstellen. Also werde ich hier Button Tag Button eingeben und außerdem werde ich eine Klassenklasse zuweisen und unser Klassenname ist Button T in Kurzform. Dann gebe ich einfach Button ein. Ich möchte diese Datei einrichten. Nachdem ich diese Datei eingerichtet hatte, sah sie so aus. Jetzt müssen wir diesen Button in der Mitte dieser Seite platzieren. Dafür müssen wir in die Style-CSS-Datei springen. Zuerst wähle ich das Body-Tag Body aus. Dann weise ich innerhalb der Spalte dieser Seite zuerst Rand, Rand, und ich möchte Rand Null zuweisen, dann weise ich diese niedrige Eigenschaft zu Flocken anzeigen Richten Inhalt in der Mitte aus. Richten Sie auch die Elemente zentriert aus, um die Elemente mittig auszurichten Als Nächstes weise ich dieser Seitenhöhe eine Höhe zu und weise eine Höhe von 100 H zu. Dann weise ich FontOnFamily zu , und ich möchte die sensorische Schrift Sanserith zuweisen . Ich werde diese Nachdem ich diese Datei eingestellt hatte, sah sie so aus , als ob diese Schaltfläche in der Mitte dieser Seite horizontal und vertikal ausgerichtet dieser Seite Als Nächstes werde ich die Schaltfläche anhand ihres Klassennamens als Ziel verwenden. Dafür gebe ich Punkt BTN ein. Innerhalb der Eigenschaft colors, first, verwende ich border border, und hem, um einen durchgehenden Rahmen mit zwei Pixeln zuzuweisen. Solide Aquarell ist Ich werde diese Datei einrichten. werde ich den Hintergrund entfernen. Hintergrund, und ich werde keinen zuweisen. Dann werde ich die Textfarbe ändern. Ich schreibe Farbe und möchte Tomato Egging eine Farbe zuweisen. Als Nächstes werde ich von oben und unten und von rechts etwas Polster auftragen und Ich gebe Abstand von oben und unten ein, weise 20 Pixel zu und von links und rechts weise ich 40 Pixel zu Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, sieht sie so aus. Als Nächstes definiere ich die Schriftgröße. Ich gebe Schrift und Schriftgröße ein. Hier werde ich der Schriftgröße 25 Pixel zuweisen. Danach verwende ich eine Eigenschaft namens Texttransformation, Texttransformation, Texttransformation in Großbuchstaben Als Nächstes weise ich eine weitere Eigenschaft zu, nämlich Cursor, Cursorzeiger Immer wenn ich den Cursor auf diese Schaltfläche bewege, wird sie zu einem Zeiger. Danach weise ich den Übergangsübergang zu, und ich möchte den Übergang für all diese Eigenschaften anwenden . Meine Übergangsdauer beträgt 0,5 Sekunden. Dann werde ich diese Datei einrichten. Als Nächstes definiere ich die Position, Position, ich werde Relaty verwenden Lassen Sie uns nun am Schwebeeffekt arbeiten. Wir werden dafür das Before-Pseudoelement verwenden und wir kennen den Prozess Lassen Sie uns nun das Before-Pseudoelement erstellen. Geben Sie also Punkt BTN, Button, Doppelpunkt, B vier ein Dann verwende ich in der AlyssF-Redlichkeit Inhalt, Inhalt, und ich werde leeren Dann definiere ich die Position dieses Inhalts, die Position, und ich verwende den absoluten Wert Ich möchte dieses Element an dieser Ecke platzieren. Von oben oben weise ich Null zu und auch von links weise ich Null zu. Ich möchte das Element von der oberen linken Ecke aus starten. Dann definiere ich innerhalb der Höhe mit 100%. Außerdem werde ich Höhe, Höhe, 100% definieren. Dann definiere ich den Hintergrund und möchte den Hintergrund in der Tomatenfarbe Toma verwenden Ich werde das sagen. Ich habe diese Datei eingestellt, so sieht sie aus. Es nimmt also die volle Breite und Höhe ein und es befindet sich oben auf diesem Knopf. Deshalb ist es die Höhe unseres Textes. Um das Problem zu lösen, verwende ich Z-Index-Eigenschaft, Z-Index, und ich verwende minus eins. Dadurch wird das Problem behoben, aber unser Text ist noch nicht sichtbar, weil unsere Text- und Hintergrundfarbe zueinander passen Innerhalb der ausgewählten Schaltfläche, wenn ich die Farbe ändere, Farbe Und wenn ich es weiß mache und dann diese Datei einstelle, sieht es so aus. Sie können sehen, dass der Text jetzt angezeigt wird. Aber vorerst mache ich wieder Tomate draus. Also werde ich diese Zeile auskommentieren und sie erneut speichern. Und um nun das gewünschte Ergebnis zu erzielen, verwende ich den Grenzradius in unserem Pseudo-Lemate-Typ Border Radius, Null, Null und 50% und 50% Von der oberen linken und rechten Ecke verwende ich den Wert Null und für die untere linke und untere rechte Ecke verwende ich hier den Grenzradius von 50% und 50% Wenn ich diese Datei nun einstelle, sieht sie so aus. Jetzt haben wir die Kurven in unserem Hintergrund, und jetzt müssen wir am Schwebeeffekt arbeiten Jetzt stellen wir die Höhe dieses roten Hintergrunds auf Null ein. dann mit der Maus über die Schaltfläche fahren, erhöhen wir die Höhe dieses roten Hintergrunds Es gibt dir die Füllungen und deckt den Button-Effekt Innerhalb dieses roten Hintergrunds stelle ich Höhe Höhe ein und mache den Wert auf Null. 0% statt 100%. Ich werde diese Datei einrichten. Nachdem ich diese Datei eingestellt habe, ist, wie Sie sehen können, der rote Hintergrund verschwunden. Es ist aufgrund seiner Höhe nicht sichtbar. Jetzt müssen wir diesem Before-Element einen HVAD-Effekt hinzufügen. Dafür gebe ich vorher Punkt BTN Colon Hal Colon und Hemot Dann definiere ich in der Autopresse die Höhe, Höhe, 100% Und ich werde diese Datei einrichten. Also, wann immer ich meine Autos auf diesen Knopf höre, wie Sie sehen können, vergrößert es die Höhe, aber es erhöht die Höhe sofort. Es gibt keinen Übergang zwischen ihnen. Dafür verwende ich Eigenschaft Transition in meinem Hard-Element, Transition in meinem Posto-Element Also bei der ersten Transition hier werde ich den Übergang in all diesem Element einstellen und ich werde die Zeit auf 0,5 Sekunden definieren und ich werde diese Datei einstellen Dieses Mal, nachdem ich diese Datei eingestellt habe, wenn ich mit der Maus über meine Farbe auf dieser Schaltfläche fahre, können Sie jetzt den Glättungseffekt sehen Sie können ihn erleben . Das Problem ist jedoch, dass es aufgrund des Grenzradius nicht die gesamte Schaltfläche abdeckt . Um das Problem zu lösen, müssen wir also die Höhe erhöhen. Wir müssen die Höhe um mehr als 100% erhöhen. Anstatt 100% zu verwenden, sollte ich hier 190% verwenden, und ich werde diese Datei einstellen Wenn ich nach dem Einstellen dieser Datei mit dem Cursor auf diese Schaltfläche fahre, können Sie sehen, dass das Problem dadurch behoben wird, aber es entsteht ein neues Problem Sie müssen also den Überlaufbereich vergrößern , dafür in meiner Schaltfläche in diesem Schaltflächenbereich Ich verwende die Eigenschaft Überlauf, Überlaufheizung . Ich werde diese Datei einstellen Wenn ich diese Datei setze und den Cursor auf dieses Element bewege, können Sie hier sehen, dass wir den gewünschten Effekt erzielen Es versteckt das Überlaufelement. Jetzt müssen wir auch ein anderes Problem lösen. Wir müssen die Farbe ändern, wenn ich mit der Maus über dieses Element fahre. Wir müssen die Textfarbe ändern, wenn ich mit der Maus auf diese Dafür werde ich hier einen weiteren Selektor BTN erstellen und hier einen Hover-Selektor davon erstellen Innerhalb der Farbe ss werde ich die Eigenschaft color verwenden Farbe weiß. Ich möchte diese Datei einrichten. Wenn ich nach dem Einstellen dieser Datei meine Karten auf diesem Element habe, Sie hier sehen können, erzielen wir das gewünschte Ergebnis. Ich hoffe, jetzt ist für Sie klar, wie wir diesen schönen Button-Effekt erzeugen können. Also danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf unser nächstes Projekt. 8. Drehen des Buttons 3 Ebenen: Hallo, alle zusammen. In dieser Lektion werden wir diesen wunderschönen Button-Hover-Effekt erzeugen diesen wunderschönen Button-Hover-Effekt Wie Sie sehen können, wenn sich I Hoberm-Karten auf dieser Schaltfläche befinden, können Sie hier einen Flipping-Effekt erleben Zuerst bedeckte ein grüner Hintergrund die Schaltfläche, dann verdeckte ein roter Hintergrund die Taste, und wenn ich die Maustaste loslasse, kehrt sie wieder an ihre ursprüngliche Position zurück Mal sehen, wie wir es erstellen können. Wie Sie nebeneinander sehen können, öffne ich meinen Visual Studio-Code-Editor und meinen Browser mit Lifesaver-Erweiterung und erstelle bereits ein SML-Dokument mit dem Namen Index Dot HTML Damit erstelle ich bereits die CSS-Datei Tile Dod und verknüpfe diese Tyled CSS-Datei mit diesem TML-Dokument Jetzt nehme ich in meinem Body-Tag zuerst ein Bauch-Tag, A. Hier sage ich einfach Button Und dann werde ich diese Datei einrichten. Stellen Sie diese Datei ein, wie Sie in meinem Browser sehen können Dies ist unser Anker-Tag. Jetzt müssen wir in diese Stil- oder CSS-Datei springen. Jetzt müssen wir zuerst das Body-Tag stylen. Hier werde ich anhand seines Tag-Namens auf den Körper zielen. Dann weise ich unserem Body-Tag einen Rand zu , der Null ist. Danach weise ich Display-Eigenschaft und Display zu , und hier verwende ich Slick Dann verwende ich „Elementeigenschaft ausrichten“, „Objekt mittig ausrichten“ und „ Inhalt auch mittig Dann weise ich unserer Seitenhöhe eine Höhe von 100 VH zu , Stimmenhöhe Danach werde ich hier eine Hintergrundfarbe zuweisen. Hintergrundfarbe, und ich werde ein Hexavalu 212121 verwenden. Es ist eine dunkelgraue Farbe. Wenn ich diese Datei einstelle, sieht sie so aus. Jetzt müssen wir den Schriftstil dieses Textes ändern. Dafür verwende ich Schriftfamilie, Schriftfamilie und ich verwende Sansai Sansai. Ich werde diese Datei einstellen Nachdem ich diese Datei eingerichtet hatte, sah sie so aus. Danach gestalte ich dieses Anker-Tag mit seinem Tag-Namen A. Dann weise ich im Closs dieser Schaltfläche zunächst eine Polsterung zu, also gebe Anker-Tag mit seinem Tag-Namen A. Dann weise ich im Closs ich Padding ein und von oben und unten verwende ich 20-Pixel-Paddy und von links und rechts verwende ich 20-Pixel-Paddy und von links und rechts 40-Pixel-Paddy. Danach verwende ich eine Eigenschaft namens Takes Decoration, Text Decoration, Takes Decoration Text He, ich werde keinen benutzen. Dann werde ich eine weitere Eigenschaft verwenden: Takes Transform, Text Transform , Takes Transform, Großbuchstaben Dann verwende ich die Farbeigenschaft dground. Hintergrundfarbe, und hier verwende ich die Hintergrundfarbe, das Hass-Tag, if one, C four, null F, diese gelbe Variantenfarbe, und ich werde diese Datei einstellen Nachdem ich diese Datei eingerichtet habe, sieht unsere Schaltfläche so aus. Als Nächstes möchte ich die Textfarbe dieser Schaltfläche ändern. Ich möchte es weiß machen, bald Text, Farbe und ich möchte seine Farbe weiß machen. Danach definiere ich die Schriftgröße und wende die Schriftgröße auf T-Pixel an. Dann werde ich diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, sieht sie so aus, aber ich möchte einen gewissen Buchstabenabstand zwischen diesen Zeichen. Also werde ich die Eigenschaft Call Spacing verwenden. Lass uns Abstand nehmen, ich möchte den Pixelabstand zwischen den Zeichen dieses Wortes haben, ja, das ist gut. Danach definiere ich die Position und deklariere sie als relativ. Ich werde diese Datei einrichten. Als Nächstes werde ich den grünen Hintergrund erstellen die Schaltfläche verdeckt. Dafür werde ich vor Posidoeleate verwenden. Hier werde ich vorher den Anker-Tag Colon binden. Dann werde ich zuerst in den Calivas , in diesem Before-Posido-Element, einen Inhalt, einen Inhalt erstellen und dann die Schaltfläche eingeben Danach, nachdem wir den Inhalt erstellt haben, müssen wir diesen Inhalt positionieren, irgendeinen Typ positionieren, Eigenschaft positionieren, absolut positionieren Als Nächstes werde ich diesen Inhalt an dieser Ecke platzieren. Dafür tippe ich von oben, ich weise Null zu und von P und von P weise ich wieder Null zu. Dann werde ich innerhalb der Höhe zuweisen. Ich weise der Breite 100% zu und dann gebe ich Höhe 100% zu. Danach werde ich die Hintergrundfarbe definieren. Hintergrundfarbe, ich werde dieselbe Hintergrundfarbe zuweisen , also werde ich kopieren und gesäumt eine grüne Hintergrundfarbe zuweisen Ich werde ein Hexa verwenden. Valu hat das Etikett zwei CE, sieben, eins. Diese grüne Hintergrundfarbe, und ich werde diese Datei einstellen Nachdem ich diese Datei eingerichtet hatte, sah sie so aus. Jetzt befindet sich der grüne Hintergrund direkt über dem gelben Hintergrund. Jetzt müssen wir diese Aufnahmen horizontal und vertikal zentrieren. Dafür verwende ich Display Flex Propriety, Display und ich verwende Flex und Align, Alignment Items Center, Justify Content Ebenfalls mittig, auch mittig. Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet hatte, sah sie so aus. Um den Effekt zu erzeugen, müssen wir nun die Drehfunktion verwenden. Wir werden dieses grüne Element entlang der Xx-Linie drehen , also verwende ich hier die Eigenschaft Transform und wende hier Rotate X an, ich übergebe den Wert 60 Grad DEG Wenn ich nun diese Datei einstelle, können Sie feststellen, dass sie dieses grüne Element um die horizontale Achse dreht dieses grüne Element um die horizontale Nachdem Sie diese Datei eingestellt haben, können Sie das Ergebnis sehen und sie wurde um bis zu 60 Grad gedreht. Wie Sie wissen, wird das Element standardmäßig von der Mittellinie aus gedreht. Aber ich möchte die Position dieses Drehpunkts ändern. Ich möchte dieses Element von oben drehen. Dafür müssen wir eine Eigenschaft namens transform als transform Aisin Animal Pass Top verwenden als transform Aisin Animal Pass Top Und wie Sie sehen, haben Sie diese Datei Jetzt dreht sie das Element von der obersten Position aus Jetzt möchte ich dieses Element um bis zu 270 Grad drehen. Anstatt 60 Grad zu verwenden, werde ich 270 Grad DEG verwenden und ich werde diese Datei so einrichten wie Sie sehen können, und diese Datei verändern, wie Sie sehen können, es ist das Element Jetzt ist es nicht mehr sichtbar. Da ich das Element rotiere, geht es hinter den Button. Wenn ich jetzt mit der Maus über diesen Link fahre, möchte ich ihn zurücksetzen. Ich möchte es wieder auf Null setzen. Ich werde einen Hover-Selektor mit dem Anchor-Tag a hover before elem erstellen a hover In der Caria steht dann, wie man eine Eigenschaft namens Transform, Transform, Rotation X benutzt , und ich werde DEG über Null gehen Ich werde diese Datei einrichten. Immer wenn ich Hoberm-Kurven auf diesem Element , dreht diese Schaltfläche, wie Sie sehen können , dieses grüne Pseudoelement um . Sie können die Drehung nicht erleben , weil Sie dafür keinen Übergang verwenden Ich gebe Transition Property Transition ein. Außerdem werde ich die Dauer dieses Übergangs auf fünf Sekunden auf Null setzen . Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe und meinen Karza darauf bewege, können Sie diesen Übergang jetzt erleben Hier kannst du diesen Schlafeffekt erleben. Nachdem ich jetzt den grünen erstellt habe, möchte ich den roten erstellen. Dafür kopiere ich diesen Abschnitt, vorherige Pseudoelement hier werde ich ihn erneut einfügen Und anstatt das Before-Posto-Element zu verwenden, werde ich dieses Mal das After Posito-Element verwenden, und diesmal werde ich rote Farbe anstelle von grünem ED verwenden rote Farbe anstelle von Ich werde diese Datei einrichten. A Ich möchte es nach dem grünen drehen. Dafür müssen wir eine gewisse Übergangsverzögerung nutzen. Versuchen Sie es mit der Übergangsverzögerung, und ich möchte sie um bis zu 0,25 Sekunden verzögern Das ist gut. Ich werde diese Datei einrichten. Und genauso müssen wir auf diesem Knopf wieder auf Null Grad Wi drücken. Dafür werde ich hier nach Elemid eine weitere Her erstellen, die ich ausgewählt A, Doppelpunkt schwebte, Doppelpunkt und Hentyp danach. Dann werde ich innerhalb der Cali-Aussparung denselben Wert anwenden und diese Datei unterschreiben Nachdem Sie diese Datei eingestellt haben, klicken Sie mit dem Mauszeiger auf diese Schaltfläche Hier können Sie diesen wunderschönen Effekt mit dem Umklappen der Tasten erleben wunderschönen Effekt mit dem Umklappen , auch wenn Sie ein anderes Ergebnis erzielen möchten, Ja, auch wenn Sie ein anderes Ergebnis erzielen möchten, können Sie die Ausgangsposition der Transformation ändern Anstatt T zu verwenden, wenden Sie Bottom Wenn Sie Butto Bottom und dann diese Datei anwenden, können Sie jetzt einen anderen Flipping-Effekt Immer wenn ich meine Farbe darauf öffne, kreuze ich auf diese Weise den Knopf Im Moment werde ich Top verwenden. Ich entscheide mich gerne für Top One, wenn es um Value geht. So animiert man diese Schaltfläche. Ich hoffe, jetzt ist es für dich klar. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Projekt. 9. 3 Kreise zum Hintergrund-Button-Effekt Teil 1: Hallo, alle zusammen. Willkommen zum neuen Projekt. In dieser Lektion werden wir diesen schönen, netten kleinen Button-Ha-Effekt erzeugen . Wie Sie sehen können, wenn ich mit der Maus über diesen Link fahre, kommen drei Kreise und decken sich ab, dann ein wunderschöner gelber Hintergrund erscheint ein wunderschöner gelber Hintergrund und die Schriftfarbe ändert sich Das werden wir in diesem Projekt erstellen. Mal sehen, wie wir diesen schönen Effekt erzielen können. Wie Sie also nebeneinander sehen können, öffne ich meinen Visual Studio-Code-Editor und meinen Browser mit der Light-Server-Erweiterung und erstelle bereits ein HTML-Dokument mit Indexpunkt HTML. Damit erstelle ich bereits eine Styler-CSS-Datei und verknüpfe diese Datei mithilfe eines Ink-Tags mit diesem Dokument Dann nehme ich im Body-Tag zuerst ein Anker-Tag Ich nehme das Anker-Tag mit A und dann nehme ich ein Span-Tag, ein leeres Span-Tag innerhalb des Anchor-Tag-Bereichs, und innerhalb dieses Ancha-Tags kippe ich über mich Wir werden später sehen, warum wir dieses Span-Tag benötigen. Lassen Sie uns nun in die Style-CSS-Datei springen. Zuerst werde ich den Körpertyp stylen , also Typ, Körper. Dann sage ich in der Cariss zuerst Margin, ich sage Margin, Null aus allen Richtungen Dann müssen wir diese Katze in der Mitte dieser Seite ausrichten. Ich nehme diese Eigenschaft, zeige Flex an, rechtfertige Inhalt, rechtfertige Content Center. Außerdem müssen wir Align Iams Center übergeben. Danach müssen wir die Höhe dieser Seite definieren, Höhe und ich werde die Höhe hundert V g definieren , Höhe abstimmen Dann definiere ich den Bereich für die Schriftfamilie. Danach werde ich eine Hintergrundfarbe definieren. Ich werde einen dunklen Hintergrundfarbtyp, eine Hintergrundfarbe, einen Hashtag verwenden , ich werde einen HixAvu 272727 verwenden Es wird eine dunkelgraue Farbe behalten. Nachdem ich diese Datei eingerichtet habe, sieht unsere Seite so aus. Außerdem wurde der Text in der Mitte dieser Seite ausgerichtet. Jetzt müssen wir dieses Anca-Tag stylen. Ich werde das Ancha-Tag mit seinem Tag-Namen A als Ziel verwenden, dann innerhalb der ersten Eigenschaft color sus werde ich Weed verwenden, und hier werde ich 220 Pixel zur Seite legen Dann weise ich Höhe, Höhe, 80 Pixel zu. Dann werde ich Farbe zuweisen. Ich werde Schriftfarbe, Farbe, ihr eine Farbe zuweisen, ihr eine Farbe zuweisen, eine Art gelber Farbton hat ein Tag, F ist Null. Es wird wieder gelb werden, so ähnlich. Dann werde ich die Hintergrundfarbe definieren. Bagund-Farbe, ich werde sie transparent machen. Dieser. Als Nächstes definiere ich die Schriftgröße. Schriftgröße. Hier werde ich die Schriftgröße 26 Pixel verwenden. werde auch diese Unterstreichung entfernen, also werde ich Textdekoration, Textdekoration eingeben Ich werde keinen daraus machen. Es wird die Unterstreichung entfernen. Als Nächstes werde ich diesen Text in Großbuchstaben umwandeln, also werde ich Text, Transformation, Großbuchstaben eingeben Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet hatte, sah sie so aus. Und jetzt müssen wir diesen Text horizontal und vertikal syntaktieren diesen Text horizontal und vertikal Dafür verwende ich eine Eigenschaft namens Text ausrichten, Ausrichten, Text zentriert ausrichten Darüber hinaus werde ich auch eine Zeilenhöhe ( Zeilenhöhe) definieren , 80, Zeilenhöhe, 80 Pixel. Also heißt es den Text in der Mitte dieses Containers ausrichten. Hier definieren wir Breite 220 Pixel und Höhe 80 Pixel. Schließlich werde ich einen Übergang hinzufügen. Übergang, ich werde den Übergang für das gesamte Element anwenden und die Dauer auf 0,5 Sekunden einstellen. Danach müssen wir die Position definieren. Position, danach müssen wir die Position definieren, die relative Position. Und ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe. Lassen Sie uns nun diese Kreise erstellen, die von der linken und der rechten Seite kommen. Wer bin ich über diesen Link? Wer wird das Vorher-Nachher-Pseudoelement verwenden , um es zu erstellen Ich möchte das erste Kreiselement an dieser Stelle erstellen und ich möchte das zweite Kreiselement an dieser Stelle Ich werde das Vorher-Nachher-Possudo-Element zusammen verwenden Vorher-Nachher-Possudo-Element Geben Sie also vorher A, Doppelpunkt, ein. A, Doppelpunkt danach. Dann im Carrass, dem ersten Grundstück, werde ich den Inhalt erstellen Ich werde den D-Inhalt erstellen. Inhalt ist ein leerer Inhalt. Ich werde die Double-Code-Zelle verwenden. Dann müssen wir die Position dieses Inhalts definieren. Nehmen Sie also Stellung, ich werde absolute Angaben machen. Als Nächstes müssen wir diese Inhalte platzieren. Von oben werde ich ihn zu 50% von oben platzieren, ich werde ihn zu 50% platzieren und dann definiere ich wir, und ich definiere mit 20 Pixeln. Außerdem werde ich Höhe, Höhe und ebenfalls 20 Pixel definieren . Danach werde ich die Hintergrundfarbe definieren. Aber bevor ich die Hintergrundfarbe definiere, definieren wir den Randradius weil wir ihn kreisförmig machen müssen. Grenzradius 50%. Dann definiere ich die Hintergrundfarbe. Hintergrundfarbe, ich definiere gelbe Farbe, dieselbe Farbe, Hass-Tag, Do Leaf, Null, und ich werde diese Datei einstellen Nun, um diese Datei einzustellen, können Sie die beiden Kreise sehen. Eine ist die linke Seite und eine andere ist die rechte Seite. Es wird von Before Positoselector und es wird von Ter Positoselector hergestellt Sie können jedoch feststellen, dass unsere Punkte nicht mit dem Text übereinstimmen Hier positionieren wir es unter den oberen 50%. Ich meine, 50% der Höhe des Ca-Tags, was 40 Pixeln entspricht. Aber um es richtig zu machen, müssen wir die Transform-Eigenschaft verwenden. Transform, und hier verwende ich translate Y with, translate translate Y, und hier verwende ich -50% Wie Sie sehen können, hat diese Datei die Punkte am Text ausgerichtet, und als Nächstes werde ich die Übergangseigenschaft anwenden Übergang, Übergang, ich werde den Übergang auf all diese Eigenschaften anwenden. Als Nächstes definiere ich die Übergangsdauer, die 0,3 Sekunden beträgt. Also vor einem oberen Kreis perfekt zu diesem Text zentriert ist. Jetzt können Sie feststellen, dass das vorherige Pseudoelement den Buchstaben H bedeckt und das Pseudoelement pro Pseudoelement fast den Buchstaben E berührt weil wir keine horizontale Position angegeben Um das Problem zu lösen, nehme ich das Pseudoelement vor, Pudo-Typ A, Doppelpunkt Dann gebe ich in der Gesprächspause den Eigenschaftsnamen late left, zero ein und setze diese Datei Nachdem Sie diese Datei eingerichtet haben, ist das Problem damit behoben, wie Sie sehen können . Dann werde ich das obere Ara-Element A als Ziel anvisieren. Dann werde ich es in der Cali-Nische auf der rechten Seite platzieren, um es nach rechts zu entfernen, Null Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet hatte, sah sie so aus. Als Nächstes werden wir mithilfe der Eigenschaft Box Shadow einen Schatten dieser Kreise erzeugen, und wir werden zwei Schatten dieser beiden Kreise erzeugen Also werde ich einen Boxschatten für Before-Elemente erstellen, also gebe ich Box Shadow ein, und zwar bis auf vier Werte Der erste Wert steht für den horizontalen Abstand zwischen dem Schatten und dem Element. Von der rechten Seite aus verschiebe ich den Schatten von den zehn Pixeln weg. Ich möchte diesen Schatten von der linken Seite aus verschieben, also verwende ich -100 Pixel Als Nächstes müssen wir den vertikalen Abstand zum Element angeben Abstand zum Element Für das Element möchte ich einen vertikalen Abstand von Null angeben und der dritte Wert steht für die Unschärfe dieses Schattens Aber ich möchte keinen unscharfen Wert, ich möchte einen kurzen Schatten, und für den großen Wert müssen wir die Schattenfarbe übergeben und vorerst werde ich Rot verwenden, ansonsten Grün Nachdem Sie diese Datei eingestellt haben, können Sie, wie Sie sehen können, hier einen neuen Kreis sehen Es ist ein Schatten dieses früheren Pseudoelements. Ich werde dasselbe für das Pseudoelement danach tun Ich werde denselben Schatten erstellen, nur um ihn rechts neben diesem Element zu platzieren Also werde ich diesen Link kopieren und ihn hier einfügen. Ich werde den Wert der horizontalen Richtung ändern . Nachdem Sie diese Datei eingerichtet haben, können Sie das Ergebnis sehen. Jetzt haben wir alle vier Kreise. Dies ist der erste Teil dieses Tutorials. Im nächsten Teil dieses Tutorials werden wir an Haarefect arbeiten Danke, dass du dir dieses Video angesehen hast, Syuned. 10. 3 Kreise zum Hintergrund-Button-Effekt Teil 2: Schön euch zu sehen, dies ist der zweite Teil dieses Tutorials, und in unserem vorherigen Teil haben wir bereits den Schatten dieses Vorher-Nachher-Posido-Elements erstellt Vorher-Nachher-Posido-Elements Lassen Sie uns nun am Ha-Effekt arbeiten. Zuerst erstelle ich Hor, ausgewählt für die Before-Elemente von ti anchor tag, Hover Colon, F. Dann rufe ich in der Caliss die Eigenschaft Left, left 50% auf Eigenschaft Left, left 50% Wenn ich also mit meinen Autos über dieses Element fahre, wird dieser Kreis, wie Sie sehen können , um 50% der Breite dieses Elements verschoben Es bewegt auch diesen Schatten mit, aber ich möchte den Schattenabstand nicht zu 100% beibehalten , wenn ich mit der Maus darauf fahre Anstatt -100 zu verwenden, möchte ich ihn etwas näher an das ursprüngliche Element heranrücken näher an das ursprüngliche Element heranrücken Hier gebe ich Box Shadow Box Shadow ein und definiere die Position des Schattens, die 30 Pixel beträgt , wenn ich mit der Maus darauf fahre 30 Pixel beträgt , wenn ich mit der Maus darauf Außerdem übergebe ich dieselben Werte und dieselbe Farbe, also kopiere ich es und platziere es hier. Ich werde das in Ordnung setzen. Wann immer ich mit dem Cursor darauf fahre, wie Sie jetzt sehen können , kam der Schatten diesem ursprünglichen Element näher . Nicht nur in der Nähe, er hat das Element überquert und befindet sich auf der rechten Seite dieses ursprünglichen Elements. Und dasselbe werde ich auch für das After Pudo-Element tun Also dupliziere ich diesen Abschnitt und werde vorher durch After ersetzen Als Nächstes werde ich diese Seite ändern. Ich werde Labor zwei machen, richtig. Außerdem müssen wir hier den negativen Wert übergeben , weil wir den Schatten auf die linke Seite dieses Kreises verschieben werden. Ich werde diese Datei einrichten. Wenn ich nach dem Einstellen dieser Datei darauf herumlaufe, kannst du das Ergebnis sehen Jetzt müssen wir eine Sache tun. Wir müssen das vorherige und das obere Pseudoelement an dieselbe Position verschieben obere Pseudoelement an dieselbe Position Der Benutzer kann nur drei Punkte oben darauf sehen. Wir müssen sowohl den Kreismittelpunkt dieses Elements als auch das Categ-Element ausrichten dieses Elements als auch das Categ-Element Dafür müssen wir hier die Eigenschaft transform, transform, verwenden , und dieses Mal verwende ich Translate X Value, Translate X, Translate X, Translate X, und hier werde ich -50% -Wert verwenden Ich werde diese Datei einrichten. Und weil wir hier oben „Y übersetzen“ sagen, müssen wir den gleichen Wert in unserem Element in unserem V für Psudoelement setzen in unserem Element in unserem V für Psudoelement Hier müssen wir erwähnen, dass wir in YX-Richtung bei -50% bleiben müssen , also möchte ich Übersetze Y -50%, und dann müssen wir dasselbe für das obere Pseudoelement tun für das obere Ich kopiere diese Zeile und füge sie hier ein. Und ich werde die Werte ändern. Ich werde es positiv machen, nicht negativ. Ich werde diese Datei einrichten. Wenn ich nach dem Einstellen dieser Datei hoffe, dass meine Autos drauf sind , funktioniert es, aber wir müssen immer noch den Minuswert verwenden, weil wir müssen immer noch den Minuswert verwenden ihn mittig ausrichten müssen Nachdem ich diese Datei eingestellt habe, sind meine Autos wieder drauf Jetzt kannst du dir Jetzt können Sie nur noch drei Stromkreise sehen. Vorher und oberes positives Element überlappen sich. Deshalb kannst du hier nur einen Kreis sehen. Jetzt werde ich die Farbe dieses Sado-Kreises ändern. Ich werde dieselbe Farbe verwenden, dieselbe gelbe Farbe dafür Anstatt Grün zu verwenden, werde ich diese gelbe Farbe verwenden. Also ersetze ich jedes Mal Grün durch diese Farbe und speichere sie erneut. Nachdem ich diese Datei gesagt habe, sieht sie so aus. Und jetzt werden wir mit diesem Span-Tag auf dem gelben Hintergrund arbeiten . Wie Sie wissen, erstellen wir bei der Erstellung unseres Ancha-Tags hier ein Span-Tag darin, und jetzt werden wir dieses Span-Tag verwenden Kehren wir zur CSS-Datei im Stil zurück. Ich werde dieses verbrauchte Tag für den Hintergrund verwenden . Um den Hintergrund zu erstellen, werde ich dieses Span-Tag mit seinem Namen als Ziel verwenden. Span innerhalb des Clivusus. Zuerst definiere ich die Position seines Span-Tags, die Dann definiere ich den Ort von oben und setze den Startwert Null Und von links werde ich wieder den Nullsatz platzieren. Dann sage ich innerhalb der Höhe, mit 100%. Und dann definiere ich Höhe, Höhe ebenfalls 100%. Dann definiere ich die Hintergrundfarbe, die Hintergrundfarbe, und ich werde dieselbe Hintergrundfarbe verwenden, nämlich hatAGFF Null, diese gelbe Als Nächstes definiere ich den Grenzradius. Grenzradius, Grenzradius, ich werde acht Pixel verwenden. Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, sieht unser Button so aus. Jetzt können Sie sehen, dass der gelbe Hintergrund oben auf dem Text steht, und dann verwende ich Transformationseigenschaft, Transformieren, und ich verwende Skalenwertskala, und ich werde Skala Null sagen. Außerdem verwende ich den Übergangsübergang und ich sage Übergang zu allen Eigenschaften und ich gebe auch die Dauer des Übergangs an , die 0,3 Sekunden beträgt. Danach erstelle ich den Hoberselector für das span-Tag und unser span-Tag befindet sich innerhalb des nctags. Ich gebe zuerst NCTeghver ein, dann wähle ich das Span-Tag span nctags. Ich gebe zuerst NCTeghver ein, dann wähle ich das Span-Tag NCTeghver ein, dann wähle ich den Hoberselector für das span-Tag und unser span-Tag befindet sich innerhalb des nctags. Ich gebe zuerst NCTeghver ein, dann wähle ich das Span-Tag span aus. Im Caliss sage ich Transform Scale Value Scale, und dieses Mal setze ich es auf eins und transformiere Delay, und dann verwende ich Transition Delay Little Transition Delay Value. Übergangsverzögerung, und ich werde sie auf 0,4 Sekunden einstellen . Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, wird, wie Sie sehen können, standardmäßig der gelbe Hintergrund ausgeblendet. Aber wann immer ich versuche, mein Auto darauf zu bewegen, können Sie jetzt nach 0,4 Sekunden Verzögerung sehen , dass es im Hintergrund erscheint. Wie Sie sehen können, erscheint nach dem Beenden der Bewegung dieses Kreises der Hintergrund. Als Nächstes ändere ich die Farbe des Links, wenn ich mit dem Mauszeiger drüber fahre Farbe des Links, wenn ich mit dem Mauszeiger drüber Dafür gebe ich Anchor Hover ein und innerhalb der Farbfelder verwende ich Farbe fberty color, diesmal verwende ich dunkelgrau, also gebe ich hat das 262626 ein. Dann füge ich eine kleine Übergangsverzögerung hinzu und verwende den Wert für die Übertragungsverzögerung beim Senden. Ich werde diesen Wert kopieren und ihn Wenn ich also diese Datei einstelle und mit der Maus darauf fahre, können Sie sehen, dass nichts passiert Es sieht so aus, wie es ist , weil wir diesen Hintergrund hinter den Text verschieben müssen Dafür müssen wir den Z-Indexwert verwenden, um den Z-Index einzugeben , der minus eins ist, und ich werde diese Datei einrichten. Stellen Sie also diese Datei ein, wenn ich meine Karten öffne . Sie können das Ergebnis sehen. Jetzt steht der Text vor diesem Hintergrundelement. Aber das Problem ist, dass unsere drei Wurzeln auch vor dem Text stehen. Wir müssen den gleichen Zen-Indexwert zwei Stunden vor und nach dem Pseudo-Element-Selektor verwenden . Hier übergebe ich denselben Z-Indexwert und setze diese Datei. Wenn ich über dieses Element spreche, kann man dieses Mal das Harz sehen Jetzt stehen unser Hintergrund und Element mit den drei Punkten auch hinter dem Text Dann setze ich die Deckkraft beider Elemente auf Null. Lass mich dir die Opazität zeigen, ich werde sie auf Null setzen. Ich werde diese Datei einrichten Stellen Sie diese Datei ein, wie Sie sehen können, sie versteckt alle Pseudoelemente, aber ich möchte sie wieder anzeigen lassen, wenn ich mit der Maus darauf Dafür müssen wir in unserer Hero-Auswahl die Opazität einstellen. Kopiere den Wert Opacity und in unserem PosidOherSelector vor dem oberen Teil ich Ich werde es schaffen. Dieses Mal werde ich einen Opacity-Modus daraus machen Ich werde diese Datei einrichten. Diesmal habe ich es völlig undurchsichtig gemacht. Nachdem ich diese Folie eingestellt habe, wenn ich meine Karza über diesen Link bewege, kannst du diesen wunderschönen Her-Effekt sehen Auf diese Weise können wir diesen schönen Her-Effekt erzielen. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Projekt. 11. Neuer Button-Hover-Effekt: Hallo, alle zusammen. Willkommen zur neuen Lektion für diesen Animationskurs. In diesem Tutorial werden wir diesen schönen, gut aussehenden Button Haifat erstellen schönen, gut aussehenden Button Haifat Wenn Sie sich diese Schaltfläche ansehen, können Sie feststellen, dass wir hier insgesamt zwei Hintergründe haben Niedriger farbiger Hintergrund und violetter Hintergrund. Unser Eula-Hintergrund wird in die obere hintere Ecke und unser violetter Hintergrund die untere rechte Ecke geliefert Und wenn ich mit der Maus drüber fahre, seht ihr sowohl den Hintergrund A als auch die Rotation in drei D-Perspektiven in Xxs-Diktion Schauen wir uns also an, wie wir diesen wunderschönen Hoaiff kreieren können. Wie Sie also nebeneinander sehen können, öffne ich meinen Wiser Studio-Code-Editor und meinen Browser mit der Live-Servererweiterung und erstelle bereits ein SML-Dokument dem Namen Damit erstelle ich diesen Kachelpunkt Css Five. Jetzt erstelle ich zuerst innerhalb des Body-Tags die Anker-Krawatte mit A dann binde ich Buttonhver Button Hover-Effekt. Ich werde diese Datei einrichten. Danach müssen wir in die Stylar-CSS-Datei springen. Zuerst wähle ich den Body-Tag-Body aus. Dann verwende ich in der ersten Eigenschaft der Kalibrierung Rand, Rand Null aus allen Richtungen Dann werde ich Display verwenden. Display und ich verwende Display Flex und Align Item, Alignment IMs Center. Außerdem gebe ich justify content, also center ein. Dann weise ich dieser Seite Höhe zu, Höhe, und ich weise Höhe 100 V H, Höhe des Ansichtsfensters zu Dann weise ich Schriftfamilie, Schriftart und Familie zu und weise Al zu Das ist gut. Ich werde diese Datei einrichten. Nachdem Sie diese Datei eingerichtet haben, können Sie hier sehen, wie sie die Schaltfläche in der Mitte dieser Seite horizontal und vertikal ausrichtet. Jetzt werde ich diesen Link stylen. Dafür müssen wir ihn mit dem Anker-Tag A auswählen und innerhalb der Leber befindet sich die erste Eigenschaft, die ich verwenden werde, breit Und die erste Eigenschaft, die ich mit verwenden werde, und ich werde ihnen eine Breite von 300 Pixeln zuweisen Dann weise ich Höhe und Höhe zu und weise eine Höhe von 60 Pixeln zu. Danach weise ich Textdekoration und Textdekoration zu und möchte die Unterstreichung entfernen, also verwende ich hier keine Dann werde ich diesen Text in Großbuchstaben umwandeln, Text transformieren, ich werde die Texttransformationseigenschaft verwenden und ich werde Großbuchstaben verwenden Danach werde ich auch den Hintergrund entfernen. Ich werde es transparent machen. Hintergrundfarbe transparent. Dann weise ich den Text „Text ausrichten“ zu, „Text zentrieren“. Dann weise ich Zeilenhöhe, Zeilenhöhe zu. Hier werde ich eine Zeilenhöhe von fast 60 Pixeln zuweisen. Ich denke, 60 Pixel sind für jeden gut. Als Nächstes werde ich die Schriftstärke zuweisen. Ich brauche eine etwas fettere Schrift Schriftstärke, und ich werde fett gedruckt bestehen. Danach füge ich den Buchstabenabstand hinzu, Buchstabenabstand und sie, um den Buchstabenabstand zum Pixel hinzuzufügen. Dann füge ich Position, Position relativ und die Eigenschaft Weniger hinzu verwende Transition. Transition und sie um dieser ganzen Eigenschaft den Übergang zuzuweisen, außerdem werde ich die Dauer festlegen, die 0,2 Sekunden beträgt. Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, sieht unser Button so aus. Lassen Sie uns nun die beiden Hintergründe dieser Schaltfläche erstellen. Dafür werde ich das Posito-Element vor und nach dem Posito verwenden Posito-Element vor und nach dem Posito Zuerst erstelle ich das Vorher-Posito-Element, davor den Cctag-Dolon Dann stellst du die Autofresser ein. Zuerst werde ich einen leeren Inhalt erstellen. Hier gebe ich Inhalt und Inhalt und erstelle einen leeren Inhalt, also gebe ich doppelte Kerne weiter. Danach positioniere ich den Inhalt und mache ihn zu einer absoluten Position. Dann werde ich diesen Inhalt an der Ecke an dieser Stelle platzieren. Von oben übergebe ich den Nullwert und ab Ende übergebe ich auch die Position Null, Null. Danach weise ich die Werte mit und Höhe zu. Wir, ich werde 100% zuweisen, und dann werde ich Höhe und Höhe ebenfalls 100% zuweisen. Dann weise ich die Hintergrundfarbe und die Hintergrundfarbe zu Hintergrundfarbe und ich würde gerne die gelbe Farbe Gelb verwenden. Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, sieht sie so aus. Jetzt können Sie sehen, wie unser gelber Hintergrund die gesamte Höhe dieses Elements, des Catag-Elements, einnimmt dieses Elements, des Catag-Elements, Jetzt müssen wir diesen Text anzeigen. Dafür werden wir den Z-Index verwenden. Um also einen Z-Index einzugeben, werde ich minus eins daraus machen. Ich möchte diese gelbe Hintergrundfarbe hinter den Text verschieben . Also diese Datei, so sah sie aus. Und jetzt verschiebe ich den gelben Hintergrund, etwas nach rechts und oben. Dafür verwende ich den Wert minus drei Pixel, also den linken Wert minus drei Pixel. Ich werde diese Datei nach der anderen einstellen, wie Sie sehen können, bewegt sie sich ein wenig. Lassen Sie uns nun einen anderen Hintergrund erstellen. Ich werde diesen Abschnitt duplizieren und hier werde ich danach bestehen. Anstatt vorher zu verwenden, werde ich einen TR bestehen. Diesmal möchte ich es auf die rechte Seite verschieben. Anstatt minus drei Pixel zu verwenden, werde ich drei Pixel verwenden. Außerdem werde ich die Farbe ändern, die Hintergrundfarbe, und ich werde sie blau machen. Ich werde dieses verwenden, Blauviolett. Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, sieht sie so aus. Jetzt können Sie den blauvioletten Hintergrund auf dem gelben Hintergrund sehen. Aber ich möchte den Hintergrund miteinander verbinden. Dafür können wir es ganz einfach machen. Wir müssen eine Eigenschaft namens Mix Brain Mode verwenden. Hier sind der Typ-Mix-Blain-Modus, und ich werde Multiplizieren anwenden, und ich werde diese Datei einrichten Wir müssen den gleichen gemischten Mischmodus anwenden nach dem Unterelement multiplizieren Und ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet hatte, sah sie so aus. Jetzt möchte ich statt der hässlichen blauen Farbe die Schriftfarbe ändern. Ich werde es weiß machen. Also werde ich in unserem Anker-Tag die Farbeigenschaft Farbe verwenden und sie weiß machen. Und ich werde diese Datei einrichten. Dann können Sie zwei Hintergründe sehen die miteinander verschmolzen sind, und es entsteht ein schöner Effekt Als Nächstes werden wir am Schwebeeffekt arbeiten. Im Schwebeeffekt möchte ich das Element in einer Drei-D-Umgebung in Xxs-Richtung drehen Drei-D-Umgebung in Xxs-Richtung Dazu wähle ich zuerst die Option Hover Select, Anchor Hover und dann vor dem Psudo-Element Dann verschiebe ich innerhalb der Runden, innerhalb der Kalibrationen, zunächst den gelben Hintergrund auf die obersten sechs Pixel . Ich verwende den ersten Wert oben und mache ihn minus sechs Pixel Dann werde ich vom Labor aus den Wert Null machen. Und dann verwende ich Transform Property, Transform, und wir werden drei D-Werte verwenden. Und wie Sie wissen, werden wir eine Drei-D-Umgebung verwenden, also müssen wir die Perspektive darauf anwenden. Perspektive. Hier definiere ich die Perspektive mit 1.000 Pixeln, nicht mit 100, sondern mit 1.000 Pixeln. Und dann wende ich Rotate X, Rotate X an und hier definiere ich, aber vorher aktiviere ich den Turm AF, Wrap und Hem, um den Winkel zu definieren , der 75 Grad beträgt. Ich werde das auf fünf einstellen. Und für einen reibungslosen Übergang werde ich die Übergangseigenschaft auf das Before-Element anwenden. Geben Sie also Transition ein und ich definiere die Zeit für den Übergang , die 0,2 Sekunden beträgt. Ich werde diese Datei als zufrieden stellen. Wenn ich den Cursor darauf öffne, können Sie den Übergang bemerken. Sie können feststellen, dass sich unser gelber Hintergrund in der CD-Umgebung in Richtung XXs dreht der CD-Umgebung in Richtung XXs Wir müssen dasselbe für das obere Pseudoelement tun, aber in entgegengesetzter Richtung Aber Sie können feststellen, dass dies nicht das Ergebnis ist, das wir wollen. Ich möchte dieses Element von der oberen Position aus drehen, nicht von der Mittelposition aus. Also müssen wir den Ursprung ändern. Verwandle den Ursprung , lass es mich dir zeigen. In unserem positiven Biber-Element Imotype transformieren wir also den Ursprung, und ich möchte das Element von der obersten Position nach oben drehen Ich werde diese Datei einrichten. Wenn meine Autos auf diesem Element sind, können Sie es jetzt sehen, jetzt können Sie feststellen, dass es dieses Mal das gelbe Element von der obersten Position in einer Drei-D-Umgebung dreht das gelbe Element von . Jetzt muss ich dasselbe für den violetten Hintergrund tun , aber vorher schneide ich diesen Abschnitt und füge ihn vor der Verfahrensauswahl Ich werde diesen Abschnitt duplizieren und ihn nach dem Element nach der Prozedur einfügen Ich werde nur vorher nach nachher wechseln. Auch um die Position zu kaufen. Anstatt sechs Pixel Heromon zu verwenden, um minus sechs Pixel zu verwenden , und statt Rotate 75 Grad Heim zu verwenden, um -75 Grad zu verwenden und auch dieselben Eigenschaften wie Übergang und Transformationsursprung in unseren oberen Pseudoelementen zu verwenden dieselben Eigenschaften wie Übergang und Transformationsursprung in unseren oberen Pseudoelementen Ich kopiere das in Property and Value und HerramOptic. Und ich werde die Position des Übertragungsursprungs ändern. Anstatt Top zu verwenden, verwende ich Bottom do Bottom und ich werde diese Datei einstellen. Wenn ich nach dem Einstellen dieser Datei Curs auf diese Schaltfläche drücke, können Sie das Ergebnis sehen Hier sieht man den schönen Effekt, aber das Problem ist nach Hober drauf, wie man sieht, unsere Schriftfarbe weiß stimmt mit der Hintergrundfarbe überein Wir müssen das Problem lösen, wenn ich mit der Maus darüber fahre, wir müssen die Textfarbe dieses Anker-Tags hier ändern . Ich werde einen Hbaselector von Anchor a Her erstellen von Anchor a dann in den Spalten werde ich die Farbeigenschaft verwenden, , dann in den Spalten werde ich die Farbeigenschaft verwenden, und ich werde den Hass-Tag 272727 anwenden. Ich werde diese Datei einrichten. Wenn ich nach dem Einstellen dieser Datei den Mauszeiger darauf bewege, können Sie diesen wunderschönen Her-Effekt genießen Ich hoffe, jetzt ist Ihnen klar , wie wir diesen schönen Button-Hover-Effekt erzeugen können diesen schönen Button-Hover-Effekt erzeugen Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf unser nächstes Projekt. 12. Split Button Effekt: Hallo Leute. Schön dich wieder zu sehen. Ich bin wieder mit einem neuen, projektbezogenen Button-Hova-Effekt zurück. Heute werden wir diesen wunderschönen Button Haefet kreieren diesen wunderschönen Button Haefet Wie ihr sehen könnt, wenn ich mit der Maus darüber fahre, befinden sich auf diesem Element vier kleine Elemente COD-Knopf von vier verschiedenen Seiten, von der linken Seite von oben, von unten und von der rechten Das werden wir heute in diesem Projekt bauen. Lassen Sie uns mit der Praxis beginnen und sehen, wie wir es bauen können. Wie Sie also nebeneinander sehen können, öffne ich meinen Visual Studio-Code-Iter und meinen Browser mit der Live-Servererweiterung und erstelle bereits ein HTML-Dokument mit Indexpunkt in HTML Außerdem erstelle ich eine Style-Dot-CSS-Datei und verknüpfe diese Datei mit diesem Dokument Dann nehme ich in diesem Body-Tag zuerst das Anker-Tag. Innerhalb des Body-Tags gebe ich A als Anker-Tag ein, und innerhalb des Anker-Tags nehme ich ein Span-Tag, Span. Dann werde ich innerhalb des Span-Tags mich überschreiben. Hier haben wir dieses Pan-Tag hinzugefügt, weil wir vier Teile des Hintergrunds erstellen möchten. Das deckt die Schaltfläche ab, und dann werde ich diese Datei einrichten. Nachdem Sie diese Datei eingerichtet haben, können Sie die Schaltfläche in meinem Browser sehen. Jetzt werden wir die ersten beiden Elemente mit dem Vorher-Nachher-Psudo-Element erstellen Dann werden wir dieses Pan-Tag verwenden, um zwei weitere zu erstellen Lassen Sie uns in die Style-Dot-CSS-Datei springen. Zuerst werde ich das Body-Tag-Board stylen. Dann verwende ich im Cali, der ersten Eigenschaft , den Rand und setze den Rand Z. Danach müssen wir dieses Anker-Tag in der Mitte dieser Seite platzieren Ich werde Huber verwenden, ich werde die Eigenschaft verwenden, dieses Spiel, und ich werde es flexibel machen Danach verwende ich eine weitere Eigenschaft namens „Objekt ausrichten“, „Objekt zentrieren“, ausrichten“ und „Inhalt auch zentriert ausrichten“. Dann definiere ich Höhe und Höhe und verwende die Höhe des Viewports height 100 Danach werde ich die Schriftfamilie definieren. Schriftfamilie, und ich werde Luftschrift verwenden. Als Nächstes definiere ich eine Hintergrundfarbe. Ich werde eine dunkle Hintergrundfarbe verwenden, Art Hintergrundfarbe, Hashtag, 222 Es wird eine dunkelgraue Hintergrundfarbe zurückgeben. Und nach dieser Datei sieht es so aus. Als Nächstes verwende ich das Anker-Tag mit seinem Tag-Namen A. Dann verwende ich innerhalb der Eigenschaft „ Farbaussparung zuerst “ Textdekoration und Textdekoration. Ich möchte die Unterstreichung entfernen, also verwende ich die Eigenschaft Nun NunvLu. Danach mache ich es in Großbuchstaben Ich werde Texttransformation, Text, Transformation verknüpfen. Ich möchte es in Großbuchstaben umwandeln. Dann möchte ich die Schriftgröße und die Schriftgröße definieren und daraus 25 Pixel machen Danach werde ich eine Farbe definieren. Ich definiere die Farbe für diese Schrift, eine Schriftfarbe, und ich möchte diesen Farbcode verwenden, Hass-Tag, F six, B, 93b, diese gelbliche Farbe, und ich werde diese fünf festlegen Dann werde ich für einen Buchstabenabstand zwischen diesen Zeichen sorgen Buchstabenabstand zwischen Geben Sie also Buchstaben, Abstand und geben Sie drei Pixel Danach werde ich etwas Abstand definieren. Ich brauche etwas Polsterung. Aber bevor ich die Polsterung definiere, fügen wir den Rand hinzu Rand für Rand, ich möchte einen durchgehenden Rahmen mit drei Pixeln. Durchgehender Rahmen mit drei Pixeln, und unsere Rahmenfarbe entspricht der Schriftfarbe. Ich kopiere den Farbcode und füge ihn hier ein. Danach werde ich Polsterung hinzufügen. Polsterung von oben und unten, ich möchte 25 Pixel definieren und von links und rechts werde ich 50 Pixel definieren und ich werde diese Datei einstellen Nachdem wir diese Datei eingerichtet haben, sieht unsere Schaltfläche so aus. Als Nächstes füge ich einen Übergang hinzu, da wir einen Glättungseffekt benötigen Ich werde Transition eingeben. Ich möchte all diese Eigenschaften anwenden, dann stelle ich die Dauer auf 1,5 Sekunden ein. Danach definiere ich Position, Position, ich definiere Relativ und lege diese Datei fest. Ich setze diese Datei, ich werde diese Datei einstellen. Jetzt werden wir am vorderen Teil des gelben Hintergrunds arbeiten Teil des gelben Hintergrunds Wenn wir mit der Maus über diesen Link fahren, wird dieser Link verdeckt Wir werden das erste Hintergrundelement mithilfe des Anchor-Tags erstellen mithilfe des Anchor-Tags Wir werden dafür das Element Before und Actor verwenden. Jetzt werde ich sowohl das Vorher- als auch das Nachher-Pseudoelement zusammen erstellen Vorher- als auch das Nachher-Pseudoelement zusammen Also Ti, A, Doppelpunkt, B-Port. Dann oberes Komma, Hämatyp A, Doppelpunkt danach. Dann werde ich innerhalb der Kaliber die erste Eigenschaft, die ich verwenden werde, leeren Inhalt erstellen Inhalt, Doppelpunkt ist ein leerer Inhalt. Ist ein leerer Inhalt. Danach werde ich die Position definieren. Position, ich werde sie absolut machen. Dann werde ich definieren. Wir, ich werde 25% definieren. Als Nächstes definiere ich die Höhe. Höhe, ich werde Höhe zu 100% definieren. Danach werde ich die Hintergrundfarbe definieren. Hintergrundfarbe, ich werde dieselbe Hintergrundfarbe verwenden , die ich für die Textfarbe verwende. Als Nächstes definiere ich den Z-Index, um den Text sichtbar zu machen. Wir müssen beide Hintergründe hinter den Text verschieben. Also gebe ich Z-Index, Z-Index ein und verwende minus einen Wert. Dann verwende ich Transition Transition und definiere Transition für all dieses Element. Außerdem werde ich den Übergangszeitpunkt definieren , der 0,5 Sekunden beträgt. Um diese Datei einzustellen, sehen unsere Elemente so aus. Denken Sie daran, dass wir hier 25% der Breite verwenden und das Tag-Element ausschneiden , denn wenn wir vier Elemente zusammenfügen, wird das den gesamten Bereich abdecken. Deshalb verwende ich 25% für jedes Element. Jetzt müssen wir das vor das Posito-Element verschieben. Zuerst werde ich zuerst nur das Posido-Element vor mir ins Visier nehmen nur das Posido-Element Dann werde ich innerhalb der Kaliber die Top-Eigenschaft Tf verwenden Und hier definiere ich die Position von oben, ich werde den Wert Null zuweisen Dann definiere ich die linke Position P und hier werde ich -25% überschreiten . Und ich werde diese Datei unterschreiben Nachdem ich diese Datei eingerichtet hatte, sah sie jetzt so aus. Das ist also die Anfangsposition des Vorher-Elements für diese Kata. Und jetzt werde ich die Position dieses Pseudo-Elements nach dem Ende ändern die Position dieses Pseudo-Elements nach dem Ende Ich werde dieses Element an dieser Position platzieren. Dafür werde ich diesen Abschnitt duplizieren und statt vorher verwende ich nachher. A von oben, ich werde -100% bestehen Dann werde ich von links positive 20% verwenden. Wenn ich diese Datei einstelle, wollen wir dieses Element hier platzieren. Wenn ich also mit dem Mauszeiger auf diese Schaltfläche fahre, möchte ich das Vorher-Element auf die rechte Seite und das Nachher-Element auf die Unterseite verschieben Und es wird die Hälfte der Fläche vervollständigen. Gehen wir nun zum Hard-Effekt über. Ich werde zuerst einen Hoefect für das Before-Element vom Typ A, Doppelpunkt, erstellen einen Hoefect für Before-Element vom Typ A, Doppelpunkt, Doppelpunkt, ich werde den Elementnamen vorher eingeben. Dann verwende ich in der Clirass die erste Eigenschaft, top value, top, von oben, ich möchte es auf Null setzen, wenn ich Hvar Ich möchte die Position platzieren und ab Ende und aus dem Labor werde ich sie auf Null setzen Wenn ich nach dieser Datei meine Farbe draufmache, wird das Element in dieses Feld verschoben Von oben wird es Null ergeben und vom Labor aus wird es auch Null machen Deshalb platziert es es in diesem Element. Als Nächstes müssen wir am Hover-Effekt des oberen Elements arbeiten. Wir müssen das Element nach unten bewegen. Von oben müssen wir es auf Null setzen und vom Labor aus müssen wir es um 25% verschieben 25% des Randbereichs des NC-Tags. Ich werde den Hover-Selektor davon erstellen, irgendeinen Typ A, Doppelpunkt, Dann Doppelpunkt, ich wähle das Actor-Element aus. Danach. Dann werde ich in der Klasse von oben auf Null setzen und ab Ende werde ich es auf 25% setzen. Ich werde diese Datei einrichten. Wenn ich nach dem Setzen dieser Datei den Mauszeiger auf dieses Element bewege, sieht es so aus So wurden die 50% dieses Schaltflächenbereichs abgedeckt. Wir sind also fast fertig mit unserer zentralen Arbeit. Im nächsten Teil dieses Tutorials werden wir die anderen beiden Teile mit dem Span-Tag und dem Before-Positiv-Element erstellen , und wir werden uns mit den anderen beiden Teilen befassen. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unseren nächsten Teil. 13. Split-Button-Effekt Teil 2: Hallo Leute. Schön , dass du wieder da bist. Dies ist der zweite Teil dieses Projekts. Wie Sie sehen können, erstellen wir bereits zwei Elemente, indem wir den Selektor vor und die obere Position des Anger-Elements verwenden Unser vorheriges Element bewegt sich auf die rechte Seite und unser oberes Element bewegt sich nach unten Und jetzt müssen wir die verbleibenden zwei Teile erstellen. Auch hier werden wir diese beiden Elemente mit einem Vorher-Nachher-Pseudoelement erstellen diese beiden Elemente mit einem Vorher-Nachher-Pseudoelement Aber dieses Mal werden wir vor und nach dem Psudo-Element dieses Span-Tags verwenden, das Sie innerhalb dieses NGA-Tags erstellen Kommen wir nochmal zu dem, was Styler sagt, gefallen. Wir werden diese beiden Elemente erstellen. Lassen Sie uns in diesen Abschnitt springen und Herm hinzufügen, um Colon vor Span Colon danach Und ich werde diese Datei einrichten. Ich habe diese Datei verärgert, so sieht sie aus. Also haben wir diese beiden Elemente erfolgreich erstellt. Jetzt müssen wir die beiden Elemente platzieren. Dafür wähle ich zuerst das Element Span Before aus, und hier erstelle ich einen Selektor davon. Span vorher Dann sagt der Schnitzer, hier zielen wir auf das Span-Tag vor dem Element, das sich innerhalb des Ankerelements Geben Sie also vorher A, Leerzeichen, Span, Doppelpunkt ein. Dann müssen wir die Position von oben definieren , von oben zu 100%. Es wird dieses Element unter der Schaltfläche platzieren, und dann müssen wir die richtige Position definieren. Also tippe richtig, 25%. Ich werde diese Datei einrichten. Nachdem wir diese Datei eingerichtet haben , platzieren wir dieses Element hier. Von der rechten Seite wurde es zu 25% und von oben zu 100% versendet. Auf die gleiche Weise müssen wir Pseudoelement nach dem Ende platzieren Ich dupliziere diesen Abschnitt und dieses Mal werde ich nach dem Element aer zielen Dann mache ich bei den Cariras von rechts -25%, und von oben sage ich Null Ich werde diese Datei einrichten . Hier platzieren wir das nach dem Element. Dann müssen wir am Hover-Selektor arbeiten. Lass es mich dir zeigen Zuerst werde ich am Hover-Selektor vor dem Element arbeiten am Hover-Selektor vor dem Element Ich tippe, anchor, dot, hover, dann müssen wir das Span-Tag span before element, span, colon before auswählen element, span, colon before Wenn ich dann innerhalb der Kelche mit der Maus auf dieses Element fahre, möchte ich dieses Element nach oben verschieben. Hier tippe möchte ich dieses Element nach oben verschieben. Hier tippe ich von oben oben und gebe den Wert Null Und ich möchte auch sagen, richtiger Wert, richtiger Und für den Deich werde ich ihn zu 25% verwenden, so wie er ist, zu 25%. Und ich werde diese Datei einrichten. Ich setze diese Datei, wenn ich mit dem Cursor darauf hüpfe, kannst du das Ergebnis sehen. So wurde dieses Element auf den Kopf gestellt. Jetzt müssen wir an diesem Element arbeiten, dem Element pro Psudo dieses Pan-Tags Also kopiere ich diesen Abschnitt und füge ihn hier ein. Und dieses Mal wähle ich das After-Element, danach. Dann müssen wir hier die Position definieren. Hier müssen wir nur den richtigen Wert auf Null setzen, und wir müssen diese Datei setzen. Wenn ich nach dem Einstellen dieser Datei den Mauszeiger darauf bewege , können Sie das Ergebnis sehen So wird der Hintergrund mit den vier verschiedenen Elementen vervollständigt mit den vier verschiedenen Elementen Als Nächstes müssen wir die Farbe des Textes ändern , wenn ich mit der Maus darauf fahre Ich werde einen Her-Selektor mit dem Anker-Tag A, Doppelpunkt Her erstellen dem Anker-Tag A, Doppelpunkt Dann verwende ich im Autoprozess die Farbeigenschaft Farbe und weise diese dunkelgraue Farbe, und weise aber das Tag hat, zwei zu Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, ich das Ergebnis sehen, wenn ich mit meinem Auto über kann ich das Ergebnis sehen, wenn ich mit meinem Auto über diese Taste fahre Und unsere letzte Pflicht ist es, den Überlaufbereich vor dem Technologiebereich von Anca zu verstecken Dafür müssen wir in die Anca-Steuer springen, diese auswählen, dann müssen wir hier die Eigenschaft Overflow verwenden Überlauf versteckt. Ich werde diese Datei einrichten A hat diese Datei eingestellt. So klein und sehen sie aus. Wenn ich mit meinem Auto über dieses Element schwebe, kann man den schönen O-Effekt sehen Ich hoffe, jetzt ist dir klar, wie wir diesen schönen Button Heft kreieren können Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf unser nächstes Tutorial. 14. Überblendeneffekt für den Rand wechselnden Button Teil 1: Hallo Leute. Schön , dich wieder zu sehen. Ich bin wieder mit einem weiteren Tutorial zurück, unser Projekt nachahmt Und heute werden wir in diesem Tutorial diesen schönen Button-Effekt erstellen Wenn ich also meine Autos darauf höre, kannst du diesen Übergang erleben Sie können sehen, dass unser Button von vier langen Rändern umgeben ist. Außerdem können Sie feststellen, dass sie je nach Schaltfläche nicht die gleiche Höhe und Breite haben . Es ist etwas länger als das. Sie können feststellen, dass der linke und rechte Rand eine größere Höhe und der obere und untere Rand eine größere Breite haben Wir werden lernen, wie man das macht und wie man diesen Übergang vollzieht Lassen Sie uns also in den Visual Studio-Code-Editor springen. Wie Sie nebeneinander sehen können, öffne ich meinen Result Studio-Code-Editor und meinen Browser mit der Servererweiterung, und ich habe bereits ein HTML-Dokument mit dem Namen Index Dot TML erstellt dem Namen Index Dot TML erstelle ich bereits Damit erstelle ich bereits diese Kachel-CSS-Datei und verknüpfe diese Datei mit diesem Dokument Also füge ich zuerst in das Body-Tag ein Anker-Tag, A, und den Hover vom Typ Hemo Ich. Dann springe ich in die Style-CSS-Datei und gestalte zuerst das Body-Tag Body. Dann verwende ich bei der ersten Immobilie in Kalifornien Marji, ich sage Margin Null aus allen Richtungen Dann sage ich Display. Display, ich werde es flicken lassen weil ich das Ancha-Tag in der Mitte der Sprache platzieren und die Elemente nach Heterotyp in der Mitte ausrichten möchte Sprache platzieren und die Elemente nach Heterotyp in der Mitte Außerdem werde ich tippen, den Inhalt begründen, den Inhalt begründen und den Inhalt zentrieren Dann verwende ich eine weitere Eigenschaft namens height, height und weise der Viewfd height die Höhe 100 VH zu. Dann werde ich eine Hintergrundfarbe zuweisen. Ich möchte eine dunkle Hintergrundfarbe zuweisen, also Herm-Typ, Hintergrundfarbe, Hastag 222, dieser Farbcode, dunkelgraue Und jetzt werde ich das Anker-Tag mit seinem Tagnym A anvisieren Anker-Tag mit seinem Tagnym A und innerhalb der Aliase, der ersten Eigenschaft, werde ich Textdekoration, Text, Dekoration verwenden . Zuerst werde ich die Unterstreichung entfernen, also werde ich Dann werde ich diesen Text in Großbuchstaben umwandeln, Ruß, Text, Transformieren in Großbuchstaben Danach definiere ich die Schriftgröße, Schriftgröße 22 Pixel Ich denke, zwei Pixel sind dafür großartig, und ich werde diese Pinie setzen. Dann werde ich die Schriftfamilie ändern, ich möchte die Luftschrift verwenden. Luftbild. Danach definiere ich den Buchstabenabstand, Abstand zwischen den Zeichen Buchstabenabstand, und ich werde drei Pixel daraus machen. Außerdem werde ich Farbe definieren. Farbe, ich werde sie gelb machen , andernfalls weiße Farbe. Ich denke, weiße Farbe ist gut dafür, weiß. Danach definiere ich Höhe und Breite, Höhe, Höhe und möchte eine Höhe von 60 Pixeln zuweisen. Dann definiere ich mit. Wir. Auch für Gras werde ich 200 Pixel verwenden. Ich denke, es ist gut dafür. Dann definiere ich die Zeilenhöhe Zeilenhöhe und weise ihr eine Zeilenhöhe von 60 Pixeln zu. Außerdem müssen wir die Textmitte dieser Seite ausrichten, also Text Align Text Align Center eingeben. Ich werde diese Datei einrichten. Jetzt müssen wir Rahmen und Rahmen definieren, und ich möchte einen durchgehenden Rahmen mit zwei Pixeln verwenden Unsere Rahmenfarbe ist vorerst, ich werde, glaube ich, die blaue Farbe verwenden. Ich denke, Blau ist gut. Blau. Dann definiere ich die Position, relative Position, und lege diese Datei fest. Nachdem ich diese Datei eingestellt habe, sieht sie so aus. Jetzt müssen wir an dem langen Rand arbeiten, den wir im Dunkeln gesehen haben , um herauszufinden, wie wir sie erstellen können Wir müssen Schritt für Schritt vorgehen. den linken und rechten Rand zu erstellen, verwende ich zunächst das Before-Pseudoelement Lassen Sie uns das Before-Pseudoelement dieses Anca-Tags erstellen , A, Doppelpunkt Und in den Kalibern werde ich zuerst den leeren Inhalt erstellen Inhalt, Doppelpunkt, es ist ein Leerzeichen, und das werde ich in dieser Zeile tun Danach werde ich die Position definieren. Die Position ist absolut. Als Nächstes definiere ich mit und Höhe. Höhe, ich mache 60 Pixel daraus, dann definiere ich sie mit Wi und mache 200 Pixel daraus. Ich werde die oberste Position definieren, oben. Von oben werde ich es auf Null setzen und von links werde ich es auch auf Null setzen. Jetzt können Sie feststellen, dass wir hier dieselbe Größe und dasselbe Gewicht zuweisen, die wir in unserem Anker-Tag zuweisen. Bisher hatte das Before-Pseudoelement die exakte Größe dieses Encord-Elements Es hat eine ähnliche Höhe und eine ähnliche Breite. Wenn ich diese Datei einstelle , wird sie darauf liegen. Jetzt werde ich damit den linken und rechten Rand erstellen . Lassen Sie mich Ihnen einen Text zeigen, der links umrandet und ich möchte zwei Pixel . Dann ist ein fester Rand auch fest Dann ist unsere Rahmenfarbe, ich werde rote Farbe zuweisen Rot. Als Nächstes werde ich die richtige Grenze erstellen. Rand, rechts und Hemo passieren zwei Pixel, durchgehender Rand, durchgehend, und unsere Rahmenfarbe ist Außerdem möchte ich dieselbe Rahmenfarbe verwenden , die ich für den Text verwende Ich fliege mit diesem. Wenn ich diese Datei einstelle, sieht sie so aus. Es ist ein weißer Rand und hier können Sie den roten Rand sehen, und er befindet sich auf dem ursprünglichen blauen Rand. Deshalb kann man sie kaum sehen. Jetzt möchte ich diese beiden Grenzen etwas länger machen. Ich werde die Höhe dieser beiden Grenzen erhöhen. Ich werde die Höhe des vorherigen Pseudoelements erhöhen. Ich werde 90 draus machen und diesen Stapel aufstellen Jetzt kannst du sehen, dass es ein bisschen länger aussieht. Jetzt sind die Ränder 30 Pixel länger als unsere Anctag-Höhe, weil wir hier 90 Pixel zuweisen. Und jetzt müssen wir diesen Rand in der Mitte dieses Inhalts ausrichten diesen Rand in der Mitte dieses Inhalts Ich möchte den Rand gleichmäßig in den oberen und unteren Bereich aufteilen . Dafür werde ich hier nur den höchsten Wert verwenden. Ich mache es minus FIF-Ping. Also wird es die Grenze oben und unten teilen. Also werde ich diese Datei einrichten, Sie können das Ergebnis sehen. Das ist also der erste Teil dieses Tutorials. Im nächsten Teil dieses Tutorials werden wir den oberen und den unteren Rand erstellen. Also danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf unseren nächsten Teil. 15. Überblendeneffekt für den Rand wechselnden Button Teil 2: Schön euch zu sehen. Dies ist der zweite Teil dieses Tutorials und hier im Abschnitt werden wir den oberen und den unteren Rand erstellen. Lassen Sie uns in den Stil CSS Spie eintauchen. Hier werde ich das obere Pseudoelement A mit der Geschwindigkeit oben erstellen das obere Pseudoelement A mit der Geschwindigkeit Dann erstelle ich in der Caris zuerst einen leeren Inhalt, einen Inhalt und ihn einen Inhalt, dann definiere ich die Position Position, ich werde den Absolutwert bestehen. Dann definiere ich Höhe, Höhe. Hier werde ich eine Höhe von 60 Pixeln zuweisen. Als Nächstes werde ich definiert , mit, und ich werde mit 230 Pixeln aufsteigen, und dann werde ich es positionieren Vorerst werde ich von oben kommen lassen, von oben werde ich Null passieren lassen und von links werde ich auch Null passieren Dann werde ich eine Grenze zuweisen. Eingerahmt Zuerst weise ich den oberen Rand, den oberen Rand und oben zwei Pixel zu, einen durchgehenden oberen Rand und oben zwei Pixel zu, Rand , und unsere Rahmenfarbe ist Stärke. Dann definiere ich einen weiteren Rahmen für den unteren Rand. Rand, durchgehender Rand mit zwei Pixeln und unsere Rahmenfarbe ist weiß. Ich werde diese Datei unterschreiben. Nachdem ich diese Datei eingerichtet hatte, sah sie so aus. Jetzt können Sie sehen, dass wir den oberen und den unteren Rand haben, und dieser ist etwas länger als die Breite dieser Schaltfläche. Wie du sehen kannst, ist Hero auf 200 Pixel eingestellt, aber für den Rand nehmen wir 230 Pixel und jetzt müssen wir den Rand ein bisschen nach links verschicken . Wir müssen es mittig ausrichten. Wir müssen es vertikal ausrichten. Dafür, statt Null, ihr Pass minus 15 Pixel px, werde ich diese Datei zufriedenstellen, so sah sie aus. Und jetzt brauchen wir diesen blauen Rand nicht mehr. Ich werde diese Grenze verstecken. Ich werde diese Zeile auskommentieren und diese Datei einrichten. Sind diese Datei eingerichtet, so sah sie aus. Und jetzt müssen wir am Hover-Effekt arbeiten. Denken Sie daran, wenn ich mit der Maus über diese Linie fahre, möchte ich den Rand zu ihren Gesichtern ändern Ich möchte den oberen roten Teil nach unten und den linken roten Teil nach rechts formen , und das geht ganz einfach Lassen Sie uns also am Hover-Pseudoelement arbeiten. Lassen Sie uns den Her-Selektor für das verzögerte positive Element erstellen verzögerte positive Element Also Tie, A, Doppelpunkt, Hover und dann Doppelpunkt, ich mache Dann verwende ich in der Kalibrase die Transform-Pooper-Transformation und übergebe den Wert für Rotate Y, Rotate Y. Dann möchte ich dieses Element um 180 Grad, 180 DG drehen . Ich stelle Ich werde das vorherige Pseudoelement bei Y X um 180 Grad drehen . Wenn ich den Mauszeiger darauf bewege, können Sie sofort das Ergebnis sehen Im Grunde wird es den yXSder einschalten , damit es reibungslos abläuft Wir müssen in das Pseudo-Element vor der Tür gehen und hier müssen wir Typ Sumo, alles übergehen und unsere Zeit ist 1 Sekunde. Offensichtlich diese Datei, wenn ich mit der Maus über diesen Link fahre. Wie Sie sehen können, hat sich die Position auf diese Weise verändert. Im Grunde dreht es das Element um. Jetzt können Sie sehen, wie der Rand genau die Position ändert, die wir wollen. Jetzt müssen wir das nachträgliche Element umdrehen. Dafür werde ich diesen Abschnitt duplizieren und anstatt vorher zu verwenden, wähle ich danach aus. Dann werde ich hier in der Cls den Wert Rotate X verwenden Anstatt Rotate Y zu verwenden, verwende ich Rotate X und lege diese Datei fest Wenn ich nach dem Einstellen dieser Datei über mein Auto auf diese Schaltfläche fahre, können Sie das Ergebnis sehen. Aber wir müssen diesem oberen Pseudoelement auch einen Übergang hinzufügen diesem oberen Pseudoelement Ich kopiere diesen Wert und diese Eigenschaft, denselben Wert und dieselbe Eigenschaft, und werde sie hier einfügen Wenn ich nun diese Datei und wer auch immer meine Autos sind, auf diesen Link setze, kannst du hier den schönen Übergangseffekt sehen. Aber wenn Sie es attraktiver machen möchten, können Sie dem oberen Pseudoelement eine kleine Übergangsverzögerung hinzufügen , einige Typen vom Typ Übergang B, und ich möchte eine Dauer von bis zu 0,2, andernfalls 0,2 Wenn ich diese Datei einstelle und Herm-Autos drauf sind, können Sie jetzt feststellen, dass, nachdem ich nach links und rechts bewegt habe, es sich oben und unten bewegt hat, und das erzeugt einen schönen Ich hoffe also, dass Ihnen jetzt klar ist, wie wir diesen schönen Hover-Effekt erzielen können Also danke, dass du dir diese Videostatue für unser nächstes Studio 16. Kreativer Button-Effekt mit wachsender Umrandung: Hallo, alle zusammen. Willkommen zur neuen Lektion in diesem Kurs. In dieser Lektion werden wir einen weiteren coolen HaiFTT Button bauen einen weiteren coolen HaiFTT Button Wie Sie sehen können, hat diese Schaltfläche einen Rand in der oberen linken Ecke und in der unteren rechten Und wenn ich den Cursor verschiebe, vergrößert er die Höhe und Breite des Randes und schon sitzt er auf diesem schönen Button Harift vergrößert er die Höhe und Breite des Randes und schon sitzt er auf diesem schönen Button Schauen wir uns also an, wie wir bauen können. Wie Sie sehen können, öffne ich Seite an Seite meinen Salt Studio-Code-Editor und meinen Browser mit Live-Servererweiterung und habe bereits ein HTML-Dokument mit dem Namen Index Dot HTML erstellt ein HTML-Dokument mit dem Namen Index Dot HTML Damit verlinke ich auch mit Style-CSS-Datei und es ist eine leere Datei Jetzt werde ich zuerst mit dem Indexpunkt StimlPage eine Schaltfläche erstellen Hier gebe ich Button ein und in diesem Button gebe ich Submit ein. Ich gehe zur Sets-Datei. Nach der Sets-Datei sieht es so aus. Dann springe ich in meine CSS-Datei. Stil oder CSS. Zuerst werde ich das Body-Tag als Ziel verwenden, d. h. den Körper mit seinem Tag-Namen. Dann sage ich in den Aliasnamen zuerst Rand und dann Rand Null und ich sage Rand Null, dann definiere ich die Höhe und Höhe und setze sie auf 100 H für Höhe Als Nächstes definiere ich Display. In diesem Spiel werde ich Display Flex verwenden. Danach werde ich dieses Objekt ausrichten, das Objekt mittig ausrichten, den Inhalt ausrichten und den Inhalt auch mittig ausrichten. Dann definiere ich die Hintergrundfarbe. Hintergrundfarbe hier werde ich den Hashtag 27, 2727 verwenden. Ich werde diese Datei einrichten. Wie Sie sehen können, ist dies eine dunkelgraue Hintergrundfarbe, um diese Datei einzustellen . Außerdem richten wir diese Schaltfläche der Mitte dieser Seite horizontal und vertikal aus. Als Nächstes gestalte ich dieses Button-Tag, Schaltfläche vom Typ Song und die Schaltfläche in den Autos Zuerst definiere ich den Rahmen. Grenze, ich werde keinen einstellen. Dann werde ich Padding Padding definieren. Von oben und unten weise ich 12 Pixel zu, und von links nach rechts weise ich 40 Pixel zu Danach definiere ich die Hintergrundfarbe. Hintergrundfarbe. Für die Hintergrundfarbe suche ich nach der Wellenfarbe. Wellenfarbe und Helm öffnen jede Website. Also wähle ich aus dieser Webfarbe eine der Farben aus. Also würde ich mich für diese Farbe Helllachs entscheiden. Also kopiere ich den Hexa-Wert dieser Farbe und füge ihn hier Ich werde diese Datei einrichten. Dann zurück zum Dokument. Danach werde ich die Schriftfamilie definieren. Schriftfamilie, ich werde jede Schriftart verwenden, die Sie als Luftschrift verwenden können. Dann werde ich die Schriftgröße definieren. Schriftgröße, ich werde eine Schriftgröße von 22 Pixeln verwenden. Als Nächstes werde ich diesen Text in Großbuchstaben umwandeln , Text, Großbuchstaben umwandeln Außerdem werde ich unseren Cursor zeigen lassen , wenn ich mit dem Cursor auf diese also den Cursor eintippe, mache ich ihn spitz. Außerdem werde ich es positionieren. Position, ich werde die Position relativ machen. Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, sieht sie so aus. Außerdem werde ich der Schrift eine kleine Schrift zuweisen. Ich brauche hier eine etwas fettere Schrift, ich werde 700 zuweisen und ich werde sie erneut speichern Damit ändere ich die Farbe des Textes Farbe Smotype und mache sie Ich werde diese Datei einrichten. Wir haben diesen Button erfolgreich gestaltet. Lassen Sie uns nun die Grenzen erstellen. Zuerst erstellen wir den Rand in der oberen linken Ecke mit dem Pseudo-Element vor, dann werden wir den Rand in der unteren rechten Ecke mit dem After-Psudo-Element erstellen unteren rechten Ecke mit dem After-Psudo-Element Um es zu erstellen, müssen wir im Grunde eine kleine Box erstellen. Lass mich dir zeigen, wie. Hier gebe ich Button, Doppelpunkt, vor Element ein. Vorher. Dann verwende ich innerhalb der Farben, der ersten Eigenschaft, Inhalt, und hier tippe ich, ich erstelle einen leeren Inhalt. Danach werde ich die Position definieren. Position, ich werde sie absolut machen. Dann werde ich wd definieren. Breite, ich werde 24 Pixel draus machen. Außerdem werde ich die Höhe definieren. Höhe, ich werde sie mit 24 Pixeln definieren. Dann positionieren Sie die quadratische Box an dieser Ecke an der Laptop-Ecke. Von oben positioniere ich es auf Null und auf der linken Seite werde ich es wieder auf Null positionieren. Außerdem werde ich eine Hintergrundfarbe definieren, eine Hintergrundfarbe, und vorerst werde ich die rote Farbe, ROT, definieren, damit wir das quadratische Feld sehr leicht verstehen können. Diese Datei voreinstellen, so sieht sie aus. Wenn Sie sich erinnern, liegt unsere Grenze außerhalb des Gebietes. Draußen, ich möchte sagen, außerhalb des Button-Bereichs. Ich werde in die quadratische Schachtel versenden, links und etwas oben Also werde ich es mit negativen fünf Pixeln versenden, minus fünf Pixel eingeben, fünf Pixel aus dem Labor Außerdem werde ich denselben Wert für die Oberseite verwenden. Ich werde diese Datei einrichten. Nachdem Sie diese Datei eingerichtet haben, können Sie das Ergebnis sehen. Nachdem Sie es fünf Pixel von oben und von links versendet haben, gehen Sie von diesem Schaltflächenbereich nach draußen. Fügen wir nun den oberen und linken Rand hinzu. Also hier werde ich zuerst den oberen Rand verwenden, ich werde irgendeinen Typ border , top verwenden. Ich möchte zwei Pixel verwenden, durchgehenden Rand, und unsere untere Farbe ist genau dieselbe Farbe, die wir für die Schaltfläche verwenden. Kopiere den Wert „Farbe und ich füge ihn hier ein. Dann werde ich diese Zeile duplizieren. Dieses Mal werde ich den Rand auf der linken Seite erstellen , spät in der Flasche. Ich verwende denselben Rahmen und werde diese Datei einrichten. Stellen Sie diese Datei ein, Sie können den Rand sehen. Auf der Oberseite und auf der anderen Seite befindet sich die linke Seite. Als Nächstes müssen wir diesen Rand animieren. Ich möchte wachsen, wenn ich auf diesem Knopf auf meinen Autos herumgefahren bin. Das können wir ganz einfach machen. Wir müssen die Höhe und Breite dieser quadratischen Kiste erhöhen . Lassen Sie uns den Hober-Selektor dieser Schaltfläche für den Typ Button, Doppelpunkt, Loch, Doppelpunkt, vorher erstellen dieser Schaltfläche für den Typ Button, Doppelpunkt, Loch, Doppelpunkt, vorher Dann werde ich in der Diskussion die Höhe und Höhe auf 100% definieren Außerdem werde ich Breite und Breite zu 100% definieren. Und ich werde diese Datei einrichten. Wenn ich nach dem Einrichten dieser Datei mit meinem Cousin darauf fahre, können Sie das Ergebnis sehen Aber wenn ich mit der Maus darüber fahre, müssen wir ein wenig Übergang hinzufügen , weil dadurch die Höhe und Breite dieses Balkens sofort vergrößert wurde Hier werde ich die Übergangseigenschaft verwenden. Alles übergehen. Damit werde ich auch die Zeit für diesen Übergang definieren , die 0,25 Sekunden beträgt Ich denke, es ist genug. Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe und ich hoffe, dass meine Autos darauf stehen, können Sie das Ergebnis sehen. Nachdem Sie den Übergang hinzugefügt und diese Datei eingerichtet haben, wenn ich hoffe, dass sich meine Autos darauf befinden können Sie diese Transformation erleben , wenn ich hoffe, dass sich meine Autos darauf befinden. Jetzt müssen wir diesen roten Hintergrund entfernen. Wir brauchen nur die Grenze. Dafür werde ich diese Zeile auskommentieren und diese Datei einrichten. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Jetzt müssen wir dasselbe für die rechte Ecke des Randes tun . Dafür werden wir das Posido-Element aufbrauchen. Ich werde diesen Abschnitt kopieren und ihn hinter dem Her-Selektor einfügen Dann mache ich zuerst, ich ändere vorher nachher Danach werde ich die Position ändern. Zuerst werde ich von oben nach unten wechseln und dann werde ich von links nach rechts wechseln. Danach müssen wir auch den Rand von oben auf den unteren Rand und den Rand von links auf den Rand, rechts ändern unteren Rand und den Rand . Ich werde diese Datei einrichten und hier können Sie das Ergebnis sehen. Und auf die gleiche Weise müssen wir den Hover erstellen, der für dieses After Element ausgewählt Ich kopiere diesen Abschnitt erneut und füge ihn hier ein, und hier werde ich die vier durch danach ersetzen Ich werde diese Datei einrichten. nun nach dem Einstellen dieser Datei Wenn ich nun nach dem Einstellen dieser Datei meine Karten auf dieses Element lege, erzielen wir das gewünschte Ergebnis. Harry hat diesen wunderschönen Button-Hover-Effekt erzielt. Ich hoffe, jetzt ist Ihnen klar, wie wir es erstellen können. Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf unser nächstes Projekt. 17. Kreativer Effekt des drehbaren Buttons für den ersten Buchstaben: Hallo Leute, schön, dass ihr wieder da seid. Ich bin wieder einmal mit einem neuen projektbezogenen Button Haift zurück. In diesem Projekt werden wir diesen schönen Button Haift kreieren Wie ihr sehen könnt, wenn ich Hoberm-Karten auf dieser Schaltfläche habe, könnt ihr feststellen, dass sich der Hintergrund ein wenig dreht Außerdem wurde der erste Buchstabe B vergrößert und der Buchstabe B um 360 Grad gedreht Mal sehen, wie wir diesen schönen Button Hari Fit kreieren können diesen schönen Button Hari Fit Lass uns in den Studio-Code springen. Wie Sie sehen können, öffne ich Seite an Seite meinen Visual Studio-Code-Editor und meinen Browser mit Live-Servererweiterung und erstelle bereits ein SML-Dokument mit dem Namen Index Dot HTML Damit verlinke ich diese Document Styler-CSS-Datei. Wir fangen an, ein Anca-Tag A hinzuzufügen und innerhalb des Ncatags nehme ich ein Span-Tag span und innerhalb des Span-Tags gebe ich den Großbuchstaben B ein, damit wir diesen Buchstaben separat animieren können Dann gebe ich außerhalb des Span-Tags den Rest des Knopf. Dann werde ich meinen Browser neu laden Jetzt müssen wir diese Schaltfläche in der Mitte dieser Seite horizontal und vertikal ausrichten der Mitte dieser Seite horizontal und vertikal Dazu müssen wir in die Style-Dot-CSS-Datei springen. Zuerst ziele ich auf das Body-Tag, den Körper zuerst auf die Innenseite des Kalivis, definiere die Höhe und setze die Höhe des Viewports auf 100 Dann zeige ich das Display an und lasse es abblättern Ap, den ich anwenden werde, begründen, dass der Inhalt zentriert ist. Dann gebe ich „Elemente auch zentriert ausrichten“ ein. Danach definiere ich die Schriftfamilie und verwende die Schriftart Aerial, Aerial. Und endlich werde ich den Überlaufbereich verstecken. Überlauf versteckt. Dann werde ich die Hintergrundfarbe verwenden. Als Hintergrundfarbe gebe ich Hashtag 22 ein, diesen dunkelgrauen Hintergrund Ich werde diese Datei einrichten. Als Nächstes werde ich diesen Fang mit einem Typ A stylen und innerhalb der CarisSF-Eigenschaft werde ich Textdekoration verwenden Textdekoration, ich mache keine, weil ich die Unterstreichung entfernen möchte Danach definiere ich nass. Was, er hat rot eingestellt, 160 Pixel. Dann werde ich die Höhe zuweisen. Höhe für Höhe werde ich 60 Pixel zuweisen. Und ich werde Farbe als Farbe definieren, und ich möchte der Textfarbe Weiß zuweisen. Danach werde ich den Rand definieren. Rahmen, und ich möchte einen einfarbigen Rahmen mit zwei Pixeln verwenden, einen einfarbigen Rahmen mit zwei Pixeln, einen einfarbigen Rahmen mit zwei Pixeln, einfarbig, und unsere Rahmenfarbe ist weiß, Hastag wenn A. Ich werde diese Datei unterteilen. Nachdem ich diese Datei eingerichtet habe, sieht sie so aus Dann werde ich den Text in der Mitte dieses Containers ausrichten . Um also Text Align, Text Align Center einzugeben. Danach definiere ich die Zeilenhöhe und die Zeilenhöhe, und ich möchte eine Zeilenhöhe zuweisen, fast 60 Weixel. Ich denke, 60 Pixel Danach definiere ich die Schriftgröße und mache daraus 25 Und ich werde diese Datei unterschreiben. Nach dem Unterschreiben dieser Datei sieht der Orbit so aus. Dann mache ich die Position relativ und füge auch einen Übergang hinzu. Übergang, all dieses Element und unsere Übergangszeit sind Nullpunkt, etwa zwei Sekunden. Ich denke, es ist gut dafür. Ich werde diese Datei subskribieren. Lassen Sie uns nun den weißen Hintergrund erstellen. Wenn Sie mit der Maus über diesen Link fahren, wird dieser Hintergrund gedreht und wir verwenden dafür before psudoelement Hier gebe ich das Ancha-Tag vor dem Psudoelement ein. Bevor Inside The Caliber sagt, dass ich zuerst einen leeren Inhalt erstellen werde Inhalt und ich möchte einen leeren Inhalt erstellen. Danach will ich es positionieren, positionieren, ich will es absolut machen. Außerdem musst du es von oben platzieren, ich werde Null überschreiten und ab spät werde ich auch Null überschreiten. Dann definiere ich mit der Höhe dieses Elements. Ich werde 100% und Höhe verwenden. Da ich 100% Prozent verwenden werde. Dann werde ich die Hintergrundfarbe definieren. Hintergrundfarbe, und ich möchte weiße Farbe verwenden, diesen Farbcode. Ich werde zufrieden stellen. Wie Sie sehen können, hat es nach Satisfle die gesamte Schaltfläche abgedeckt Damit der Text darüber erscheint, müssen wir den Z-Index verwenden Z-Index minus eins minus eins, und ich werde zufrieden stellen. Jetzt sollte er unsichtbar sein und wenn ich mit der Maus über diesen Link fahre, sollte er erscheinen und ausgeblendet werden. Es hat sich auch gedreht Ich sage Opazität Null und ich mache den Übergang, und ich definiere t für 0,8 Sekunden Als Nächstes erstelle ich einen Hover-Selektor für dieses unterschiedliche Element Also hier, ich werde binden. Also hier binde ich Nga Tag, Doppelpunkt, Hal. Über den Selektor. Dann werde ich vorher auf das Vorher-Element abzielen Dann steht im Kaliber: Hier, wenn ich mit der Maus drüber fahre, möchte ich die Deckkraft einstellen Ich werde die Deckkraft auf eins setzen. Ich möchte es vollständig undurchsichtig machen, nicht transparent. Und dann werde ich die Transformationseigenschaft anwenden, transformieren und ich möchte dieses Element drehen Bald werde ich Rotate eingeben. Transformiere, drehe und ich möchte es drehen, ich möchte es um 15 Grad drehen . Ich werde diese Datei einstellen Nachdem ich diese Datei eingestellt habe und über meinen Cursor fahre, können Sie zuerst feststellen, dass der weiße Hintergrund, der transparente Hintergrund undurchsichtig dann das Element gedreht wird Dann wird das Hintergrundelement um 15 Grad gedreht Hintergrundelement um 15 Danach möchte ich die Textfarbe ändern, wenn ich über diesen Link gehe. Ich möchte diese Textfarbe schwarz machen. Dafür werde ich hier einen Hover-Selektor erstellen . Ich gebe Anca tag hover Anca tag Dann verwende ich innerhalb der Eigenschaft colors, der ersten Eigenschaft, Farbe Farbe, ich werde es weiß machen und ich werde diese Datei einstellen. Wenn ich nach dem Einstellen der Datei den Mauszeiger mit der linken Maustaste anhalte, müssen wir sie leider schwarz machen da wir bereits weiße Textfarbe verwenden Ich werde dafür sorgen, dass sie ein Tag hat, um diesen Farbcode zu machen. Ich werde diese Datei einrichten. Wenn ich nach dem Einrichten dieser Datei den Mauszeiger darauf bewege, können Sie das Ergebnis sehen Konzentrieren wir uns jetzt auf den ersten Buchstaben B. Wenn Sie sich erinnern, als ich mit dem Mauszeiger auf diese Schaltfläche fuhr, wurde der erste Buchstabe vergrößert, und wie Sie sehen können, hat Harry Buchstaben B in das span-Tag eingefügt Ich werde auf dieses Span-Tag abzielen. Hier gebe ich A ein, innerhalb dieses A-Tags, Anker-Tag, gebe ich als Ziel Span-Tag, Span ein . Dann verwende ich in der Leber, der ersten Eigenschaft , Farbe und mache sie transparent Dann gebe ich die Position an und ich möchte sie relativ machen Jetzt können Sie sehen, dass der erste Buchstabe jetzt unsichtbar ist , weil wir gesagt haben, dass die Farbe transparent ist. Deshalb ist es unsichtbar. Als Nächstes erstelle ich das Before-Pseudoelement des Span-Tags Hier bin ich vom Typ A, span, ein Span, das Before-Pseudoelement Dann erstelle ich innerhalb der Klasse Inhalt, Inhalt und füge den Buchstaben B ein. Dann positioniere ich ihn an seiner Position, ich mache ihn absolut Als Nächstes gebe ich Farbe und Farbe an, und ich möchte diese dunkelgraue Farbe einfärben. Entschuldigung, ich verwende weiße Farbe, weiß. Und dann müssen wir die Übergangseigenschaft verwenden. Übergang. Und hier werde ich den Übergang weitermachen. Und ich muss auch die Übergangszeit definieren, die 0,2 Sekunden beträgt. Ich werde diese Datei einrichten. Lassen Sie uns nun am Hard-Effekt dieses Stift-Tags arbeiten, Sandfoelement, irgendein Typ Anker-Tag, Hal, Span, Doppelpunkt, BFO Dann werde ich zuerst die Farbe im Inneren der Farbe ändern, wenn ich sie hobar Geben Sie also Farbe ein, ich mache es zu einer dunklen Farbe 222. Dann möchte ich die Schriftgröße erhöhen, etwas Schriftgröße, und ich werde sie auf 80 Pixel setzen. Schließlich müssen wir den Text drehen , transformieren, drehen, und ich möchte es um 360 Grad D EG drehen, und ich werde diese Datei einstellen. Stellen Sie diese Datei also ein, wenn ich mit dem Mauszeiger über diese Schaltfläche fahre, wie Sie sehen können, den ersten Buchstaben B, und drehen Sie sie um 360 Grad Aber das Problem ist, dass es die anderen Buchstaben verdeckt hat. Ich muss es ein wenig bewegen , damit es die anderen Buchstaben nicht verdeckt. Damit verwende ich Translate Propriety, irgendeinen Typ, Translate Ich werde bei den XXs an negative 65% und bei den YxS an negative 10% liefern und bei den YxS an negative 10% Wenn ich nach dem Einrichten dieser Datei mit dem Cursor auf diese Schaltfläche fahre, können Sie diesen schönen Hover-Effekt erleben Jetzt wird es an die XXs geliefert -65% und es wird an die YXS -10% geliefert Deshalb erzeugt es diesen schönen Effekt, aber welcher Effekt Ich hoffe, jetzt ist Ihnen klar, wie wir es bauen können. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Projekt. 18. Vier wachsender Bodeneffekt mit dem Rand: Hallo, Leute. Schön , dass du wieder da bist. Ich bin wieder mit einem neuen Projekt zurück. Heute werden wir in diesem Projekt diesen wunderschönen Button-Hover-Effekt erzeugen Wie Sie sehen können, wenn ich mit meinen Autos auf diesen Knopf steige, wurde dieser Knopf vier verschiedenen Rändern bedeckt Mal sehen, wie wir bieten können. Wie Sie nebeneinander sehen können, öffne ich meinen Studio-Code-Editor und meinen Browser mit FseExtension und erstelle bereits ein SML-Dokument Namen Indexpunkt-HTML Damit erstelle ich bereits eine Stylod-CSS-Datei und verknüpfe diese Styload-CSS-Datei mit diesem HTML-Dokument Jetzt werde ich zuerst innerhalb des Body-Tags hier ein Button-Tag erstellen Taste. Dann nehme ich auch ein Span-Tag, span, und lege diese Datei fest. Nachdem ich diese Datei eingerichtet hatte, sah sie so aus. Jetzt müssen wir in die Stylo-CSS-Datei springen. Lassen Sie uns in diese Stylo-CSS-Datei springen und mit dem Styling beginnen. Zuerst wähle ich Body-Tag, Body aus. Dann verwende ich im Body-Tag, der ersten Eigenschaft, den Rand. Margin, ich werde Null zuweisen. Dann werde ich Display zuweisen. Display, ich werde es flexibel machen. Als Nächstes weise ich „Objekt ausrichten“ und „ Elemente zentriert ausrichten“ zu. Auch das Motiv rechtfertigt das Inhaltszentrum. Dann weise ich Höhe 100 VH Viewport Height Dann weise ich Schriftfamilie und Schriftfamilienbereich zu. Als Nächstes weise ich die Hintergrundfarbe und den Untertyp „Hintergrundfarbe Dafür verwende ich die dunkelgraue Farbe, Hass-Tag 222, und ich werde diese Datei einrichten Nachdem Sie diese Datei eingerichtet haben, können Sie das Ergebnis sehen. Jetzt können Sie feststellen, dass die Schaltfläche in der Mitte dieser Seite horizontal und vertikal ausgerichtet ist. Jetzt wollen wir die Schaltfläche ins Visier nehmen. Dann wähle ich die Schaltfläche aus. Also, um den Knopf in den Farbrest zu binden. Innerhalb des Farbresists, der ersten Eigenschaft, verwende ich Hintergrundfarbe, Hintergrundfarbe, ich werde Hintergrundfarbe Rot sagen. Bei der nächsten Eigenschaft verwende ich border, Border, und ich werde den gesamten Rahmen entfernen, also verwende ich Nan Velu Danach werde ich es positionieren. Position, ich werde sie relativ machen. Dann definiere ich die Wieden-Höhe. Für Gras verwende ich hier 400 Pixel und für die Höhe 120 Pixel Dann werde ich den Button-Text in Großbuchstaben umwandeln Button-Text in Großbuchstaben Typ nimmt, transformiert, braucht Transformation, Großbuchstaben. Dann werde ich diese Datei einrichten. Nachdem ich diese Datei eingestellt habe, müssen wir die Schriftgröße erhöhen. Ich werde die Schriftgröße auf die Schriftgröße einstellen, und ich werde sie auf 45 Pixel einstellen. Und ich werde es erneut speichern, um den Text innerhalb der Schaltfläche vertikal und horizontal zu ordnen. Ich werde die Zeilenhöhe verwenden. Zeilenhöhe, 120 Pixel. Ich werde auch Textzeilenmitte eingeben. Als Nächstes füge ich dieser Volltonfarbe Farbe hinzu und mache sie weiß. Damit füge ich den Buchstabenabstand hinzu. Buchstabenabstand, ich werde 15 Pixel hinzufügen und ich werde diese Datei einstellen. Nachdem wir diese Datei eingerichtet haben, sieht unsere Schaltfläche so aus. Lassen Sie uns nun den oberen Rand erstellen , der links auf der rechten Seite angezeigt Dafür werde ich Pseudoelemente von Before verwenden. Ich tippe Button, Doppelpunkt und hier tippe ich vorher Dann werde ich in den Flüchen zuerst einen leeren Inhalt erstellen Inhalt, es ist ein leerer Inhalt. Danach müssen wir es positionieren, positionieren, und ich werde es absolut machen. Dann werde ich definieren, wo ich platzieren werde. Von oben werde ich es vorerst auf Null setzen, von links werde ich es vorerst auch auf Null setzen. Als Nächstes definiere ich die Breite. Breite, ich werde 100 Personen verwenden. Danach werde ich die Höhe definieren. Höhe, aber für Höhe verwende ich vier Pixel, vier Pixel. Außerdem werde ich die Hintergrundfarbe und die Hintergrundfarbe definieren und sie weiß machen. Ich werde diese Datei unterschreiben. Nachdem wir diese Datei eingerichtet haben, sieht unsere Grenze so aus. Im Grunde ist es keine Grenze, es ist ein tiefes Element. Jetzt verschiebe ich dieses Element, bevor das Pseudoelement auf die Seite rutscht Lass mich dir zeigen, wie. Anstatt den B-Wert Null zu verwenden, verwende ich hier -100% Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, können Sie das Ergebnis sehen. Jetzt wird die Leitung auf die linke Seite geliefert. Als Nächstes füge ich Übergang, Übergang alle hinzu und füge Nullpunkt 0,5 Sekunden hinzu . Ich werde diese Datei einrichten. Jetzt, als wir von dieser Schaltfläche gehört haben, möchte ich den Rand wieder an seine ursprüngliche Position bringen. Also tippe, Button, Doppelpunkt, Hover, Doppelpunkt, vor dem Element, davor Dann möchte ich dieses Element ep auf die rechte Seite verschieben, irgendein Typ, linker Wert, Null kehrt zu seiner ursprünglichen Position zurück Wenn ich nach dem Einstellen dieser Datei mit dem Cursor auf diese Schaltfläche fahre, können Sie das Ergebnis sehen. Auf die gleiche Weise möchte ich den unteren Rand erstellen. Ich werde den gesamten Abschnitt verschieben und statt vorher Ara verwenden Dann werde ich die Position ändern. Anstatt Top zu verwenden, gebe ich hier Bottom ein. Außerdem werde ich dieses Element nach rechts verschieben. Hier gehe ich zu 100% nach rechts und stelle diesen Wert ein Außerdem müssen wir einige Änderungen am Over-Selektor vornehmen , anstatt vorher zu verwenden Ich werde danach verwenden, anstatt den LED-Wert zu verwenden , ich werde rechts verwenden Ich werde diese Datei einrichten. Ich habe diese Datei eingerichtet Wenn ich meinen Custer darauf halte, können Sie das Ergebnis sehen Jetzt werde ich auf die gleiche Weise den linken und den rechten Seitenrand erstellen wähle ich wieder Dafür wähle ich wieder diesen Abschnitt aus und kopiere ihn und füge ihn hier ein. Diesmal verwende ich Span, anstatt die Schaltfläche zu verwenden. Auf die gleiche Weise werde ich den leeren Inhalt erstellen, nur um die Position und dann die Höhe zu ändern. Dieses Mal verwende ich vier Pixel pro Woche, vier Pixel und eine Höhe von 100%. Dann werde ich den höchsten Wert ändern. Anstatt Null zu verwenden, werde ich -100% verwenden Und dann ändere ich den Wert von links nach rechts, von links nach rechts Ich werde diesen Wert auf Null setzen und diese Datei setzen. Nachdem wir diese Datei gesetzt haben, platzieren wir dieses Element hier. Jetzt können Sie sehen, dass es sich über dem Button befindet, die Linie über dem Button. Sie können es auch feststellen. Sie können auch feststellen, dass es auf der rechten Seite dieser Taste abgespielt wird, da wir die rechte Position Null verwenden. Wenn Sie jetzt mit der Maus über diese Schaltfläche fahren, möchte ich zu ihrer ursprünglichen Position zurückkehren Ich möchte sagen, dass ich es von oben auf Null setzen möchte. Also werde ich den Her-Selektor für diese Schaltfläche erstellen, also Taste, Doppelpunkt, Hover, Leertaste , Span, Doppelpunkt davor Dann im Carlss, dann in der Autopause, ich nehme den Top-Top-Wert, ich mache Null Von oben möchte ich es auf Null setzen. Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, können Sie hier das Ergebnis sehen. Wenn ich mein Auto auf dieses Element öffne, kann man das Ergebnis sehen, wie das vorherige Pseudoelement auf der rechten Seite nach unten an seiner eigenen Stelle steht Jetzt müssen wir auf die gleiche Weise das andere Element für die linke Seite erstellen Ich werde diesen Abschnitt duplizieren, den gesamten Abschnitt, und anstatt vorher zu verwenden, werde ich danach verwenden. Um den endgültigen Rand zu erstellen, verwende ich nicht die oberen 100%, sondern den unteren Rand. Unten, 100%. -100%, statt rechts verwende ich links und stelle diese Datei Nachdem ich diese Datei eingestellt habe, seht ihr hier das Ergebnis. So erstellen wir es. Jetzt müssen wir es auf den Kopf stellen , wenn meine Karten drauf sind. Dafür möchte ich statt vorher ein nachträgliches Element mit Hover-Effekt verwenden Anstatt top zu verwenden, werde ich bottom verwenden Ich werde die Datei einrichten. Nachdem ich diese Datei eingerichtet habe, können Sie das Ergebnis sehen. Wenn ich den Cursor auf dieser Schaltfläche öffne, können Sie sehen, dass alle Ränder an ihre ursprüngliche Position zurückkehren, wenn Sie mit der Maus darauf zeigen Das Letzte, was wir tun müssen, ist, den Überlaufbereich zu verstecken Wir müssen diese Grenzen verstecken, also müssen wir Overflow Hidden verwenden Im Inneren des Knopfkopfes werde ich zu pervertierend verwenden Der Überlauf ist versteckt. Außerdem werde ich den Hintergrund transparent machen. Und ich werde diese Datei einrichten. Jetzt, nachdem ich diese Datei eingerichtet habe, kann ich das Ergebnis sehen, wenn ich auf meinen Cutter auf diese Schaltfläche drücke. Auf diese Weise können wir alle Ränder von den vier verschiedenen Seiten aus verschieben und erweitern alle Ränder von den vier verschiedenen Seiten aus den vier verschiedenen Seiten und so einen schönen Hover-Effekt mit der Schaltfläche erzielen Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf unser nächstes Projekt. 19. 2 Cut-Button-Effekte: Hallo Leute, schön, dass ihr wieder da seid. Ich bin wieder einmal mit einem neuen CSS-Hover-Effekt für Project Tate Und heute werden wir in diesem Projekt diese wunderschöne Hover-Animation zum Ausschneiden von Schaltflächen erstellen diese wunderschöne Hover-Animation zum Ausschneiden von Schaltflächen Hier seht ihr zwei Karten auf dem oberen und dem unteren Botter Und wenn ich mit der Maus drüber fahre, ist es, wie ihr sehen könnt, mit schwarzer Hintergrundfarbe bedeckt Außerdem hat es sich mit der Textfarbe geändert. Schauen wir uns also an, wie wir diesen schönen Button-Hover-Effekt erzielen können diesen schönen Button-Hover-Effekt erzielen Wie Sie nebeneinander sehen können, öffne ich meinen Visual Studio-Code-Editor und meinen Browser mit Live-Servererweiterung und erstelle bereits ein HTML-Dokument mit dem Namen Index Dot HTML Damit erstelle ich bereits eine Stildatei mit dem Namen Style Dot CSS Ich verlinke diese Datei mit diesem Dokument. Dann in diesem Body-Tag. Zuerst nehme ich in mein Body-Tag ein Anker-Tag. Dann nehme ich in dieses Anchor-Tag ein Span-Tag. Span und in meinem Anker-Tag ein Button vom Typ Hämo. Nicht das untere Etikett, nur der Button. Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet hatte, sah sie so aus. Jetzt müssen wir in die Style-CSS-Datei springen und zuerst müssen wir diese Schaltfläche in der Mitte dieser Seite ausrichten . Außerdem werde ich die Hintergrundfarbe ändern. Hier werde ich zuerst den Körper des Körperteils stylen. Dann werde ich bei der Kalibrierung zuerst die Körpergröße verwenden Ich werde Höhe 100 (Viewport height) zuweisen. Dann werde ich diese Wahrscheinlichkeit zuweisen. Flocken anzeigen. Inhalt begründen, Inhalt in der Mitte begründen. Richten Sie die Artikel auch mittig aus. Dann sage ich Schriftfamilie. Schriftfamilie, ich werde die Schrift Aerial verwenden. Danach werde ich mich im Überlauf verstecken. Überlauf versteckt. Ich werde diese Datei einrichten A Um diese Datei einzustellen, wie Sie sehen können, haben wir sie erfolgreich ausgerichtet, aber in der Mitte dieser Seite. Als Nächstes gestalte ich das Anker-Tag. A, dann in den Kalibraten, der ersten Eigenschaft, werde ich Textdekoration verwenden Textdekoration, ich möchte die Unterstreichung entfernen, also möchte ich keine sagen Das werde ich mit 160 Pixeln einstellen. Dann stelle ich die Höhe ein, Höhe beträgt nur 60 Pixel. Als Nächstes werde ich Farbe verwenden. Farbe und hier stelle ich die Farbe Schwarz ein. Danach sage ich Zeilenhöhe. Linie, Höhe, ich werde es auf 60 Pixel einstellen. Dann richte ich den Text in der Mitte dieses Schaltflächentyps aus : Text ausrichten, Text zentrieren. Danach mache ich es groß. Der Text wird groß geschrieben, irgendein Tipp: Text transformieren, Text transformieren, ich werde ihn groß schreiben lassen Als Nächstes definiere ich die Schriftgröße. Schriftgröße, ich werde sie auf 25 Pixel einstellen. Danach definiere ich die Position, die Position, ich mache sie relativ, und für die Glätte verwende ich die Übergangseigenschaft Übergang, das gesamte Element und unser Übergangszeitpunkt sind 0,2 Sekunden Ich werde diese Datei einrichten. Nachdem wir diese Datei eingerichtet haben, sieht unser Button so aus. Als Nächstes werde ich auf das Span-Tag abzielen , das sich im Anker-Tag befindet, Subtyp A, Span. Dann werde ich in den Auto-Avasen die Position definieren Position, ich werde sie absolut machen. Danach definiere ich die Breite und Breite zu 100%. Dann definiere ich die Höhe, die Höhe ebenfalls zu 100%. Danach werde ich die Position definieren. Ich möchte es in der oberen linken Ecke platzieren, irgendein Typ für den höchsten Wert, ich werde Null übergeben. Für später werde ich auch Null übergeben. Dann werde ich eine Hintergrundfarbe definieren. Hintergrundfarbe. Im Moment werde ich rote Farbe verwenden. Ich denke zum Beispiel, dann werde ich die Grenze definieren. Rahmen, und ich möchte zwei Pixel, zwei Pixel verwenden, und unser Rahmen ist Solid Border Solid Solider Rand. Durchgehend, und unsere Rahmenfarbe ist schwarz. Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet hatte, sah sie so aus. Im Grunde will ich diesen roten Hintergrund nicht, ich will nur den Rand, also werde ich diesen Löwen auskommentieren, brauche ihn nicht. Ich werde diese Datei einrichten. Als Nächstes müssen wir die Ausschnitte erstellen , die am oberen und unteren Rand vorhanden sind, und wir werden Before Pseudo-Lamin verwenden, um das zu erstellen Hier setze ich den Span Colon vor das Pseudo-Element Dann werde ich innerhalb der ersten Eigenschaft den Inhalt verwenden Inhalt ist ein leerer Inhalt. Dort werde ich die Position definieren. Position, ich werde sie absolut machen. Danach definiere ich Breite, Breite, hier verwende ich die Breite für acht Personen. 8% dieser Schaltfläche. Als Nächstes definiere ich Höhe, Höhe und erhöhe die Höhe, also verwende ich 500% 500% dieser Button-Höhe. Als Nächstes definiere ich eine Hintergrundfarbe. Hintergrundfarbe, ich werde die rote Farbe Rot verwenden. Und ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, sieht sie so aus. Jetzt werde ich dieses Element auf dieser Schaltfläche zentrieren Dafür gehe ich zu Value, Top, über und ich werde 50% überschreiten Als Nächstes definiere ich die Lippenposition, p ebenfalls 50%. Dann verwende ich Transform Property, transforme Ich übergebe Translate Value, Translate und -50% Für XX und für xs -50%. Ich werde diese Datei einrichten. Ich akzeptiere diese Datei. So sah es aus. Wir haben dieses Element erfolgreich in der Mitte dieser Schaltfläche ausgerichtet . Jetzt befindet sich der rote Grund in der Mitte des Buttons. Aber das Problem ist, dass es vor dem Text steht und ich möchte, dass der Text davor erscheint Ich werde in den Span-Selektor springen und hier verwende ich Z-Index, Z-Index, ich übergebe minus eins und setze diese Datei Wie Sie sehen , löst diese Datei das Problem. Um den Schneideffekt zu erzielen, werde ich dieses Element dann drehen Hier tippe ich, drehe und drehe es um bis zu 60 Grad. Ich werde diese Datei unterschreiben Ich glaube, ich werde es drehen und ich werde es in entgegengesetzte Richtungen drehen, also werde ich es auf -60 Grad stellen und nachdem Sie diese Datei eingestellt haben, können Sie das Ergebnis sehen Wir drehen dieses Element gegen den Uhrzeigersinn. Lassen Sie uns nun am Schwebeeffekt arbeiten. Wenn ich mit der Maus über diesen Link fahre, möchte ich die Breite dieses roten Elements vergrößern Ich möchte es zu 100% statt zu 8% machen, damit wir den Link vollständig vertuschen Aber vorher füge ich in meinem Span-Tag Transition All Transition All hinzu und ich füge 0,22 Sekunden hinzu Danach werde ich einen Hover-Selektor vor Spentag erstellen Ein Colon-Hover. Leertaste, Span, dann binde ich vorher Doppelpunkt, Doppelpunkt. Dann in den Kalibraten. Zuerst werde ich das Gras ausbreiten, wenn ich meine Autos drauflasse Wir, manche mit 100 pro Stück. Danach werde ich die Hintergrundfarbe ändern. Hintergrundfarbe, ich werde sie schwarz machen. jetzt, nachdem ich diese Datei eingerichtet habe, Wenn ich jetzt, nachdem ich diese Datei eingerichtet habe, mit der Maus über diesen Link fahre, können Sie das Ergebnis sehen Es wurde auf 100% erweitert und macht es außerdem schwarz, wenn ich mit der Maus darauf fahre Aufgrund dieser schwarzen Farbe können wir den Text nicht mehr sehen Wenn ich mit der Maus über diesen Link fahre, möchte ich ihn weiß machen Ich werde den Anker Hover binden. Dann werde ich im farbigen Kleid die Farbe weiß machen Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, kann ich das Ergebnis sehen, wenn ich mit meiner Farbe darauf fahre Damit möchte ich beim Bewegen des Mauszeigers diesen roten Hintergrund drehen Ich möchte es auf 60 Grad bringen, wenn ich mit der Maus darüber fahre. Positive 60 Grad. Ich werde diese Zeile kopieren und hier einfügen. Ich ändere negative 60 Grad auf 60, positive 60 Grad und stelle diese fünf ein. Wann immer ich mit der Maus über diesen Link fahre, wie Sie feststellen können, steht der rote Hintergrund bei 60 Grad Und das einzige, was spät ist, wir müssen den roten Hintergrund ändern und ihn weiß machen Aus diesem Grund werden wir diese beiden Kürzungen erreichen. Ich werde in den Bereich vor den Elementen springen und ihn von Rot auf Weiß umstellen. Ich werde diese Datei einrichten. Nachdem Sie diese Datei eingerichtet haben, können Sie hier die Ausschnitte sehen. Außerdem werde ich in den Anctag-Selektor springen und zwar Ich werde sagen, es läuft über, überläuft Hitze. Atomic Overflow ist versteckt, wenn ich diese Datei einstelle, wie Sie sehen können, gibt es ein Problem damit, weil ich denke, ja, wir müssen Box Sizing verwenden Wir verwenden dafür kein Box-Sizing. Ich verwende den Universal-Selector-Stern und innerhalb des Quadrats im Calibra gebe ich Boxgröße ein Boxgröße Boerbx. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Jetzt schneiden mir die beiden den inneren Knopf ab. Wenn ich meinen Curl draufhalte, kannst du das Ergebnis sehen. So animiert es diesen Button. Im Grunde vergrößert es die Breite dieses Before-Elements. Anstatt 8% erhöht es es um bis zu 100% und sorgt für diesen schönen Button-Hover-Effekt Ich hoffe, ich beleidige dich nicht. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Projekt 20. CSS 3D Flip on Hover Pure CSS3 3D Button Hover-Effekte: Hallo, Leute. Schön , dich wieder zu sehen. Ich bin wieder mit einem anderen Projekt zurück. Und heute werden wir in diesem Projekt diesen wunderschönen Button-Hover-Effekt erzeugen diesen wunderschönen Button-Hover-Effekt Wir werden diesen Hover-Effekt mit drei D-Tasten erstellen. Wie Sie sehen können, gibt es eine Schaltfläche. Wenn ich meinen Cursor darauf halte, kannst du das Ergebnis sehen. Hier siehst du den gegenüberliegenden Teil dieses Buttons. Es drückt den Knopf und gibt einen neuen Geschmack zurück. Klicken Sie hier. Es ist eine Animationsschaltfläche mit ihrem Effekt, aber sie ist ziemlich fortgeschritten. also, ohne Ihre Zeit zu verschwenden, Lassen Sie uns also, ohne Ihre Zeit zu verschwenden, mit dem Praktischen beginnen und sehen, wie es funktioniert Wie Sie sehen können, öffne ich Seite an Seite meinen Visual Studio Creator und meinen Browser mit der LP-Servererweiterung Außerdem können Sie sehen, dass ich bereits ein HTML-Dokument mit dem Namen index dot steml erstellt ein HTML-Dokument mit dem Namen index dot steml Damit erstelle ich eine CSS-Datei, Style Dot CSS, und wie Sie sehen können, verknüpfe ich diese Style-Datei mit diesem ETML-Dokument Also erstelle ich zuerst ein NCat-Tag innerhalb des Body-Tags, Typ A. Standardmäßig möchte ich es nicht umleiten, also möchte ich das has-Tag verwenden Jetzt werde ich in diesem Anker-Tag drei neue Span-Tags erstellen span class, front Dann werde ich dieses Span-Tag auf Time duplizieren. Unser erster Span-Klassenname steht vorne und unser zweiter Span-Klassenname ist Center, Sum Type, Center. Unser letzter Span-Klassenname ist SDType B. Dann gebe ich auf der Vorderseite Click und auf der Rückseite Haar Für unser Center Span Tag möchte ich es leer lassen. Wenn ich diese Datei einstelle, wie Sie sehen können, wie Sie in meinem Browser sehen können, hier wird sie gedruckt, klicken Sie hier, obere linke Ecke dieses Browsers. Ich habe unseren stabilen Teil erfolgreich erledigt. Gehen wir zur CSS-Datei und gestalten wir diese Seite. Zuerst werde ich unseren Body-Tag stylen , irgendeinen Typ Körper. In der Klasse werde ich Marine Zero, Barzin Null setzen, und ich möchte auch Padding Null setzen Dann verwende ich die Schriftfamilieneigenschaft SoTypeFont family , Sansa A Ich werde unserem Körper eine dunkle Hintergrundfarbe geben. Hintergrund. Und ich werde Hexa VH, 26, 26, 26 verwenden Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Wie Sie in meinem Browser sehen können, ist unsere Hintergrundfarbe jetzt dunkelgrau, und jetzt müssen wir dieses Anker-Tag stylen. Innerhalb des Anker-Tags haben wir insgesamt drei Pan-Tags. Lassen Sie uns also das Anker-Tag stylen. Also Schiefer, A, in der Aussparung von Cali. Zuerst verwende ich Position, Eigenschaft, Position. Absolute Position. Jetzt möchte ich dieses Anker-Tag in der Mitte dieser Seite ausrichten. Dafür verwende ich Top Property, Top 50%. Dann werde ich die Eigenschaft P verwenden. P 50%. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Wie Sie sehen können, richtet es unser Anker-Tag in der Mitte dieser Webseite aus. Als Nächstes verwende ich die Transform-Eigenschaft. Also tippe, transformiere hier, transformiere. Transformieren, übersetzen. Wie Sie wissen, können wir mit der Übersetzungsmethode ein Element gemäß XXs und YX von seiner aktuellen Position verschieben gemäß XXs und YX von seiner aktuellen Position Für XXs werde ich -50% bestehen, für YxS werde ich auch Dann werde ich zu diesem Encer-Tag „gegrilltes Gras “ sagen. Zuerst werde ich Gras binden. Mit 200 Pixeln. Und dann sage ich es Höheneigenschaft, Höhe, Höhe, 60 Pixel. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Und dann sage ich Text Align Center. Text mittig ausrichten. Wie Sie wissen, werden wir eine 3-D-Uber-Taste erstellen. Dafür müssen wir eine andere Eigenschaft verwenden, nämlich Transformationsstil, Sumo-Typ, Transformationsstil Im Transformationsstil verwende ich Preserve Three D Value Diese Eigenschaften geben an, wie verschachtelte Elemente im Drei-D-Raum gerendert werden Wie Sie wissen, müssen wir diese Eigenschaft zusammen mit der Transform-Eigenschaft verwenden diese Eigenschaft zusammen mit der Transform-Eigenschaft Ohne Transformationseigenschaft können wir diese Eigenschaft nicht verwenden. Wir haben in unserer Tutorial-Reihe davon erfahren. Dann verwende ich eine weitere Eigenschaft, nämlich Prospective Prospective 1.000 Pixel. Außerdem sage ich „ Transformieren“ oder „In Position“, Transformieren“ oder „Z-Mittelpunkt“. Wenn ich diese Datei einstelle, wie Sie sehen können, passt sie unseren Inhalt jetzt perfekt in die Mitte dieser Webseite. Wir können diese prospektive und dreidimensionale Transformation nicht verstehen und dreidimensionale Transformation , weil wir unser Span-Objekt nicht stylen. Jetzt müssen wir unser Ersatzobjekt stylen. Wie Sie sehen können, haben wir insgesamt drei Span-Objekte. Lassen Sie uns das gesamte Objekt auf einmal stylen. Dafür wähle ich das Span-Tag aus. Span. Ist das Kalis? Ich gebe zuerst Position Property Absolute Position. Als Nächstes müssen wir dieses Span-Tag so ausrichten, dass es bei Null über Null liegt. Und außerdem sage ich Größe und Gewicht, Größe, 100%. Gewicht, 100%. Und dann werde ich den Display-Block verwenden. Außerdem werde ich den Text innerhalb des Span-Tags ausrichten . Also gebe ich Text Align Text Align Center ein. Und dann werde ich die Zeilenhöhe, Zeilenhöhe, 60 Pixel einstellen . Wenn ich diese Datei einstelle, können Sie hier sehen, dass sie unseren Text überlappt. Als Nächstes stelle ich die Schriftgröße auf 24 Pixel ein. Außerdem werde ich eine Hintergrundfarbe für das Span-Tag festlegen . Hintergrund. Ich werde RGVAvalu RGB verwenden Wie Sie wissen, müssen wir zuerst den roten Wert und dann den grünen Wert als letzten blauen Wert übergeben Damit müssen wir Alpha Val bestehen. Wir können die Transparenz mit Alpha Val kontrollieren. Deshalb müssen wir diese Ulme verwenden. Also hier, ich gebe 255 für Rot, 255. Und dann werde ich noch einmal bestehen, 255 für Grün und auch 255 für Blau. Und für unseren Alpha-Wert werde ich 0,10 überschreiten Und jetzt müssen wir den Transformationsstil ändern . Also werde ich den Transformationsstil verknüpfen drei D beibehalten. Jetzt möchte ich nicht die Rückseite unseres Span-Tags zeigen Wenn es rotiert, möchten wir nicht, dass die Rückseite angezeigt wird. Dafür müssen wir Apoparty verwenden und das weißt du, das das Backspace-Sichtbarkeit, und ich werde einen versteckten Wert festlegen, weil ich die Rückseite nicht einblenden möchte Dann lege ich den Randradius des Span-Tags fest, Randradius, 30 Pixel oder die nächste Eigenschaft wird Randradius, transformiert . Als Nächstes möchte ich den Text in einen Großbuchstaben umwandeln. Dafür verwende ich die Tex-Transformationseigenschaft, verwendet Transformation , Großbuchstaben Als Nächstes werde ich unserem Text eine Farbe zuweisen. Farbe Weiß. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Damit möchte ich sagen, dass es sich um eine Übergangseigenschaft handelt. Übergang. 1 Sekunde. Wie Sie wissen, haben wir insgesamt drei Span-Objekte in der Katzenmarke. Ich werde das gesamte Span-Tag anders transformieren. Zuerst werde ich den vorderen transformieren und dann werde ich den hinteren transformieren. Als letztes werde ich die mittlere transformieren, und wir werden die Transformation mit der ausgewählten Option Her ausführen . Kehren wir zur CSS-Datei zurück und beginnen wir mit unserem ersten Span-Tag. Ich werde Span Dot Front eingeben. Dann verwende ich innerhalb der Aliase die Transformationseigenschaft Transform, Transform, Transform, Rotate, X, und ich möchte sie um Null DT drehen Damit möchte ich es in die Richtung von Zdx bewegen. Also werde ich Translate ZT Pixel eingeben. Wenn ich diese Datei einstelle, können Sie das Ergebnis nicht sehen, da ich diese Transformation durchführen möchte wenn ich mit dem Mauszeiger auf diese Schaltfläche fahre Jetzt möchte ich diesen Knopf drehen, wenn ich darauf rausche. Dafür müssen wir einen Her-Selektor erstellen. Also werde ich diese Zeile duplizieren und mit einem Bindestrich und dem Doppelpunkt über die Maus fahren Bindestrich und dem Doppelpunkt über die Maus Wenn ich also den Mauszeiger bewege, möchte ich unser vorderes Span-Tag um minus 18d drehen Wenn ich diese Datei einstelle und dem Mauszeiger darauf fahre, können Sie das Ergebnis sehen Sie können sehen, wie sich unser erstes Span-Tag um minus 180 Grad dreht. Das Gleiche müssen wir für unser Backspan-Tag tun. Also werde ich diesen Code auswählen und wir bekommen diese Zeile. Also hier gebe ich Span Dot B ein. Standardmäßig möchte ich ihn um 180 Grad drehen und Transitpixel mit demselben Wert verwenden. In unserem Hober-Selektor möchte ich es um Null DD, zurück drehen und ich möchte es um Null drehen Wenn ich diese Datei eingestellt habe und Hobermcas drauf sind, kannst du jetzt den rotierenden Drei-D-Effekt sehen Jetzt möchte ich eine Hintergrundfarbe für unser Center Span Tag festlegen für unser Center Dieser. Dafür gebe ich Span Dot Center ein. In den Aliras werde ich die Hintergrundeigenschaft verwenden. Hintergrund, und ich werde eine Verlaufsfarbe verwenden und ich werde einen linearen Farbverlauf verwenden Und ich werde die Lippenrichtung verwenden. Also möchte ich dazu übergehen. Oma, und jetzt benutze ich Hexa Color Val hat Tag, C 30 1a5b Es hat eine rosa Farbe und unsere nächste Farbe hat das Tag 7129 BD. Es hat eine violette Farbe. Wenn ich diese Datei ablege, können Sie das Ergebnis sehen. Nun möchte ich für unser Center Span-Objekt die Sichtbarkeit der Rücktaste aktivieren Ich gebe Backpace visibility ein und verwende visual Value Dann erstelle ich den Over-Selektor für unser Center Span Ich werde das Front-Schlüsselwort entfernen und Center eingeben Für Rotationen verwende ich minus 180. Aber für Translate St werde ich Null Pixel verwenden Wenn ich diese Datei und Huber Mikaza auf diese Schaltfläche setze, kann man den Drei-D-Effekt sehen Wir haben also erfolgreich drei D-Flip-Huber-Buttons erstellt. Ich hoffe dir gefällt dieses Projekt. Danke, dass du dir diese DVD angesehen hast. Seien Sie gespannt auf unsere nächste Übung.