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 страницу и понять эту анимацию, которая по свойствам не сложная, но в каких-то моментов очень нужное на сайтах.

Демонстрация
02 Апреля 2022 Загрузок: 3 Просмотров: 1001 Комментариев: (1)

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

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

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

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