Reines CSS3 zur Erzielung einer Mouseover-Schaltflächenanimation, Teil 2

Haben Sie nach den letzten beiden Kapiteln ein neues Verständnis für die schwebende Schaltflächenanimation?

In den beiden vorhergehenden Kapiteln lag der Schwerpunkt hauptsächlich auf dem Hintergrund, während sich dieses Kapitel auf die Randanimationseffekte konzentriert. Und dieses Kapitel (Button-Gruppe: Interessante CSS-Button-Animation, Einführung in die CSS-Welt) endet hier. Die ersten drei Abschnitte werden am Ende dieses Kapitels zusammengefasst.

Machen wir mit dem Thema dieses Abschnitts weiter. Schauen Sie sich zunächst das Effektbeispiel an:

Freunde, die die ersten beiden Abschnitte gelesen haben, müssen sich den Quellcode unten möglicherweise nicht ansehen, um zu wissen, wie er implementiert wird. Sie können es zuerst selbst ausprobieren und dann zurückkommen, um einen Blick darauf zu werfen. Vielleicht sind die Implementierungsmethoden unterschiedlich, aber solange sie implementiert werden können, sind sie alle gute Methoden.

Das folgende Beispiel erklärt

Beispiel 1

<button class="btn-1">Schaltfläche 1</button>

<Stil>
Taste{
  Position: relativ;
  Breite: 100px;
  Höhe: 40px;
  Hintergrund: keiner;
  Cursor: Zeiger;
  Farbe: #fff;
  Rand: keiner;
  Rand rechts: 20px;
  Rand unten: 20px;
}
Schaltfläche: vorher, 
Schaltfläche:nach{
  Position: absolut;
  Inhalt: '';
  Breite: 100 %;
  Höhe: 100%;
  Z-Index: 10;
  Übergang: alle 0,5 s;
}
/* Schaltfläche 1 */
.btn-1:vorher, .btn-1:nachher{
  Höhe: 2px;
  links: 50%;
  Breite: 0;
  Hintergrund: #f13f84;
  transformieren: übersetzenX(-50%);
}
.btn-1:vor{
  oben: 0;
}
.btn-1:nach{
  unten: 0;
}
.btn-1:hover:vorher, 
.btn-1:hover:nach{
  Breite: 100 %;
}
</Stil> 

Analyse:

1. :before oben ist 0, :after unten ist 0, Höhe height: 2px , Breite ist 0 und horizontal zentriert

2. Unter dem Einfluss der absoluten Positionierung ändert :hover die Breite von :before und :after um den oben gezeigten Effekt zu erzielen.

Beispiel 2

<button class="btn-2">Schaltfläche 2</button>

<Stil>
...
/* Die oben genannten gängigen Stile werden hier weggelassen*/
.btn-2{
  Hintergrund: #333;
  Höhe: 36px;
}
.btn-2:vorher, 
.btn-2:nach{
  Breite: 10px;
  Höhe: 10px;
  Hintergrund: #f13f84;
  Mix-Blend-Modus: Farbton;
}
.btn-2:vor {
  links: -2px;
  oben: -2px;
}
.btn-2:nach {
  rechts: -2px;
  unten: -2px;
}
.btn-2:hover:vor, 
.btn-2:hover:nach{
  Höhe: berechnet (100 % + 4 Pixel);
  Breite: berechnet (100 % + 4 Pixel);
}
</Stil> 

Analyse:

1. :before und :after , 2px hinter dem Button

2. Ändern Sie die Breite und Höhe :before und :after wenn :hover . Hier wird calc() für die Breite und Höhe verwendet.

Mit der Funktion calc() wird der Längenwert dynamisch berechnet.

● Es ist zu beachten, dass vor und nach dem Operator ein Leerzeichen erforderlich ist, zum Beispiel: width: calc(100% - 10px) ;

● Jeder Längenwert kann mit der Funktion calc() berechnet werden;

● calc() unterstützt die Operationen "+", "-", "*", "/".

