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

Текстовый прелоадер с анимацией на CSS

Можно с точностью сказать, что прелоадер, который создан красиво, он будет отличным приложением для любого тематического сайта. Анимационный Preloaders стал уже обычным явлением для современного сайта, так как можно найти тот стиль и дизайн, который отлично впишется в стилистику. Также их еще называют загрузчики страниц, которые основном идут в минимизированной форме в случае загрузки страницы, где будет находиться контент, где стало ожидание совершенно небольшое, если ранее основном выставляли на изображение, где пре вуалировал формат GIF, то сейчас идет на чистом стиле для вашего сайта.

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

Элементы могут быть созданы, где как разные элементы HTML, где изначально указываем content свойство. Без указания этого псевдоэлемент не будет отображаться. Свойство содержимого может содержать разнообразные знаки, но основном идет текст, что можно самому редактировать, что будет полезным веб мастеру. Предварительный загрузчик может в себе содержать такие словосочетание, как Идет загрузка страницы, или то, что вы сами посчитаете, так как можно под тематику выстроить слово, которое будет при загрузках постоянно появляться.

Так реально будет выглядеть, что снято при проверки на работоспособность:

Анимированный текстовый прелоадер с помощью CSS

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

HTML

Код

CSS

Код

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font-size: 14px;
  line-height: 28px;
  font-family: 'Open Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.dunimategam_kopreloades {
  background: -webkit-linear-gradient(to bottom right, #3a807f 0%, #41cc91 100%);
  background-image: linear-gradient(to bottom right, #3ab1af 0%, #38c78b 100%);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  overflow: auto;
}

.gesponsiveb_ontentalotam {
  width: 100%;
  text-align: center;
}
.gesponsiveb_ontentalotam>b {
  display: inline-block;
  font-size: 29px;
  line-height: 1.7;
  -webkit-animation: flip 4s ease-out infinite;
  animation: flip 3s ease-out infinite;
  text-shadow: 5px 5px 9px rgba(21, 20, 20, 0.48);
}

.gesponsiveb_ontentalotam>b:first-of-type {
  -webkit-animation-delay: 0s;
  animation-delay: 0s
}

.gesponsiveb_ontentalotam>b:nth-of-type(2) {
  -webkit-animation-delay: .1s;
  animation-delay: .1s
}

.gesponsiveb_ontentalotam>b:nth-of-type(3) {
  -webkit-animation-delay: .2s;
  animation-delay: .2s
}

.gesponsiveb_ontentalotam>b:nth-of-type(4) {
  -webkit-animation-delay: .3s;
  animation-delay: .2s
}

.gesponsiveb_ontentalotam>b:nth-of-type(5) {
  -webkit-animation-delay: .4s;
  animation-delay: .4s
}

.loader>b:nth-of-type(6) {
  -webkit-animation-delay: .5s;
  animation-delay: .5s
}

.gesponsiveb_ontentalotam>b:last-of-type {
  -webkit-animation-delay: .6s;
  animation-delay: .6s
}
@keyframes flip {
  0% {
  color: #5a5757;
  font-weight: 400;
  letter-spacing: -.1em
  }

  30%,70% {
  color: #5a5757;
  font-weight: 400
  }

  35%,65% {
  color: #5a5757;
  font-weight: 700;
  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  -ms-transform: rotateY(0);
  transform: rotateY(0)
  }

  40% {
  color: #e84747
  }

  45% {
  color: #3fc154
  }

  50% {
  color: #e4c11a;
  font-weight: 700;
  letter-spacing: .3em;
  -webkit-transform: rotateY(360deg);
  -moz-transform: rotateY(360deg);
  -ms-transform: rotateY(360deg);
  transform: rotateY(360deg)
  }

  55% {
  color: #b563d0
  }

  60% {
  color: #3a74c1
  }

  100% {
  color: #484545;
  letter-spacing: -.1em;
  font-weight: 400
  }
}

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

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

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

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

Источник: Dbmast.ru

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

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

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

Kosten

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