Netlify's ordentliche Schaltknopfwirkung neu erstellen

Die Download -Schaltfläche auf der offiziellen Website von Netlify ist einfach und elegant und zieht das Auge an, ohne abrupt zu sein, und der interaktive Effekt ist besonders beeindruckend: Wenn sich die Maus schwebt, erweitert und zeigt die Wörter "Download" erweitert und zeigt an. Ich bemerkte einen kleinen Unterschied in der Anzeige unter Safari, was mein Interesse daran weckte, wie es implementiert wurde. Also habe ich versucht, den Effekt zu reproduzieren und den Abstand zu optimieren.

Die Kerntechnologie liegt in vier Aspekten:

• Verwenden Sie das left Attribut, um das Display und das Verstecken des "Download" -Tags zu steuern.
• Verwenden Sie die padding -Eigenschaft im schwebenden Status der Schaltfläche, um Platz für das Tag "Download" zu schaffen.
• Deklare scale(1, 1) , wenn die Taste schwebt, und stellt sicher, dass der Inhalt während des Bewegens intakt bleibt.
• Verwenden Sie das transition , um padding , background-position und transform der Taste zu animieren, um reibungslose Animationseffekte zu erzielen.

Hier ist ein Code -Beispiel, das keine Stile enthält, um sein Prinzip klarer zu zeigen:

Wenn es schwierig ist zu verstehen, wie es funktioniert, zeigt das folgende Bild, wie das Tag "Download" durch die Schaltfläche durch overflow: hidden und wie es beim Schweben der Maus in Sichtweise gedrückt werden kann.

Verstecken Sie es, indem Sie einen negativen left Wert für das Symbol und das Label "Download" einstellen, und setzen Sie es auf einen positiven Wert zurück, wenn die gesamte Taste schwebt.

 /* Standardstatus*/
.Taste {
    Hintergrund: 
      #F6BC00 
      URL (Daten: Bild/SVG XML; Base64, ...)
      No -Repeat -12PX -Zentrum;
    Überlauf: versteckt;
}

.Button span: nth-Kind (1) {
  Position: absolut;
  links: -70px;
}

/* Hover Status*/
.Button: Hover {
  Padding-Links: 95px;
  Hintergrundposition: 5px-Zentrum;
}

.Button span: nth-Kind (1) {
  Position: absolut;
  links: -70px;
}

Es ist zu beachten, dass das Symbol allein in diesem Zustand in Sichtweise gleitet und genügend Speicherplatz für das "Download" -Tag hinterlässt, aber das Tag beim Schweben außerhalb der Taste schwebt.

Zu diesem Zeitpunkt kann das Hinzufügen von scale(1, 1) zur Schaltfläche den Inhalt vollständig halten.

 /* Hover Status*/
.Button: Hover {
  Padding-Links: 95px;
  Hintergrundposition: 5px-Zentrum;
  Transformation: Skala (1, 1);
}

padding -Wert ist ein Erfahrungswert und ändert sich je nach Faktoren wie Schriftart, Schriftgröße usw.

Schließlich glättet transition den Animationsübergang und verbessert die Benutzererfahrung.

 /* Standardstatus*/
.Taste {
    Hintergrund: 
      #F6BC00 
      URL (Daten: Bild/SVG XML; Base64, ...)
      No -Repeat -12PX -Zentrum;
    Überlauf: versteckt;
    Übergang: Padding .2s Leichtigkeit, Hintergrundposition .2s Leichtigkeit, transformieren .5s Leichtigkeit;
}

Fügen Sie einige detaillierte Änderungen hinzu, wie z. B. abgerundete Ecken, und Sie erhalten einen schönen Knopf.

Das obige ist der detaillierte Inhalt vonNetlify's ordentliche Schaltknopfwirkung neu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!