● calc() verwendet Standardprioritätsregeln für mathematische Operationen.

3. Sie haben vielleicht bemerkt, dass im obigen Bild eine Eigenschaft mix-blend-mode speziell manipuliert wurde. Ihre Funktion besteht hier darin, den Hintergrund der Schaltfläche über :before und :after erscheinen zu lassen.

CSS3 mix-blend-mode -Syntax

Mix-Blend-Modus:normal | Multiplizieren | Bildschirm | Überlagern | Abdunkeln | Aufhellen | Farbig abwedeln | Farbig nachbelichten | Hartes Licht | Weiches Licht | Unterschied | Ausschluss | Farbton | Sättigung | Farbe | Leuchtkraft

Farbtonmodus Der Modus „Farbton“ verwendet zur Farbgebung ausschließlich den Farbtonwert der „Mischfarbe“, während die Sättigungs- und Helligkeitswerte unverändert bleiben.

Auf mix-blend-mode werde ich hier nicht näher eingehen, hoffe aber, ihm später ein eigenes Kapitel widmen zu können.

Beispiel 3

<button Klasse="btn-3">
  <span>Taste Drei</span>
</button>

<Stil>
...
/* Die oben genannten gängigen Stile werden hier weggelassen*/
Schaltflächenspanne:vor, 
Schaltflächenspanne:nach{
  Position: absolut;
  Inhalt: '';
  Breite: 100 %;
  Höhe: 100%;
  Z-Index: 10;
  Übergang: alle 0,5 s;
}
.btn-3{
  Hintergrund: #333;
  Höhe: 36px;
}
.btn-3:vorher, 
.btn-3:nach, 
.btn-3 span:vor, 
.btn-3 span:nach{
  Breite: 10px;
  Höhe: 10px;
  Hintergrund: #f13f84;
  Mix-Blend-Modus: Farbton;
}
.btn-3:vor {
  links: -2px;
  oben: -2px;
}
.btn-3:nach {
  rechts: -2px;
  oben: -2px;
}
.btn-3 span:vor {
  links: -2px;
  unten: -2px;
}
.btn-3 span:nach {
  rechts: -2px;
  unten: -2px;
}
.btn-3:hover:vorher, 
.btn-3:hover:nach,
.btn-3:hover span:vor,
.btn-3:hover span:nach {
  Höhe: 60%;
  Breite: 60%;
} 

Analyse:

1. Beispiel 3 ist eine verbesserte Version von Beispiel 2, bei der die Pseudoklasse span verwendet wird, um die vier Ecken der Schaltfläche zu verbessern

2. Ändern Sie beim :hover einfach die Breite und Höhe der vier Pseudoklassen.

Beispiel 4

<button class="btn-4">Schaltfläche 4</button>

<Stil>
...
/* Die oben genannten gängigen Stile werden hier weggelassen*/
.btn-4{
  Höhe: 34px;
  Rand: 1px durchgezogen #f13f84;
}
.btn-4:vorher, 
.btn-4:nach{
  Breite: 10px;
  Höhe: 10px;
  Rahmenstil: durchgezogen;
  Rahmenfarbe: #f13f84;
}
.btn-4:vor {
  links: -4px;
  oben: -4px;
  Rahmenbreite: 1px 0 0 1px;
}
.btn-4:nach {
  rechts: -4px;
  unten: -4px;
  Rahmenbreite: 0 1px 1px 0;
}
.btn-4:hover:vor, 
.btn-4:hover:nach{
  Höhe: berechnet (100 % + 7 Pixel);
  Breite: berechnet (100 % + 7 Pixel);
} 

Analyse:

1. Beispiel 4 ist eine weitere Implementierung von Beispiel 2, der Unterschied besteht jedoch darin, dass der Schaltfläche ein Rand hinzugefügt wurde

2. :before und :after , um border direkt festzulegen, anstatt background zu verwenden, um den diagonalen Stil anzuzeigen.

Breite: 10px;
Höhe: 10px;
Rahmenstil: durchgezogen;
Rahmenfarbe: #f13f84;
Rahmenbreite: 1px 0 0 1px;

3. Dann :hover .

Beispiel 5

<button class="btn-5">Schaltfläche Fünf</button>

<Stil>
...
/* Die oben genannten gängigen Stile werden hier weggelassen*/
.btn-5{
  Hintergrund: #333;
  Höhe: 34px;
  Rand: 1px durchgezogen #fff;
}
.btn-5:vorher, 
.btn-5:nach{
  Breite: 10px;
  Höhe: 10px;
  Rahmenstil: durchgezogen;
  Rahmenfarbe: #fff;
}
.btn-5:vor {
  links: -4px;
  oben: -4px;
  Rahmenbreite: 1px 0 0 1px;
}
.btn-5:nach {
  rechts: -4px;
  unten: -4px;
  Rahmenbreite: 0 1px 1px 0;
}
.btn-5:hover{
  Rahmenfarbe: #f13f84;
}
.btn-5:hover:vor, 
.btn-5:hover:nach{
  Höhe: berechnet (100 % + 7 Pixel);
  Breite: berechnet (100 % + 7 Pixel);
  Rahmenfarbe: #f13f84;
  transformieren: Y-Drehung (180 Grad);
} 

Analyse:

1. Beispiel 5 unterscheidet sich nur in zwei Punkten von Beispiel 4. Bei :hover dreht sich die Pseudoklasse um 180° und ändert die Rahmenfarbe.

Rahmenfarbe: #f13f84;
transformieren: Y-Drehung (180 Grad);

Beispiel 6

<button Klasse="btn-6">
  <span>Taste Sechs</span>
</button>

