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

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

不言

Libérer： 2018-08-22 10:30:06

original

4269 Les gens l'ont consulté

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

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

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>

Copier après la connexion

Affichage centré :

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

Copier après la connexion

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

body {
    background: #222;
}

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!