How to use CSS to achieve gradient animation border effects (with code)

This article brings you the content is about how to use CSS to achieve the effect of gradient animation border (with code), there is a certain reference value, the need for friends can refer to, I hope to help you.

Effect Preview

Source code Download

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

Code interpretation

Defines the DOM, a container that contains some text:

<div class= "box" > You is    my<br>    favorite</div>

Center display:

Html,body,.box {    height:100%;    Display:flex;    Align-items:center;    Justify-content:center;}

Set Page background color:

Body {    background: #222;}

To set the container and text style:

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

Add a backplane with pseudo-elements:

. box {    position:relative;}. Box::after {    content: ';    Position:absolute;    width:102%;    height:104%;    Background-color:orange;    Z-index:-1;    Border-radius:0.2em;}

To set the backplane to a gradient:

. box::after {    /*background-color:orange;*/    background-image:linear-gradient (60deg, Aquamarine, Cornflowerblue, Goldenrod, Hotpink, Salmon, lightgreen, sandybrown, violet);}

Animate the Backplane:

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

Finally, add color effects to the text:

. box {    animation:animate_text 2s linear infinite alternate;} @keyframes Animate_text {from    {        color:lime;    }    to {        color:yellow;    }}

Done!