ZorNet.Ru — сайт для вебмастера » HTML и CSS » Установка анимации на фоне с помощью CSS

Установка анимации на фоне с помощью CSS

Вероятно многие встречали, когда на сайте перекреплена анимация к фону контейнера или блока, вот как можно ее добавить с помощью CSS. С оригинальным дизайном на сайте, можно заметить, что к фону добавлен элемент анимации. Это можно увидеть на тематических ресурсах, так как в последнее время стало популярной эта тенденция. Если говорим анимация, то многие безусловно думают про программу Flash. Так как с ее помощью можете создавать оригинальные и интерактивные анимации, что потом выставляют на интернет ресурс.

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

CSS

Код

.animation {
background: #c1bcbc url(картинка под форматом.gif) no-repeat left top;
}

Как создать анимированный GIF

Если вы хотите создать свой собственный анимированный GIF для использования в своем сообщении, есть много бесплатных онлайн-производителей GIF на выбор. В приведенном выше примере мы создали этот анимированный GIF, используя два изображения в Paint, с бесплатным создателем GIF, который можно найти в поисковой системе.

Важно:

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

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

Передвигающийся фон

HTML

Код

CSS

Код

@keyframes animatedBackground {
  0 {
  background-position: 0 0
  }
  100% {
  background-position: -600px 600px /* анимируем свойство background-position */
  }
}
/* Mozilla Firefox 5.0+ */
@-moz-keyframes animatedBackground {
  0 {
  background-position: 0 0
  }
  100% {
  background-position: -600px 600px
  }
}
/* Safari 4.0+, Chrome 4.0+ */
@-webkit-keyframes animatedBackground {
  0 {
  background-position: 0 0
  }
  100% {
  background-position: -600px 600px
  }
}
/* Opera 12.0+ */
@-o-keyframes animatedBackground {
  0 {
  background-position: 0 0
  }
  100% {
  background-position: -600px 600px
  }
}

#dankud-kametlag {
  position: relative;
  height: 740px;
  width: 100%;
  background: #065380;
  background-image: url(http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/css-animation-background.png);
  animation: animatedBackground 60s linear infinite;
  -moz-animation: animatedBackground 60s linear infinite;
  -webkit-animation: animatedBackground 60s linear infinite;
  -o-animation: animatedBackground 60s linear infinite;
}

Высоту ставим в ручную, ширина уже по умолчанию на весь монитор будет.

Демонстрация

08 Сентября 2018 Просмотров: 1641 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

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