Этот скрипт создает горизонтальную полосу, представляющую собой плавно меняющийся цвет от красного к оранжевому, затем к желтому, зеленому, синему, индиго, фиолетовому и обратно. Анимация задает плавное движение градиента вдоль полосы, создавая эффект радужного переливания. Этот процесс повторяется бесконечно, создавая замечательный визуальный эффект.
<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>
Пример ↓↓↓↓
