Недавно к нам обратились с интересной задачей для сайта аллея-памяти.рф. Требовалось создать эффект свечи, которую можно зажечь и задуть, но без использования готовых анимированных изображений. Решение предполагало полную реализацию эффекта только с помощью HTML, CSS и небольшого скрипта на JavaScript для проверки работоспособности (зажигаться или гаснуть свеча будет при помощи php).

Что было нужно?

Заказчику нужно было добавить на сайт памятную атмосферу, которая бы ассоциировалась с теплом и светом, но при этом оставалась максимально легкой в реализации. Мы взяли это решение, и доработали его – разработали анимированную свечу, которая может менять свое состояние.: когда свеча зажжена, на ней отображается пламя и яркий градиент; когда же свеча потушена — она принимает единообразный темный цвет. У заказчика регулироваться состояние свечи будет через PHP, мы же сделали вариант с JS переключателем, чтобы наглядно показать как работает свеча.

Основные этапы реализации

HTML-разметка

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

<div class="container">
  <button id="toggleBtn">Зажечь / Задуть</button>
  
  <!-- Свеча по умолчанию зажжена (есть класс .lit) -->
  <div class="candle lit" id="myCandle">
    <div class="candle-body">
      <div class="candle-stick"></div>
      <div class="candle-flames"></div>
    </div>
  </div>
</div>

• Задали контейнеру темный фон и использовали flex‑раскладку для корректного позиционирования свечи в нижней части блока.
• Оформили тело свечи с помощью градиентов, чтобы имитировать эффект горения.
• Реализовали анимацию пламени, которое слегка покачивается, создавая иллюзию настоящего огня.
• Добавили стили для потухшей свечи, где яркие цвета заменены на один темный оттенок.

<style>
  /* Основной контейнер */
  .container {
    position: relative;
    width: 100%;
    min-height: 400px;  /* Высоту можно регулировать под нужды макета */
    background: #1a1919;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 20px;
  }

  /* Кнопка для переключения состояния свечи */
  #toggleBtn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 9999;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
  }

  /* Свеча. Класс .lit означает, что свеча зажжена */
  .candle {
    position: relative;
    transform: scale(0.7);
    transform-origin: bottom center;
  }

  /* Тело свечи в зажженном состоянии */
  .candle-body {
    width: 100px;
    height: 350px;
    position: relative;
    background: linear-gradient(
      rgb(209, 158, 64),
      rgb(165, 96, 11),
      rgb(241, 85, 12),
      rgb(109, 47, 3) 50%,
      rgba(0, 0, 0, 0.6)
    );
  }

  /* Верхняя скругленная часть свечи в зажженном состоянии */
  .candle.lit .candle-body::after {
    content: "";
    position: absolute;
    top: -25px;
    height: 50px;
    width: 100px;
    border-radius: 50px;
    background: radial-gradient(
      rgb(226, 95, 34),
      rgb(168, 117, 23),
      rgb(255, 149, 18),
      rgb(112, 49, 3)
    );
    transform: rotateX(55deg);
    box-shadow:
      inset 2px 3px 4px rgba(0, 0, 0, 0.2),
      inset -2px -3px 4px rgba(0, 0, 0, 0.2);
  }

  /* Пламя свечи (видно только если свеча зажжена) */
  .candle.lit .candle-flames {
    display: block;
  }

  /* Стили для потухшей свечи (если класс .lit отсутствует) */
  .candle:not(.lit) .candle-body {
    background: #3b2e20;
  }
  .candle:not(.lit) .candle-body::after {
    content: "";
    position: absolute;
    top: -25px;
    height: 50px;
    width: 100px;
    border-radius: 50px;
    background: #3b2e20;
    transform: rotateX(55deg);
    box-shadow:
      inset 2px 3px 4px rgba(0, 0, 0, 0.2),
      inset -2px -3px 4px rgba(0, 0, 0, 0.2);
  }
  .candle:not(.lit) .candle-flames {
    display: none;
  }

  /* Фитиль свечи */
  .candle-stick {
    width: 7px;
    height: 40px;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(
      rgb(7, 7, 204) 2%,
      rgb(15, 0, 0) 80%,
      rgb(248, 165, 11) 99%
    );
    border-radius: 50% 50% 20% 20%;
    z-index: 10;
  }

  /* Пламя свечи с анимацией */
  .candle-flames {
    display: block;
    position: absolute;
    background: linear-gradient(
      rgb(224, 216, 216) 50%,
      rgb(233, 157, 17),
      rgb(12, 12, 226)
    );
    border-radius: 50% 50% 30% 30%;
    width: 30px;
    height: 100px;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    animation: move 1s linear infinite;
    box-shadow:
      70px -50px 100px rgb(228, 70, 13),
      -70px -50px 100px rgb(180, 52, 6);
  }

  @keyframes move {
    0% {
      transform: translateX(-50%) rotateZ(1deg);
    }
    100% {
      transform: translateX(-50%) rotateZ(-1deg);
    }
  }
</style>

JavaScript для переключения состояния

Небольшой скрипт на JavaScript позволяет переключать класс элемента (добавлять или убирать класс .lit), что мгновенно меняет внешний вид свечи. Таким образом, пользователь может «зажечь» или «задуть» свечу нажатием на кнопку.

<script>
  document.getElementById('toggleBtn').addEventListener('click', function() {
    document.getElementById('myCandle').classList.toggle('lit');
  });
</script>

Итог

Данный пример демонстрирует, как можно создать интерактивный и атмосферный элемент на сайте, используя только HTML, CSS. Такое решение идеально подходит для сайтов, где важна символика и эмоциональная составляющая, как, например, на аллея-памяти.рф.

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