<Stil>
...
/* Die oben genannten gängigen Stile werden hier weggelassen*/
.btn-6{
  Überlauf: versteckt;
}
.btn-6:vorher, 
.btn-6:nach, 
.btn-6 span:vor, 
.btn-6 span:nach{
  Hintergrund: linearer Farbverlauf (nach rechts, rgba (0,0,0,0), #f13f84);
  Übergang: alles 2er;
}
.btn-6:vorher, 
.btn-6:nach{
  Breite: 100 %;
  Höhe: 1px;
}
.btn-6:vor {
  oben: 0;
  links: -100%;
}
.btn-6:nach {
  unten: 0;
  rechts: -100%;
}
.btn-6 span:vorher, .btn-6 span:nachher{
  Breite: 1px;
  Höhe: 100%;
}
.btn-6 span:vor {
  unten: -100 %;
  links: 0;
}
.btn-6 span:nach {
  oben: -100%;
  rechts: 0;
}
.btn-6:hover:vor{
  Animation: topA 1s linear unendlich;
  Animationsverzögerung: 0,5 s;
}
@keyframes topA{
  100 %{
    links: 100 %;
  }
}
.btn-6:hover span:nach{
  Animation: rechtsA 1s linear unendlich;
  Animationsverzögerung: 1 s;
}
@keyframes rightA{
  100 %{
    oben: 100 %;
  }
}
.btn-6:hover:nach{
  Animation: bottomA 1s linear unendlich;
  Animationsverzögerung: 1,5 s;
}
@keyframes bottomA{
  100 %{
    rechts: 100%;
  }
}
.btn-6:hover span:vor {
  Animation: leftA 1s linear unendlich;
  Animationsverzögerung: 2 s;
}
@keyframes leftA{
  100 %{
    unten: 100 %;
  }
} 

Analyse:

1. Beispiel 6 ist Beispiel 3 etwas ähnlich, aber es handelt sich um eine verbesserte Version.

2. Außerdem gibt es vier Pseudoklassen, die an der oberen, rechten, unteren und linken Position der Schaltfläche verteilt sind. Die Höhe der oberen und unteren Pseudoklasse beträgt 1 Pixel, die Breite 100 %, die Breite der linken und rechten Pseudoklasse beträgt 1 Pixel, die Höhe 100 % und der Hintergrund ist auf einen linearen linear-gradient eingestellt.

3. Bei :hover bewegt sich die obere Pseudoklasse von der linken -100 %-Position zur linken 100 %-Position; die rechte Pseudoklasse bewegt sich von der oberen -100 %-Position zur oberen 100 %-Position; die untere Pseudoklasse bewegt sich von der rechten -100 %-Position zur rechten 100 %-Position; die linke Pseudoklasse bewegt sich von der unteren -100 %-Position zur unteren 100 %-Position. Stellen Sie dann die Verzögerung für die Ausführung der Animation ein.

Wichtig zu beachten ist, dass die Animations-Verzögerungszeit richtig eingestellt werden muss, da es sonst zu keiner flüssigen Darstellung und zu Verbindungsproblemen kommt.

Beispiel 7

<button Klasse="btn-7">
  <svg Höhe="100%" Breite="100%" xmlns="http://www.w3.org/2000/svg">
    <rect Klasse="Umriss" Höhe="100%" Breite="100%" />
    <div class="text">Knopf Sieben</div>
  </svg>
</button>

<Stil>
...
/* Die oben genannten gängigen Stile werden hier weggelassen*/
.btn-7{
  Position: relativ;
  Farbe: #f13f84;
  Textdekoration: keine;
  Breite: 250px;
  Höhe: 50px;
  Rand: 50px automatisch;
  Überlauf: versteckt;
}
.btn-7 .outline {
  Position: absolut;
  oben: 0;
  links: 0;
  Breite: 100 %;
  Höhe: 100%;
  Strich: #f13f84;
  Strichbreite: 2px;
  Füllung: transparent;
  Strich-Dasharray: 100 500;
  Hub-Schlag-Höhe: 225;
  Übergang: alle 0,5 s;
  Box-Größe: Rahmenbox;
}
.btn-7 .text {
  Position: relativ;
  oben: -35px;
  Zeilenhöhe: 1;
  Buchstabenabstand: 1px;
  Texttransformation: Großbuchstaben;
}
.btn-7:hover .outline{
  Strich-Dasharray: 600 0;
  Hub-Schlag-Höhe: 475;
} 

Analyse:

1. Beispiel 7 ist eine Möglichkeit, alles auszuwählen, svg

2. Beschreibung des SVG-Elements

Das Element <text> wird verwendet, um Text zu definieren

<rect> definiert eine rechteckige Form (Kreis <circle> , Ellipse <ellipse> , Linie <line> , Polylinie <polyline> , Polygon <polygon> , Pfad <path> )

3. Beschreibung des SVG-Attributs

stroke definiert die Farbe einer Linie, eines Textes oder eines Elementumrisses

stroke-width definiert die Stärke einer Linie, eines Textes oder eines Elementumrisses.

Mit stroke-dasharray wird das Muster der gepunkteten Linien des Strichs festgelegt. Hiermit legen Sie die Breite von durchgezogenen und gestrichelten Linien fest. Das heißt, mit oder ohne Länge des Liniensegments.

stroke-dashoffset gibt den Abstand vom Strichmuster zum Anfang des Pfades an

Näheres dazu folgt später in einem gesonderten Kapitel.

Zusammenfassen

Dieses Kapitel (Button-Gruppe: Interessante CSS-Button-Animation, die Sie in die CSS-Welt entführt) endet hier. Zunächst einmal vielen Dank für Ihre Unterstützung.

Was haben Sie aus diesem Kapitel gelernt?

1. Idee, jeder Abschnitt, Beispiele sind von einfach bis schwierig, Schritt für Schritt;

2. Verwendung von CSS-Pseudoelementen :before und :after

3. Layout von HTML-Elementen, horizontale und vertikale Zentrierung von Elementen

4. Was ist der Unterschied zwischen transition und animation ? (Wenn Sie die Antwort wissen möchten, können Sie die historischen Artikel des Herausgebers lesen)?

5. Linearer und radialer Farbverlauf in CSS3

6. Flexible Verwendung der relativen Positionierung und der absoluten Positionierung

7. Bewegung, Verformung, Drehung usw. von transform