Verwenden Sie CSS3, um den Code für dynamische Spezialeffekte beim Hovern von Schaltflächen zu implementieren

Wir haben vorgestellt, wie man mit den CSS3-Spaltenreihenattributen ein Wasserfalllayout erstellt. Interessierte Freunde können sich darüber informieren ~

Schauen wir uns zunächst das Wirkungsdiagramm an

Schauen wir uns an, wie dieser Effekt erzielt wird:

Definieren Sie zunächst im HTML-Teil einen Div-Container, um die Schaltfläche zu umschließen, und verwenden Sie in der Schaltfläche ein Tag-Paar, um den Schaltflächentext aufzunehmen.

<div id="glänzender Schatten">
 <button><span>Mit der Maus darüber fahren</span></button>
</div> 

Beginnen Sie dann mit der Definition von CSS-Stilen zur Änderung: Passen Sie den Layout-Stil, den Farbbereich

#glänzender-Schatten {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
  Höhe: 100vh;
  Hintergrund: #1c2541;
}
Taste {
  Rand: 2px durchgehend weiß;
  Hintergrund: transparent;
  Texttransformation: Großbuchstaben;
  Farbe: weiß;
  Polsterung: 15px 50px;
  Gliederung: keine;
}
Spanne {
  Z-Index: 20;
} 

Erstellen Sie als Nächstes eine blinkende Überlagerung:

Verwenden Sie den :after-Selektor, um ein transparentes Rechteck zu erstellen und es absolut relativ zur Schaltfläche zu positionieren.

Taste {
  Position: relativ;
}
Schaltfläche:nach {
    Inhalt: '';
    Anzeige: Block;
    Position: absolut;
    Hintergrund: weiß;
    Breite: 50px;
    Höhe: 125px;
    Deckkraft: 20%;
}

Im endgültigen Effekt blitzt ein geneigtes Rechteck auf. Daher fügen wir eine Transformation hinzu: „Rotate(-45deg);“ Stil

Schaltfläche:nach {
    transformieren: drehen (-45 Grad);
}

Verwenden Sie die Attribute top und left, um die Position des Rechtecks ​​zu steuern

Schaltfläche:nach {
    oben: -2px;
    links: -1px;
} 

Schließlich wird der blinkende Animationseffekt beim Hovern der Schaltfläche realisiert

Da es sich um einen Hover-Effekt handelt, müssen wir den Selektor :hover verwenden; wir müssen die Position des Rechtecks ​​festlegen, wenn die Maus darüber schwebt

Schaltfläche:Hover:nach {
  links: 120 %;
}

Dieser plötzliche Positionswechsel ist nicht der gewünschte Effekt. Wir können das Übergangsattribut verwenden, um einen Übergangseffekt hinzuzufügen. Da dieses Attribut ein neues Attribut in CSS3 ist, müssen wir ein Präfix hinzufügen, um mit anderen Browsern kompatibel zu sein.

Schaltfläche:Hover:nach {
  links: 120 %;
  Übergang: alle 600 ms kubisch-bézier (0,3, 1, 0,2, 1);
   -webkit-transition: alle 600 ms kubischer Bézier (0,3, 1, 0,2, 1);
} 

Es ist im Großen und Ganzen erreicht und bedarf einiger Modifikationen.

Wenn Sie innerhalb des Schaltflächenbereichs nur eine rechteckige Überlagerung anzeigen möchten, können Sie dem Schaltflächentag den Stil overflow: hidden; hinzufügen.

Taste {
  Überlauf: versteckt;
} 

Es ist ersichtlich, dass es immer noch ein Problem mit der Position des Overlays gibt. Im Endeffekt wird das Overlay am Anfang nicht angezeigt. Wir verwenden die Attribute oben und links, um es anzupassen.

Schaltfläche:nach {
    oben: -36px;
    links: -100px;
} 

Oben finden Sie Einzelheiten zur Verwendung von CSS3 zum Erzielen dynamischer Effekte beim Blinken von Schaltflächen beim Hovern.

Dies ist das Ende dieses Artikels über die Verwendung von CSS3 zum Erzielen von Button-Hover- und blinkenden dynamischen Effekten. Weitere verwandte CSS3-Button-Hover- und blinkende dynamische Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder weiter unten in den verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!