Der Effekt eines dynamischen CSS-Farbverlaufsrahmens, der um den Inhaltsbereich rotiert (Beispielcode)

Rendern

Nachdem ich online nach relevanten Informationen gesucht hatte, stellte ich fest, dass die meisten aktuellen Implementierungsmethoden für dynamische Farbverlaufsränder darin bestehen, ein Pseudoelement zu verwenden, das größer als der Inhaltsbereich ist, und dann den Farbverlaufshintergrund horizontal zu verschieben. Die Rotation des Farbverlaufsrands um den Inhaltsbereich hat jedoch keinen Effekt. Daher habe ich eine Demo wie diese zu Ihrer Information erstellt.

Umsetzungsprinzip

Verschachteln Sie zunächst den Inhaltsbereich in einem DIV-Feld und legen Sie „overflow: hidden;“ fest. Die Größe dieses Felds entspricht der Größe des Inhaltsbereichs zuzüglich der Breite des gewünschten Verlaufsrahmens. Anschließend wird der Inhaltsbereich zentriert, sodass zwischen dem Inhaltsbereich und dem übergeordneten Element ein weißer Raum verbleibt, der als Rahmen erscheint.
Fügen Sie nun in diesem leeren Bereich ein Feld hinzu, das größer als das übergeordnete Element ist und über einen Hintergrund mit Farbverlauf verfügt, und stellen Sie die Ebene auf den niedrigsten Z-Index ein: -1;. Fügen Sie dann der Box mit dem Verlaufshintergrund die Rotationsanimation hinzu, und fertig.
Es sieht ziemlich kompliziert aus, aber die tatsächliche Struktur ist sehr einfach. Solange Sie ein grobes dreidimensionales Gespür im Kopf haben, können Sie das Prinzip dahinter sofort verstehen.

HTML-Struktur

<Text>
    <!-- Die äußerste Schicht dient lediglich zur Größenbegrenzung des Verlaufsbereichs-->
    <div Klasse="wrap">
        <!-- Anzeigebereich für Farbverläufe -->
        <div Klasse="bgc"></div>
        <!-- Inhalt -->
        <div Klasse="Inhalt"></div>
    </div>
</body>

CSS

<Stil>
        /* Elastische Box zum Zentrieren der Demo*/
        Körper {
            Rand: 0;
            Polsterung: 0;
            Höhe: 100vh;
            Anzeige: Flex;
            Elemente ausrichten: zentrieren;
            Inhalt ausrichten: zentriert;
        }
        /* Die äußerste Ebene dient zum Verbergen der überlaufenden .bgc-Datei in der Mitte. Die Größe kann je nach Inhaltsbereich und Rahmengröße frei angepasst werden*/
        .wickeln {
            Breite: 300px;
            Höhe: 300px;
            Überlauf: versteckt;
            Position: relativ;
            Rahmenradius: 20px;
            /* Die elastische Box zentriert den Inhaltsbereich */
            Anzeige: Flex;
            Elemente ausrichten: zentrieren;
            Inhalt ausrichten: zentriert; 
        }
        /* Der tatsächliche Inhalt der endgültigen dynamischen Farbverlaufsgrenze ist größer als .wrap, aber der Überlaufteil ist ausgeblendet und der mittlere Teil wird aufgrund der hierarchischen Beziehung von .content abgedeckt. Schließlich zeigt nur die Lücke zwischen .wrap und .content den rotierenden Farbverlaufshintergrund */
        .bgc {
            Breite: 500px;
            Höhe: 500px;
            Hintergrund: linearer Farbverlauf (#fff,#448de0);
            Animation: bgc 1,5 s unendlich linear;
            Randradius: 50 %;
            Position: absolut; 
            z-Index: -1;
        }
        /* Der Inhaltsbereich passt seine Größe entsprechend seiner eigenen Situation an*/
        .Inhalt {
            Breite: 250px;
            Höhe: 250px;
            Hintergrundfarbe: #fff;
            Rahmenradius: 20px;
        }
 /* Animation der Rotation des Hintergrunds mit Farbverlauf */
        @keyframes bgc {
            0% {
                transformieren: drehenZ(0);
            }

            100 % {
                transformieren: drehenZ(360 Grad);
            }
        }
    </Stil>

Damit jeder die hierarchische Beziehung besser verstehen kann, habe ich ein 3D-Beziehungsdiagramm erstellt. Je näher der Pfeil an der Richtung ist, in die er zeigt, desto höher ist die Ebene. Das kleinste ausgefüllte Quadrat ist der Inhaltsbereich und der größte blaue Kreis ist der rotierende Farbverlaufshintergrund, aber der Teil, der die Größe des mittleren Felds überschreitet, ist ausgeblendet.

Zusammenfassen

Das Obige ist der Effekt des dynamischen Farbverlaufsrahmens von CSS, der um den vom Editor eingeführten Inhaltsbereich rotiert. Ich hoffe, es wird allen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!