Меню
Войти на сайт

Горизонтальная полоса меняющая цвет

05.02.2024 Веб / Прочее веб
Горизонтальная полоса меняющая цвет


Этот скрипт создает горизонтальную полосу, представляющую собой плавно меняющийся цвет от красного к оранжевому, затем к желтому, зеленому, синему, индиго, фиолетовому и обратно. Полоса имеет закругленные края, что придает ей форму круга. Анимация задает плавное движение градиента вдоль полосы, создавая эффект радужного переливания. Этот процесс повторяется бесконечно, создавая замечательный визуальный эффект.


<div class="child"></div>
<style>
.child {
  position: relative;
  width: 100%;
  height: 1px; /* Высота полосы */
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet, indigo, blue, green, yellow, orange, red);
  background-size: 3000% 100%; /* Размер фонового градиента */
  background-position: left; /* Начальное положение градиента */
  animation: scroll 120s linear infinite; /* Применение анимации scroll с продолжительностью 120 секунд, линейным характером и бесконечным повторением */
}
@keyframes scroll {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
</style>

Пример ↓↓↓↓




0
0
Поделиться:

Короткая ссылка:
Комментарии
Добавить комментарий

Ваше Имя:
Ваш E-Mail:
Вопрос:
Введите слово лошадь
Ответ:*
ru en de fr pt es
it zh ar nl sv

Поддержать сайт

Случайные
00:00 01. Maratone & Sharon Valerona - Blue Waters (Extended Mix) 06:07...
00:00 01. Anton By & AV & Hidden Tigress - Nothing To Lose (Extended...
00:00 01. Ubervot & Alexandra Badoi - Hope (Dennis Sheperd Extended Remix)...
00:00 01. DIM3NSION - Sunlight (Extended Mix) 05:15 02. Mhammed El Alami &...