Разноцветный текст с анимацией при наведении на CSS

29 марта 2020

В этом уроке мы создадим разноцветный текст в виде радуги на CSS. И добавим к нему анимации при наведении.

Содержание файлов:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Aniskovich</title>
</head>
<body>
    <header>
        <h1 class="text-color">Aniskovich</h1>
    </header>

</body>
</html>

style.css

*{
        margin: 0;
        padding: 0;
    }

    body{
        background-color: #21202b;
    }

    header{
        min-height: 100vh;
        display: flex;
        align-items: center;
    }

    h1{
        width: 950px;
        text-align: center;
        font-family: roboto, sans-serif;
        font-size: 90px;
        cursor: pointer;
        margin: 0 auto;
    }

    .text-color{
        background-color: #FF0000;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 100%;
        background-image: linear-gradient(
            45deg,
            #FF0000 33%,
            #FF4500 33%,
            #FF4500 40%,
            #FFFF00 40%,
            #FFFF00 47%,
            #008000 47%,
            #008000 54%,
            #00BFFF 54%,
            #00BFFF 61%,
            #0000FF 61%,
            #0000FF 68%,
            #800080 68%);
        animation: text-animate-rev 0.75s ease forwards;

    }

    .text-color:hover{
        animation: text-animate 0.5s ease-in forwards;
    }

    @keyframes text-animate-rev {
        0% {
            background-size: 650%;
        }
        40% {
            background-size: 650%;
        }
        100% {
            background-size: 100%;
        }
    }

    /* Move the background and make it larger. */
    /* Animation shown when hovering over the text. */
    @keyframes text-animate {
        0% {
            background-size: 100%;
        }
        80% {
            background-size: 650%;
        }
        100% {
            background-size: 650%;
        }
    }

Разноцветный текст на CSS с анимацией. Рабочий результат.

See the Pen ExjGrPL by AntonAniskovich (@AntonAniskovich) on CodePen.

Видео с пошаговой инструкцией:

Дорогие друзья если Вам понравилась статья и Вы хотите меня поддержать, то подписывайтесь на мой блог и канал на youtube. Это для меня самая лучшая благодарность. Всем до новых встреч.