Движущиеся облака на CSS

Красивый эффект, который накладывает летящие облака на произвольный фон.

Для реализации данной анимации нужно:

1. Облака:
2. CSS:

Класс .cloud отвечает за сам блок и его размеры, а .cloudcontent за информацию на нем.

3. HTML:
4. Результат:
Текст на фоне

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Сергей:

    А как убрать разрыв между циклами анимации?

    Ответить
    • Alexander:

      Анимация повторяется бесконечно через заданный промежуток времени.
      Циклы всегда будут, только они меняются за пределом видимой области. Лично я разрывов не наблюдаю (дерганий, как иногда бывает, когда анимация начинается сначала)

      Ответить
  • жылдызбек:

    где можно взят фоновую картинку

    Ответить
    • Alexander:

      Например, в Яндексе 🙂
      А если по лицензиям, то можно на pixabay.com

      Ответить
  • Руслан:

    а как height настроить, и как в облака размеры уменьшить?

    Ответить
    • Alexander:

      По поводу высоты, класс .cloud, убрать:
      padding-bottom: 56.25%;
      height: 0;
      position: relative;

      И поставить нужную высоту.
      Если ширина не 100%, то и ее.

      Облака уменьшить, это класс .cloud img, убрать width: 100%; и для каждого облака добавить размеры.

      Чтобы облако летало правильно в keyframes вместо transform поставить left
      @keyframes animCloud {
      from {
      left: 100%
      }
      to {
      left: минус ширина облака
      }
      }

      Ответить
  • garrik:

    А как можно сделать чтобы облака начали двигаться только при наведении на блок?

    Ответить
    • Alexander:

      Заменить последние 4 класса (cloud1 - cloud4) на:

      .cloud1,
      .cloud2,
      .cloud3,
      .cloud4 {
      transform: translateX(100%)
      }
      .cloud:hover .cloud1 {
      -webkit-animation: animCloud 20s infinite linear;
      -moz-animation: animCloud 20s infinite linear;
      animation: animCloud 20s infinite linear
      }
      .cloud:hover .cloud2 {
      -webkit-animation: animCloud 40s infinite linear;
      -moz-animation: animCloud 40s infinite linear;
      animation: animCloud 40s infinite linear
      }
      .cloud:hover .cloud3 {
      -webkit-animation: animCloud 60s infinite linear;
      -moz-animation: animCloud 60s infinite linear;
      animation: animCloud 60s infinite linear
      }
      .cloud:hover .cloud4 {
      -webkit-animation: animCloud 80s infinite linear;
      -moz-animation: animCloud 80s infinite linear;
      animation: animCloud 80s infinite linear
      }

      Ответить
    • Alexander:

      Если нужно, чтобы анимация не сбрасывалась, когда уходит мышка, можно использовать animation-play-state
      Для этого в класс cloud img добавляем: animation-play-state: paused;
      И добавляем класс для ховера:
      .cloud:hover img {
      animation-play-state: running;
      }

      Ответить