Lucyy's profile picture

Published by

published

Category: Web, HTML, Tech

How to add color change effect to your profile name

If you want to have a color effect like this: "RAINBOW WOO", start by adding the following to your about me:

<style>
:root{
--first: red;
--second: green;
--third: blue;}
@keyframes colors{
            0%{
                color: var(--first);
            }
            25%{
                color: var(--second);
            }
            50%{
                color: var(--third);
            }
            75%{
                color: var(--second);
            }
            100%{
                color: var(--third);
            }
        }
</style>

Now add the following lines to apply the animation to your name. You can replace "h1" with whatever you want to change color. If want to apply it to a specific part of text you can surround it with the following tags: <span class="text">example text</span>, then replace h1 with "span.text"

<style>
/*change h1 with whatever element/class you want*/
h1 {
 text-align: center;
    animation-duration: 2s; /*Change the time for faster or slower*/
    animation-name: colors;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
</style>

If your profile style already has a h1 you can just add the stuff between the brackets in there. If your h1 already has some kind of animation this might mess some stuff up so be careful! Enjoy!!


6 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )