Detailliertes Beispiel für Mouse-Over-Button-Spezialeffekte basierend auf CSS3-Animation

Ein kurzes Tutorial

Hierbei handelt es sich um eine Reihe von Mouseover-Animationseffekten, die mithilfe von CSS3-Animationen erstellt wurden. Dieser Satz von Mouseover-Schaltflächenanimationen verfügt über 13 Endeffekte, die alle durch Pseudoelemente von Schaltflächen und CSS3-Animationen erstellt werden.

Demo ansehen Laden Sie das Plug-in herunter

Anleitung zur Verwendung it

HTML-Struktur

Dieser Effekt verwendet Hyperlinks zum Erstellen von Schaltflächen. Beispielsweise der HTML-Code Der erste Swipe-Effekt lautet:

<a class="btn-0" href="#">Swipe</a>

CSS-Stil

Der Einfachheit halber sind die Spezialeffekte ausgenommen , < Alle Elemente außer em>, , und

html *,
html *:before,
html *:after {
  box-sizing: border-box;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
html i, html em,
html b, html strong,
html span {
  -webkit-transition: none;
  transition: none;
}

　 Legen Sie dann einen gemeinsamen Stil für die Schaltfläche fest.

a {
  text-decoration: none;
  line-height: 80px;
  color: black;
}
[class^="btn-"] {
  position: relative;
  display: block;
  margin: 20px auto;
  width: 100%;
  height: 80px;
  max-width: 250px;
  text-transform: uppercase;
  overflow: hidden;
  border: 1px solid currentColor;
}

Verwenden Sie in der ersten DEMO das :before-Pseudoelement der Schaltfläche, um einen dunkelvioletten Schieberegler zu erstellen. Der Schieberegler ist absolut positioniert und befindet sich links von der Schaltfläche. Seine Breite beträgt zu Beginn 0.

.btn-0 {
  color: #9a3789;
}
.btn-0:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 80px;
  background: #520c46;
}

Die Schaltfläche wechselt zu Weiß, die Breite des :before-Pseudoelements ändert sich von 0 auf 100 %.

.btn-0:hover {
  color: #e1c4dc;
}
.btn-0:hover:before {
  width: 250px;
}

Wenn der Benutzer auf die Schaltfläche klickt, ändern Sie die Hintergrundfarbe der Schaltfläche in ein helleres Lila.

.btn-0:active {
  background: #881474;
}

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für Mouse-Over-Button-Spezialeffekte basierend auf CSS3-Animation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!