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.
https://github.com/comehope/front-end-daily -challenges/tree/master/016-colorful-gradient-animated-border
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)
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!