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!