Wie kann man eine Grenze zu CSS animieren?

Randfarbe oder Breite mit Übergang für einfache Effekte animieren; 2. Verwenden Sie den Umriss, um Layoutverschiebungen während der Animation zu vermeiden. 3. Simulieren erweiterte Grenzen mit animatierbarem Box-Shadow; 4. Erstellen Sie Zeichnungs- oder bewegliche Randeffekte mit Hintergrundgradienten mit Hintergrundgröße und Übergang; 5. Beschäftigten Sie :: vor oder :: Nach Pseudoelementen für fortgeschrittene, geschichtete Animationen. Jede Methode simuliert kreativ die Grenzanimation, da die direkte Grenzanimation begrenzt ist und ansprechende Effekte ohne JavaScript ermöglicht.

Das Animieren eines Randes in CSS kann Ihren Elementen - wie Schaltflächen, Karten oder Links - subtile, visuelle Effekte verleihen, die sich auf JavaScript verlassen. Während Sie das border nicht direkt auf eine Weise auf eine Weise animieren können, die sich reibungslos anfühlt (z. B. von 0 bis 1PX), gibt es clevere Problemumgehungen mit anderen CSS -Funktionen. Hier sind die effektivsten Methoden:

1. Verwenden Sie border-color mit transition

Wenn Sie eine einfache Farbe oder eine Dicke ändern möchten, können Sie die Randfarbe oder Breite mit CSS -Übergängen animieren.

 .Animated-Border {
  Grenze: 2px fest transparent;
  Übergang: Grenzfarben 0,3s Leichtigkeit;
}

.Animated-Border: Hover {
  Grenzfarbe: #007BFF;
}

✅ Profis : Einfach, weit verbreitet.
❌ Begrenzung : Nicht animiert "Zeichnen" des Randes - nur Farbe oder Breite.

2. Simulation eines Randes mit outline

outline ähnelt der border , aber es nimmt keinen Platz ein, was es einfacher erleichtert, ohne Layout -Verschiebungen zu animieren.

 .Animated-outline {
  Umriss: 2px fest transparent;
  Übergang: Umrissfarb 0,3s Leichtigkeit;
}

.Animated-outline: Hover {
  Umrissfarbe: Rot;
  Umrissbreite: 4px;
}

Nützlich, wenn Sie es vermeiden möchten, das Layout während der Animation zu beeinflussen.

3.. Erstellen eines "wachsenden" oder "Zeichnens" -Rorteneffekts mit box-shadow

Sie können einen leuchtenden oder expandierenden Rand mit box-shadow simulieren, was animatierbar ist.

 .Glow-Borre {
  Grenze: 2PX Solid #007BFF;
  Box-Shadow: 0 0 0 0 RGBA (0, 123, 255, 0);
  Übergang: Box-Shadow 0,3s Leichtigkeit;
}

.Glow-Border: Hover {
  Box-Shadow: 0 0 0 10px RGBA (0, 123, 255, 0,2);
}

Dies gibt den Effekt einer Grenze nach außen.

4. Animationsrand "Zeichnung" -Effekt (wie Schlaganfall)

Verwenden Sie background mit linear-gradient und background-size , um einen Rand zu simulieren, der sich um eine Box (wie ein animierter Schlag) zieht.

 .draw-borre {
  Polsterung: 20px;
  Hintergrund: 
    Lineargradient (weiß, weiß) Polsterkasten,
    linear-Gradient (nach rechts, #007BFF, #00D4ff) Border-Box;
  Grenze: 4px fest transparent;
  Hintergrund-Clip: Padding-Box, Border-Box;
  Übergang: Hintergrundposition 0,5 Sekunden;
}

.DRAW-BORDER: Hover {
  Hintergrundposition: 0 -40px; / * Verschiebungsgradient zum "Zeichnen" von Rand */
}

Alternativ verwendet eine beliebtere Methode background mit einem gestrichelten Gradienten, um einen sich bewegenden Rand zu simulieren:

 .moving-g-corder {
  Polsterung: 20px;
  Grenze: 4px fest transparent;
  Hintergrund: 
    Lineargradient (weiß, weiß) Polsterkasten,
    Wiederholungs-Linie-Gradient (45de, #007BFF, #007BFF 10px, transparent 10px, transparent 20px) Border-Box;
  Hintergrundgröße: 200% 200%;
  Übergang: Hintergrundposition 0,5 Sekunden;
}

.Moving-grennen: Hover {
  Hintergrundposition: 100% 100%;
}

Dies erzeugt einen diagonalen bewegenden Streifeneffekt auf den Rand.

5. Verwenden ::before oder ::after fortgeschrittenen Effekten

Verwenden Sie für die volle Kontrolle ein Pseudoelement, um eine randartige Ebene zu erstellen, die Sie unabhängig animieren können.

 .fancy-Border {
  Position: Relativ;
  Polsterung: 20px;
  Grenze: 2PX Solid #007BFF;
}

.fancy-border :: vor {
  Inhalt: '';
  Position: absolut;
  Einschub: -2px;
  Grenze: 2px fest #ff6b6b;
  Deckkraft: 0;
  Übergang: Deckkraft von 0,3s Leichtigkeit, transformieren Sie 0,3 Sekunden;
  Transformation: Skala (1,05);
  Zeiger-Events: Keine;
}

.fancy-Border: Hover :: vor {
  Deckkraft: 1;
}

Sie können Skala, Rotation oder sogar einen "Doppelgrenze" -Leuchteneffekt animieren.

Zusammenfassung

• Verwenden Sie transition auf border-color oder border-width für einfache Verblassen.
• Verwenden Sie outline , um Layoutverschiebungen zu vermeiden.
• Verwenden Sie box-shadow für die Erweiterung oder leuchtende Grenzen.
• Verwenden Sie background für "Zeichnen" oder bewegende Randeffekte.
• Verwenden Sie ::before / ::after komplexen, geschichteten Animationen.

Jede Methode hat ihren Platz in Abhängigkeit von dem gewünschten Effekt. Für subtile Wechselwirkungen bleiben Sie bei Farbübergängen. Kombinieren Sie für auffällige Animationen Gradienten und Pseudoelemente.

Grundsätzlich animieren Sie den Grenze nicht direkt - Sie werden ihn auf eine kluge Weise fälschen. Und so ist es gemacht.

Das obige ist der detaillierte Inhalt vonWie kann man eine Grenze zu CSS animieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!