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

Вращение изображения при помощи CSS3

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

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

Вообще от теорий переходим к основной практике:

Для начало рассмотрим основной материал, так он будет смотреться при стоп кадре:

Вращение изображения через CSS3

Приступаем к установки:

HTML

Код

CSS

Код

#asnipetun-derutheir {
  -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
  from {
  -webkit-transform: rotate(0deg);
  }
  to {
  -webkit-transform: rotate(359deg);
  }
}

Магия CSS3 создаст полную анимацию.

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

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

Бесконечное вращение изображения с помощью CSS3

Второй вариант, вращение элемента на картинке:

HTML

Код

CSS

Код

.dewsleteconta
{
  background-image: url("http://zornet.ru/ABVUN/sarunolas/zornet/back.jpg");
  display: block;
  width: 693px;
  height: 585px;

}

#inadvertisideals1
{
  position: relative;
  top: 403px;
  left: 152px;
}

#inadvertisideals2
{
  position: relative;
  top: 404px;
  left: 450px;

}

.inadvertisideals {
  z-index: 100;

  -webkit-animation-name: spin;
  -webkit-animation-duration: 2000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 2000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 2000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;

  animation-name: spin;
  animation-duration: 600ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@-ms-keyframes spin {
  from { -ms-transform: rotate(0deg); }
  to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  from {
  transform:rotate(0deg);
  }
  to {
  transform:rotate(360deg);
  }
}

Здесь как и было сказано, что анимация, называемая спит в горизонтальном виде, начинается с вращения по оси от 0 градусов и заканчивается на 360 градусов, вообщем как понимаете, делает полный оборот. Однако этого недостаточно, потому что нам нужно также определить некоторые временные переменные.

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

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

14 Июля 2018 Просмотров: 2638 Комментариев: (0)

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

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

Kosten

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