Светофоры 🚦 — CSS анимация

CSS
Светофоры 🚦 — CSS анимация

Сегодня я поделюсь с вами очень простой и интересной демонстрационной анимацией светофора.Визуализация выглядит следующим образом:

На первый взгляд может показаться, что анимация на чистом CSS невозможна, но на самом деле понять принцип относительно просто.

Во-первых, здесь 3 источника света, мы написали по одному для каждого источника света.animation:

<div class="traffic-light">
  <div class="light red"></div>
  <div class="light amber"></div>
  <div class="light green"></div>
</div>

.red {
  animation: red 10s linear infinite;
}
.amber {
  animation: amber 10s linear infinite;
}
.green {
  animation: green 10s linear infinite;
}

Как видно из приведенного выше стиля, продолжительность анимации каждого источника света составляет 10 с, и когда анимация непрерывно воспроизводится в цикле, временные отношения между ними всегда будут синхронизированы.

Ссылаясь на рисунок ниже, начиная с функции, легко понять логическую связь между анимацией трех огней (здесь логическая связь относится к временной связи между ними)

На рисунке он разделен на этапы 5 или этапы 5. На каждом этапе разные индикаторы находятся во включенном или выключенном состоянии. Затем мы явно делим временной отрезок 0% - 100% на 5 частей, каждые 20% - это состояние, и задаем параметры в разных состояниях.

Начнем с красного света. 0%-20% и 20%-40%, на этих двух этапах всегда горит красный свет, а в остальное время черный. Тогда мы можем установить это так:

@keyframes red {
  0% {
    background: black;
  }
  2%, 40% {
    background-color: red;
  }
  42%, 100% {
    background: black;
  }
}

Здесь есть зазор в 2%, чтобы дать свету эффект градиента. Может быть записано в соответствии с 20%``40%

Точно так же желтый свет горит 20%-40% и 80%-100%, а остальное время не горит. Здесь также добавляется зазор в 2%.

@keyframes amber {
  0%, 20% {
    background: black;
  }
  22%, 40% {
    background: #FF7E00;
  }
  42%, 80% {
    background: black;
  }
  82%, 100% {
    background: #FF7E00;
  }
}

Зеленый свет тоже очень простой, настройте его, как показано на картинке.

 @keyframes green {
  0%, 40% {
    background: black;
  }
  42%, 80% {
    background: green;
  }
  82%, 100% {
    background: black;
  }
}

Наконец, сделали! Конечно вы можетездесьСм. исходный код.

(над)

автор этой статьиThinker

Если в этой статье есть какие-либо ошибки, пожалуйста, оставьте сообщение, и я исправлю его вовремя.

Если вы найдете это полезнымпоставить лайкилисобиратьБар!

Добро пожаловать на перепечатку или распространение, пожалуйста, указывайте источник при перепечатке

читать оригинал

Категории