Comment utiliser CSS pour obtenir l'effet de bordures animées en dégradé (code ci-joint)

Le contenu de cet article explique comment utiliser CSS pour obtenir l'effet de bordures animées en dégradé (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. pour vous.

Aperçu de l'effet

Téléchargement du code source

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

Interprétation du code

Définir dom, un conteneur contient du texte :

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

Affichage centré :

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

Définir la couleur d'arrière-plan de la page :

body {
    background: #222;
}

Définir le style du conteneur et du texte :

.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;
}

Ajouter un backboard à l'aide de pseudo-éléments :

.box {
    position: relative;
}

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

Définissez le panneau arrière sur une couleur dégradée :

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

Définissez un effet d'animation pour le panneau arrière :

.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%;
    }
}

Enfin, ajoutez un effet de changement de couleur à le texte :

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

@keyframes animate_text {
    from {
        color: lime;
    }

    to {
        color: yellow;
    }
}

Fait !

Recommandations associées :

Comment utiliser CSS pour implémenter une tête de canard (avec code)

Comment utiliser CSS et le mélange de couleurs mode pour implémenter un effet d'animation de chargeur (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!