How to use CSS to achieve the effect of gradient animated borders (code attached)-CSS Tutorial-php.cn

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

不言

Release： 2018-08-22 10:30:06

Original

4288 people have browsed it

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

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

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>

Copy after login

Centered display:

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

Copy after login

Set the page background color:

body {
    background: #222;
}

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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!