Maison > interface Web > tutoriel CSS > le corps du texte

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
4250 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal