Закрыть меню
  1. Главная страница
  2. HTML и CSS
  3. Разноцветный текст с анимацией при наведении на CSS

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

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

Посмотреть результат
разноцветный текст на CSS
Разноцветный текст на 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 с анимацией. Рабочий результат.

Чтобы полноценно протестировать поставьте масштаб 0.5x

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

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

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

Поделиться:
Комментарии: