Implementierung des CSS Fantastic Border Animation-Effekts

Heute habe ich auf der Blog-Site shoptalkshow gestöbert und diese sehr interessante Benutzeroberfläche gesehen:

Ich finde, dass der Stil sehr einzigartig ist, insbesondere einige der Ränder.

Hey, hier ist ein spezieller Artikel zu Rändern, in dem Sie sehen, was Sie mithilfe von CSS mit Rändern machen können.

Das Grenzgrundstück

Wenn man von Grenzen spricht, denkt man als Erstes border . Die am häufigsten verwendeten sind solid und dashed . Im Bild oben ist dashed zu sehen.

Zusätzlich zu den gebräuchlichsten Formen solid und dashed unterstützt CSS-Rand auch die Stile none , hidden , „ dotted , double , groove , ridge , inset , outset “ und andere. Mit Ausnahme von none und hidden sehen Sie sich alle nativ unterstützten Rahmenstile an:

Dies sind die Grundlagen. Wenn Sie einen Rahmen in einem anderen Stil implementieren oder dem Rahmen eine Animation hinzufügen möchten, müssen Sie einige andere Attribute verwenden oder Ihre Fantasie einsetzen. OK, schauen wir uns noch ein paar weitere interessante Grenzen an.

Änderungen der Rahmenlänge

Beginnen wir mit einer einfacheren Methode, um einen Randeffekt wie diesen zu erzielen:

Tatsächlich werden hier zwei Pseudoelemente des Elements übernommen. Die beiden Pseudoelemente legen nur die oberen und linken Ränder bzw. die unteren und rechten Ränder fest und ändern beim hover die Höhe und Breite der beiden Pseudoelemente. Sehr leicht zu verstehen.

div {
    Position: relativ;
    Rand: 1px durchgezogen #03A9F3;
     
    &::vor,
    &::nach {
        Inhalt: "";
        Position: absolut;
        Breite: 20px;
        Höhe: 20px;
    }
     
    &::vor {
        oben: -5px;
        links: -5px;
        Rahmen oben: 1px durchgezogen var(--borderColor);
        Rahmen links: 1px durchgezogen var(--borderColor);
    }
     
    &::nach {
        rechts: -5px;
        unten: -5px;
        Rahmen unten: 1px durchgezogen var(--borderColor);
        Rahmen rechts: 1px durchgezogen var(--borderColor);
    }
     
    &:hover::vor,
    &:hover::nach {
        Breite: berechnet (100 % + 9 Pixel);
        Höhe: berechnet (100 % + 9 Pixel);
    }
}

CodePen-Demo – Animation der Rahmenbreite

Als nächstes werden wir beginnen, den Schwierigkeitsgrad zu erhöhen.

Gestrichelte Rahmenanimation

Mit dem Schlüsselwort dashed können Sie ganz einfach einen gestrichelten Rahmen erstellen.

div {
    Rand: 1px gestrichelt #333;
} 

Unser Ziel ist natürlich, den Rand animiert zu gestalten. Daran führt mit dem dashed Schlüsselwort kein Weg vorbei. Es gibt jedoch viele Möglichkeiten, gepunktete Linien in CSS zu erzielen. Ein guter Weg ist beispielsweise der Farbverlauf:

div {
    Hintergrund: linearer Farbverlauf (90 Grad, Nr. 333 50 %, transparent 0) Wiederholung x;
    Hintergrundgröße: 4px 1px;
    Hintergrundposition: 0 0;
}

Schauen Sie sich diese mit einem Farbverlauf simulierte gestrichelte Linie an:

OK, Farbverläufe unterstützen mehrere Farbverläufe. Wir können Farbverläufe auf allen vier Seiten des Containers verwenden:

div {
    Hintergrund:
        linearer Farbverlauf (90 Grad, #333 50 %, transparent 0) repeat-x,
        linearer Farbverlauf (90 Grad, #333 50 %, transparent 0) repeat-x,
        linearer Farbverlauf (0 Grad, #333 50 %, transparent 0) Wiederholung-y,
        linearer Farbverlauf (0 Grad, Nr. 333 50 %, transparent 0) Wiederholung-y;
    Hintergrundgröße: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
    Hintergrundposition: 0 0, 0 100 %, 0 0, 100 % 0;
}

Die Wirkung ist wie folgt:

OK, an diesem Punkt ist unsere gepunktete Rahmenanimation tatsächlich mehr als zur Hälfte fertig. Obwohl border-style: dashed keine Animation unterstützt, wird dies bei Farbverläufen der Fall. Wir fügen dem obigen Div einen hover -Effekt hinzu, fügen beim hover eine animation hinzu und ändern bakcground-position des Elements.

div:hover {
    Animation: linearGradientMove .3s unendlich linear;
}
 
@keyframes linearGradientMove {
    100 % {
        Hintergrundposition: 4px 0, -4px 100 %, 0 -4px, 100 % 4px;
    }
}

OK, sehen wir uns den Effekt an. Wenn Sie mit der Maus darüber fahren, bewegt sich der Rand. Da die gesamte Animation von Anfang bis Ende verbunden ist, sieht die Endlosschleifen-Animation so aus, als würde sich der gepunktete Rand immer bewegen. Das ist ein kleiner Trick:

Hier ist noch ein kleiner Trick. Wenn wir möchten, dass die gepunktete Rahmenanimation von anderen Rändern zum gepunkteten Rand übergeht und dann weitergeht. Es ist auch möglich, es vollständig mit Farbverläufen zu simulieren. Wenn Sie Code sparen möchten, ist es schneller, border zu verwenden, wie beispielsweise diese:

div {
    Rand: 1px durchgezogen #333;
     
    &:schweben {
        Rand: keiner;
        Hintergrund:
            linearer Farbverlauf (90 Grad, #333 50 %, transparent 0) repeat-x,
            linearer Farbverlauf (90 Grad, #333 50 %, transparent 0) repeat-x,
            linearer Farbverlauf (0 Grad, #333 50 %, transparent 0) Wiederholung-y,
            linearer Farbverlauf (0 Grad, Nr. 333 50 %, transparent 0) Wiederholung-y;
        Hintergrundgröße: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
        Hintergrundposition: 0 0, 0 100 %, 0 0, 100 % 0;
    }
}

Aufgrund der unterschiedlichen Position von Rahmen und Hintergrund im Boxmodell kommt es zu einer sehr offensichtlichen visuellen Fehlausrichtung:

Um dieses Problem zu lösen, können wir border durch outline ersetzen, da outline outline-offset festlegen kann. Dies kann dieses Problem perfekt lösen:

div {
    Umriss: 1px durchgezogen #333;
    Umriss-Versatz: -1px;
     
    &:schweben {
        Gliederung: keine;
    }
}

Schauen wir uns abschließend den Effekt an, der auf die eigentliche Schaltfläche angewendet wird:

Der vollständige Code der obigen Demo lautet wie folgt:

CodePen-Demo – gestrichelte Rahmenanimation

Tatsächlich kann das Problem bei Verwendung eines Rahmens aufgrund der besonderen Beziehung zwischen Hintergrund und Rahmen durch Ändern background-position gelöst werden, dies ist jedoch komplizierter. Informationen zur Beziehung zwischen Hintergrund- und Rahmenfüllung finden Sie in diesem Artikel: Verschiedene Möglichkeiten zur Implementierung gestreifter Ränder

Andere Verwendungen von Farbverläufen

Durch den Einsatz von Farbverläufen lassen sich mehr als nur die oben genannten Effekte erzielen.

Wir beschäftigen uns noch eingehender mit Farbverläufen und verwenden Farbverläufe, um einen Hintergrund wie diesen zu erzielen:

div {
    Position: relativ;
     
    &::nach {
        Inhalt: '';
        Position: absolut;
        links: -50%;
        oben: -50%;
        Breite: 200 %;
        Höhe: 200%;
        Hintergrundwiederholung: keine Wiederholung;
        Hintergrundgröße: 50 % 50 %, 50 % 50 %;
        Hintergrundposition: 0 0, 100 % 0, 100 % 100 %, 0 100 %;
        Hintergrundbild: linearer Farbverlauf (#399953, #399953), linearer Farbverlauf (#fbb300, #fbb300), linearer Farbverlauf (#d53e33, #d53e33), linearer Farbverlauf (#377af5, #377af5);
    }
}

Beachten Sie, dass zum Generieren dieser Grafik hier das Pseudoelement des Elements verwendet wird und dass Breite und Höhe jeweils 200% des übergeordneten Elements betragen. Bei Überschreitung des Grenzwertes overflow: hidden .

Als nächstes fügen Sie eine Rotation hinzu:

div {
    Animation: 4 s linear unendlich rotieren;
}
 
@keyframes drehen {
    100 % {
        transformieren: drehen (1 Drehung);
    }
}

Sehen Sie die Wirkung:

Verwenden Sie zum Schluss ein Pseudoelement, um den mittleren Teil zu maskieren. Daraufhin wird eine nette Rahmenanimation angezeigt:

Der vollständige Code der obigen Demo lautet wie folgt. Ich habe diesen Effekt zum ersten Mal beim Autor gesehen - Jesse B

CodePen-Demo – Animation von Verlaufsrändern

Ändern Sie die Farbe des Farbverlaufs

Nachdem wir die oben genannten grundlegenden Techniken gemeistert haben, können wir einige Anpassungen an den Verlaufsfarben vornehmen. Wir werden 4 Farben in 1 Farbe umwandeln:

div::nach {
    Inhalt: '';
    Position: absolut;
    links: -50%;
    oben: -50%;
    Breite: 200 %;
    Höhe: 200%;
    Hintergrundfarbe: #fff;
    Hintergrundwiederholung: keine Wiederholung;
    Hintergrundgröße: 50 % 50 %;
    Hintergrundposition: 0 0;
    Hintergrundbild: linearer Farbverlauf (#399953, #399953);
}

Erhalten Sie ein Diagramm wie dieses:

Lassen Sie es auf ähnliche Weise mitrotieren, und es erscheint eine monochrome Animation mit sich verfolgenden Rändern:

CodePen-Demo – Animation von Verlaufsrändern 2

Wow, sieht ziemlich gut aus. Handelt es sich jedoch um eine einzelne Linie, liegt ein offensichtlicher Fehler vor. Das Ende der Umrandung ist also ein kleines Dreieck statt eines vertikalen. Dies ist in manchen Szenen möglicherweise nicht anwendbar oder wird vom PM nicht akzeptiert.

Gibt es eine Möglichkeit, diese kleinen Dreiecke zu entfernen? Ja, im folgenden Artikel stellen wir eine Methode vor, um diese kleinen Dreiecke mithilfe von clip-path zu eliminieren.

Die Magie des conic-gradient

Bevor wir clip-path vorstellen, sprechen wir über den Winkelgradienten.

Oben wird hauptsächlich der lineare Gradient linear-gradient verwendet. Tatsächlich können wir mit conic-gradient genau den gleichen Effekt erzielen.

Versuchen wir es noch einmal mit conic-gradient , dieses Mal mit einem dunklen Stil. Der Kerncode lautet wie folgt:

.kegelförmig {
    Position: relativ;
     
    &::vor {
        Inhalt: '';
        Position: absolut;
        links: -50%;
        oben: -50%;
        Breite: 200 %;
        Höhe: 200%;
        Hintergrund: Kegelschnitt (transparent, rgba (168, 239, 255, 1), transparent 30 %);
        Animation: 4 s linear unendlich rotieren;
    }
}
@keyframes drehen {
    100 % {
        transformieren: drehen (1 Drehung);
    }
}

Das Effektdiagramm und das schematische Diagramm sind wie folgt. Eine teilweise eckig verlaufende Form wird gedreht und der mittlere Teil wird mit einem anderen Pseudoelement maskiert, sodass nur der Linienteil freiliegt:

CodePen-Demo – Rotierender Rand 3

Die Magie des clip-path

Es ist wieder unser alter Freund clip-path . Er ist immer da, wenn es um interessante Dinge geht.

clip-path selbst kann Koordinatenpunkte animieren und sich von einer Clip-Form in eine andere verwandeln.

Mit dieser Funktion können wir geschickt einen solchen Randfolgeeffekt erzielen. Der Pseudocode lautet wie folgt:

div {
    Position: relativ;
 
    &::vor {
        Inhalt: "";
        Position: absolut;
        oben: 0;
        links: 0;
        rechts: 0;
        unten: 0;
        Rand: 2px massives Gold;
        Animation: Clippfad 3 s unendlich linear;
    }
}
 
@keyframes Clippfad {
    0%,
    100 % {
        Clip-Pfad: Einschub (0 0 95 % 0);
    }
    25 % {
        Clip-Pfad: Einschub (0 95 % 0 0);
    }
    50 % {
        Clip-Pfad: Einschub (95 % 0 0 0);
    }
    75 % {
        Clip-Pfad: Einschub (0 0 0 95 %);
    }
}

Das Wirkungsdiagramm ist zusammen mit dem schematischen Diagramm:

CodePen - Clip-Pfad-Randanimation

Da das Element hier zugeschnitten wird, kann das Pseudoelement als Hintergrund für das Zuschneiden und die Animation verwendet werden. Der Vorteil der Verwendung clip-path besteht darin, dass der Schnittrand kein kleines Dreieck erzeugt. Gleichzeitig unterstützt diese Methode auch abgerundete border-radius .

Wenn wir ein anderes Pseudoelement verwenden, um tatsächlich einen Schaltflächenstil zu implementieren, können wir den folgenden Effekt erzielen:

CodePen - Clip-Pfad-Randanimation 2

Die Magie des overflow

Der folgende Trick nutzt den Überlauf. So implementieren Sie eine solche Rahmenanimation:

Warum wird gesagt, dass dies durch die Verwendung von overflow erreicht wird?

Poste ein schematisches Diagramm:

CodePen-Demo – Verwenden von Overflow und Transform zum Erzielen eines Zeilen-Hover-Effekts

Zwei Kernpunkte:

• Wir verwenden overflow: hidden , um das gesamte Element auszublenden, das sich ursprünglich außerhalb des Containers befand
• transform-origin wird verwendet, um das Rotationszentrum des Elements zu steuern

Ist Ihnen aufgefallen, dass fast alle interessanten CSS-Effekte ähnliche Techniken verwenden:

Einfach ausgedrückt ist die Animation, die wir sehen, nur ein kleiner Teil des ursprünglichen Phänomens. Durch gezieltes Zuschneiden, Änderungen der Transparenz, Maskierung usw. können wir am Ende nur einen Teil des ursprünglichen Phänomens sehen.

Die Magie des border-image

Mit border-image können wir auch einige interessante Randanimationen erzielen. Bezüglich border-image gibt es einen sehr guten Artikel, der die korrekte Verwendung von border-image erklärt. Dieser Artikel geht nicht zu sehr auf die grundlegende Definition ein.

Wenn wir ein Bild wie dieses haben:

Sie können die Eigenschaften von border-image-slice und border-image-repeat verwenden, um ein ähnliches Rahmenmuster zu erhalten:

div {
  Breite: 200px;
  Höhe: 120px;
  Rand: 24px durchgezogen;
  Rahmenbild: URL (Bild-URL);
  Rahmenbild-Ausschnitt: 32;
  Rahmenbild-Wiederholung: rund;
}

Auf dieser Basis können Sie Höhe und Breite des Elements beliebig verändern, so dass es sich auf beliebig große Containerränder ausdehnen kann:

CodePen-Demo – Rahmenbild-Demo

Als nächstes wird in diesem Artikel – So animieren Sie ein SVG mit einem Rahmenbild – auch eine Rahmenanimation mit border-image erklärt, was sehr cool ist.

Der Unterschied zum obigen Beispiel besteht darin, dass wir nur unser Muster bewegen müssen, d. h. wir benötigen ein Hintergrundbild wie dieses (Blog Garden unterstützt keine SVG-Animationen, Adresse des Originalbilds):

Dann können wir auch ein Bild mit bewegtem Rahmen erhalten. Der Code ist genau der gleiche, aber der Rahmen bewegt sich:

CodePen-Demo – Tanzender Totenkopfrand

border-image verwendet Farbverlauf

Zusätzlich zur Texturreferenz- url kann border-image auch direkt mit Farbe oder einem Farbverlauf gefüllt werden.

Es gab auch schon einen Artikel über border-image - geschickte Implementierung von Farbverlaufsrändern mit abgerundeten Ecken

Wir können border-image + filter + clip-path verwenden, um mit einer Gradiententransformation einen abgerundeten Rahmen zu erzielen:

.border-image-clip-path {
    Breite: 200px;
    Höhe: 100px;
    Rand: 10px durchgezogen;
    Rahmenbild: linearer Farbverlauf (45 Grad, Gold, Dunkelrosa) 1;
    Clip-Pfad: Einschub (0px rund 10px);
    Animation: 6 s unendlich linear rotieren;
    Filter: Farbton-Drehung (360 Grad);
}
 
@keyframes huerotate {
    0% {
        Filter: Farbton-Drehung (0 Grad);
    }
    100 % {
        Filter: Farbton-Rotation (360 Grad);
    }
} 

CodePen-Demo – Clip-Pfad, Rahmenbild plus Filter zum Erreichen eines abgerundeten Farbverlaufsrahmens

endlich

In diesem Artikel werden einige Tipps zur Randanimation vorgestellt, die ich interessant finde. Natürlich gibt es noch viele weitere interessante Effekte, die mit CSS erzielt werden können, aber aus Platzgründen werde ich nicht einzeln darauf eingehen.

Dies ist das Ende dieses Artikels über die Implementierung kreativer CSS-Rahmenanimationseffekte. Weitere verwandte CSS-Rahmenanimationsinhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!