Радужная текстовая анимация CSS 🌈

В этом уроке мы сделаем простую CSS-анимацию радужного текста.

Нажмите здесь, чтобы посмотреть исходный код этого урока.

HTML

В файле index.html нам понадобится только тег h1 с текстом.

<h1>Superdev.</h1>

CSS

Наш CSS-файл будет содержать основные стили h1, а также код для анимации текста.

Стилизация текста

h1 {
    background-clip: text;
    background: url('https://vivaldi.com/wp-content/uploads/colors-1024x656.png');
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text 3s linear infinite;
}

Поскольку до этого момента анимация не применялась, наш текст будет выглядеть следующим образом:

Добавление анимации

@keyframes text {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 50%;
    }
}

Вот и все 🎉

Вы должны увидеть нечто подобное, когда откроете файл index.html в своем браузере.