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

Table of Contents

Effect preview

Source code download

Code interpretation

Home

Web Front-end

CSS Tutorial

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

Aug 22, 2018 am 10:30 AM

css special effects

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn