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

Простая анимация загрузки при помощи CSS3

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

У него в стилях задан класс smalokad-usegosibe, который будет полностью отвечать за дизайн. Также установлена скорость на 700, чтоб понятнее было, чем меньше выставляем, тем быстрее производится разворот. Также есть одно большое преимущество в использование заключается в том, что он не зависит от разрешения. Это где вы можете масштабировать его до заданным вами размера, что аналогично будет выглядеть корректно.

Так реально идет по умолчанию:

HTML

Код

CSS

Код

@-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); }
}

.smalokad-usegosibe {
  width: 41px;
  height: 41px;
  border: 8px solid #4e4b4b;
  border-left-color: #3c3a3a;
  border-right-color: transparent;
  border-bottom-color: #4a4747;
  border-radius: 100%;
  -webkit-animation: spin 700ms infinite linear;
  -moz-animation: spin 700ms infinite linear;
  -ms-animation: spin 700ms infinite linear;
  animation: spin 700ms infinite linear;
}

На этом все, как можно заметить, что стилистика не очень большая, в ней только то что нужно для преобразования.

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

28 Августа 2018 Просмотров: 1594 Комментариев: (0)

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

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

Kosten

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