ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимация загрузки текста в 3D эффекте CSS

Анимация загрузки текста в 3D эффекте CSS

Эта анимация под загрузку текста в 3D эффекте, где все создано на стилистике CSS. Текст помещается внутри закругленного прямоугольника, и каждая буква также имеет границу вокруг него. Код масштабирует и масштабирует каждую букву в течение нескольких миллисекунд, чтобы придать ей 3D-эффект и, в свою очередь, также создает волновой эффект. Он использует правило CSS3 @keyframe для размещения 3D-эффектов с использованием свойства. Он масштабирует буквы после определенных процентов, чтобы создать эффект масштабирования и уменьшения.

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

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

Особенности:

- Очень простая в использовании;
- Полная загрузка экрана без каких-либо усилий;
- Можно указать положение и размер;
- Может устанавливать фон, текст и спрайт загрузки;
- Может отключить фон и текст;
- Может одновременно создавать несколько экземпляров;

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

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

HTML

Код

CSS

Код

.gkilastodka{
  margin:75px auto;
  width:75%;
}
.secondsa-ptedsagon {
  background: #ffb200;
  box-sizing: border-box;
  font-size: 66px;
  display: -webkit-inline-box;
  padding: 14px;
  border-radius: 7px;
}
.secondsa-ptedsagon > div {
  animation-name: style;
  display: -webkit-inline-box;
  color: #fff;
  padding: 9px;
  background: #ffb200;
  font-family: 'Indie Flower', cursive;
  box-shadow: 2px 2px 9px 2px;
}
.kilas{
  animation: letterspacing 1s infinite alternate cubic-bezier(.2, 0, 0, 1);
}

.secondsa-ptedsagon > div {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

.secondsa-ptedsagon > div:nth-child(1) { animation-delay: 0.0s }
.secondsa-ptedsagon > div:nth-child(2) { animation-delay: 0.1s }
.secondsa-ptedsagon > div:nth-child(3) { animation-delay: 0.2s }
.secondsa-ptedsagon > div:nth-child(4) { animation-delay: 0.3s }
.secondsa-ptedsagon > div:nth-child(5) { animation-delay: 0.4s }
.secondsa-ptedsagon > div:nth-child(6) { animation-delay: 0.5s }
.secondsa-ptedsagon > div:nth-child(7) { animation-delay: 0.6s }

@keyframes style {
  from {
  transform: scale3d(1, 1, 1);
  }
  30% {
  box-shadow: 0px 0px 0px 0px;
  transform: scale3d(1.25, 0.75, 1);
  }
  40% {
  transform: scale3d(0.75, 1.25, 1);
  }
  50% {
  transform: scale3d(1.15, 0.85, 1);
  }
  65% {
  transform: scale3d(.95, 1.05, 1);
  }
  75% {
  transform: scale3d(1.05, .95, 1);
  }
  to {
  transform: scale3d(1, 1, 1);
  }
}

@keyframes letterspacing {
  0% {
  filter: blur(0.1rem);
  }


  100% {
  filter: blur(0.5rem);
  }
  to {
  letter-spacing: none;
  filter: blur(0rem);
  }
}

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

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

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

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

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

Kosten

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