How to use CSS to achieve the effect of gradient animated borders (code attached)

The content of this article is about how to use CSS to achieve the effect of gradient animated borders (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. helped.

Effect preview

Source code download

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

Code interpretation

Define dom, a container contains some text:

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

Centered display:

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

Set the page background color:

body {
    background: #222;
}

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

Add the backboard Set to gradient color:

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

Set the animation effect for the back panel:

.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 the color changing effect to the text:

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

@keyframes animate_text {
    from {
        color: lime;
    }

    to {
        color: yellow;
    }
}

You’re done!

Related recommendations:

How to use CSS to implement a duck head (with code)

How to use CSS and color mixing mode to implement loader Animation effect (with code)

The above is the detailed content of How to use CSS to achieve the effect of gradient animated borders (code attached). For more information, please follow other related articles on the PHP Chinese website!