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

Простая анимация CSS вращение предмета

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

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

Красивая анимация вращения для сайта на чистом CSS


Здесь установочный процесс не сложен по своей конструкции. Где для начало вписываем стили, и тамже в самом верху можно редактировать размер, и выставлять скорость вращение предметов.

Установка:

HTML

Код
<div class="kruzhelo_sedmeta">
  <img class="vraseniye_snimka" src="https://photo-screen.ru/i/view.php?img=c721cad472d8931f9fa7.PNG"/>
</div>

CSS

Код
.kruzhelo_sedmeta {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #156a20;
  height: 286px;
}
.vraseniye_snimka {
  width: 184px;
  -webkit-animation-name: rotation;
  -webkit-animation-duration: 15s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: rotation;
  -moz-animation-duration: 15s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -o-animation-name: rotation;
  -o-animation-duration: 15s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
  animation-name: rotation;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
   
@-webkit-keyframes rotation {
  0% {-webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -o-transform:rotate(0deg);
  transform:rotate(0deg);}
  100% {-webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);}
}
@-moz-keyframes rotation {
  0% {-webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -o-transform:rotate(0deg);
  transform:rotate(0deg);}
  100% {-webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);}
}
@-o-keyframes rotation {
  0% {-webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -o-transform:rotate(0deg);
  transform:rotate(0deg);}
  100% {-webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);}
}
@keyframes rotation {
  0% {-webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -o-transform:rotate(0deg);
  transform:rotate(0deg);}
  100% {-webkit-transform:rotate(360deg);
  -moz-transform:rotate(720deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);}
}

На этом установочный процесс полностью завершен. Где рекомендую посмотреть demo страницу и понять эту анимацию, которая по свойствам не сложная, но в каких-то моментов очень нужное на сайтах.

Демонстрация
2022-04-02 Загрузок: 3 Просмотров: 335 Комментарий: (1)

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

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

Оставь свой отзыв

Комментарий: 1
Kosten
Kosten 2022-04-09 21:381
0
По своей сути это простая анимация, где крутится с небольшой скоростью изображение, ччто больше сделано для привлечение внимание.
avatar