Auto Changing Text Color and Border Radius

Written by @kerixa 6 March 2021

Using texts in websites is common to express the purpose of the website and to provide information about it. However, styling these texts is also important and allows us to create beautiful texts and more attractive ones for the users. In the code below the text is shown in consecutive colors, which makes it look like flashing lights, and the radius of the border is continuously changing, which is very suitable for when we want to design a banner.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
body {
    background-color: antiquewhite;
}

.container {
    position: absolute;
    width: 300px;
    height: 250px;
    background-color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 20px dashed #000;
    animation: change-shape 2s linear infinite;
}

.text {
    position: absolute;
    top: 50%;
    left: 58%;
    transform: translate(-50%, -90%);
    font-size: 30px;
    animation: change 2s linear 0s infinite;
}

@keyframes change {
    0% {
        background: linear-gradient(to left, yellow, red);
        -webkit-background-clip: text;
        background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    25% {
        background: linear-gradient(to left, rgb(76, 62, 158), #4c00ff);
        -webkit-background-clip: text;
        background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    50% {
        background: linear-gradient(to right, yellow, red);
        -webkit-background-clip: text;
        background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    75% {
        background: linear-gradient(to left, rgb(76, 62, 158), #4c00ff);
        -webkit-background-clip: text;
        background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    100% {
        background: linear-gradient(to right, yellow, red);
        -webkit-background-clip: text;
        background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

@keyframes change-shape {
    0% {
        border-radius: 0px;
    }

    25% {
        border-radius: 50%;
    }

    50% {
        border-radius: 0px;
    }

    75% {
        border-radius: 50%;
    }

    100% {
        border-radius: 0px;
    }
}
</style>
<div class="container">
      <p class="text">HTML Free Code</p>
</div>
<a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300