So verwenden Sie CSS, um den Effekt von animierten Rändern mit Farbverlauf zu erzielen (Code im Anhang)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS, um den Effekt von animierten Rahmen (mit Code) zu erzielen. Ich hoffe, dass er für Freunde in Not hilfreich ist dir geholfen.

Effektvorschau

Quellcode-Download

https://github.com/comehope/front-end-daily -challenges/tree/master/016-colorful-gradient-animated-border

Codeinterpretation

Dom definieren, ein Container enthält Text:

<div>
    you are my<br>
    FAVORITE
</div>

Zentrierte Anzeige:

html,
body,
.box {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

Legen Sie die Hintergrundfarbe der Seite fest:

body {
    background: #222;
}

Legen Sie den Container und den Textstil fest:

.box {
    color: white;
    font-size: 2.5em;
    width: 10em;
    height: 5em;
    background: #111;
    font-family: sans-serif;
    line-height: 1.5em;
    text-align: center;
    border-radius: 0.2em;
}

Fügen Sie ein Backboard mit Pseudoelementen hinzu:

.box {
    position: relative;
}

.box::after {
    content: '';
    position: absolute;
    width: 102%;
    height: 104%;
    background-color: orange;
    z-index: -1;
    border-radius: 0.2em;
}

Platzieren Sie das Backboard Auf Verlaufsfarbe einstellen:

.box::after {
    /*background-color: orange;*/
    background-image: linear-gradient(60deg, aquamarine, cornflowerblue, goldenrod, hotpink, salmon, lightgreen, sandybrown, violet);
}

Animationseffekt für die Rückseite festlegen:

.box::after {
    background-size: 300%, 300%;
    animation: animate_bg 5s ease infinite alternate;
}

@keyframes animate_bg {
    0% {
        background-position: 0%, 50%;
    }

    50% {
        background-position: 100%, 50%;
    }

    100% {
        background-position: 0%, 50%;
    }
}

Zum Schluss einen Farbwechseleffekt zum Text hinzufügen:

.box {
    animation: animate_text 2s linear infinite alternate;
}

@keyframes animate_text {
    from {
        color: lime;
    }

    to {
        color: yellow;
    }
}

Fertig!

Verwandte Empfehlungen:

So verwenden Sie CSS, um einen Entenkopf zu implementieren (mit Code)

So verwenden Sie CSS und Farbmischung Modus zum Implementieren eines Loader-Animationseffekts (mit Code)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um den Effekt von animierten Rändern mit Farbverlauf zu erzielen (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!