ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимация с прыгающими буквами на CSS

Анимация с прыгающими буквами на CSS

Создаем красивый эффект на буквы и на полный текст, где они будут прыгать, и находится в формате 3D, что оригинально и весело смотрится. Так как можно поставить на отдельные страницы, что создает веб мастер и подключить этот эффект. Также есть тема увидеть на фоне логотипа, если он небольшой и по формату подойдет. Так как мы сами задаем цветовую палитру и скорость, а точнее высоту, на которую они подпрыгивают. Здесь используется прекрасный анимационный текст, используя эффект Css, где можно просто немного поиграл в стилистике, используя свойства CSS для создания этой текстовой анимации.

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

В этом учебном пособии по CSS мы собираемся продемонстрировать, как создать эффект отсканированного текста, используя только HTML и CSS. Текст, который мы собираемся создать, дает иллюзию подпрыгивания вверх и вниз по окну просмотра. Эффект отскока создается с помощью анимации CSS и манипулирует свойством text-shadow CSS.

Как вы можете видеть в приведенном ниже коде, каждый элемент span имеет другое время анимации для создания эффекта в текстовой анимации.

HTML

Код

CSS

Код

h1 {
  text-align:center;
}

h1 span {
  position: relative;
  top: 19px;
  display: inline-block;
  -webkit-animation: bounce .3s ease infinite alternate;
  animation: bounce .3s ease infinite alternate;
  font-family: 'Titan One', cursive;
  font-size: 93px;
  line-height: 125px;
  color: #f9f5f5;
  text-shadow: 0 1px 0 #d0cbcb, 0 2px 0 #c7c3c3, 0 3px 0 #cecaca, 0 4px 0 #cecdcd, 0 5px 0 #ccc8c8, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent, 0 9px 0 transparent, 0 10px 0 transparent, 0 11px 0 transparent, 0 12px 0 transparent, 0 13px 0 transparent, 0 14px 0 transparent, 0 15px 0 transparent, 0 10px 10px rgba(12, 12, 12, 0.42);
}

h1 span:nth-child(2) { -webkit-animation-delay: .1s; animation-delay: .1s; }
h1 span:nth-child(3) { -webkit-animation-delay: .2s; animation-delay: .2s; }
h1 span:nth-child(4) { -webkit-animation-delay: .3s; animation-delay: .3s; }
h1 span:nth-child(5) { -webkit-animation-delay: .4s; animation-delay: .4s; }
h1 span:nth-child(6) { -webkit-animation-delay: .5s; animation-delay: .5s; }
h1 span:nth-child(7) { -webkit-animation-delay: .6s; animation-delay: .6s; }
h1 span:nth-child(8) { -webkit-animation-delay: .7s; animation-delay: .7s; }
h1 span:nth-child(9) { -webkit-animation-delay: .8s; animation-delay: .8s; }
h1 span:nth-child(10) { -webkit-animation-delay: .9s; animation-delay: .9s; }
h1 span:nth-child(11) { -webkit-animation-delay: 1s; animation-delay: 1s; }
h1 span:nth-child(12) { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; }
h1 span:nth-child(13) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
h1 span:nth-child(14) { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; }

@-webkit-keyframes bounce {
  100% {
  top: -20px;
  text-shadow: 0 1px 0 #bfbebe,
  0 2px 0 #bfbebe,
  0 3px 0 #bfbebe,
  0 4px 0 #bfbebe,
  0 5px 0 #bfbebe,
  0 6px 0 #bfbebe,
  0 7px 0 #bfbebe,
  0 8px 0 #bfbebe,
  0 9px 0 #bfbebe,
  0 10px 0 #bfbebe,
  0 11px 0 #bfbebe,
  0 12px 0 #bfbebe,
  0 13px 0 #bfbebe,
  0 14px 0 #bfbebe,
  0 15px 0 #bfbebe,
  0 50px 25px rgba(19, 18, 18, 0.23);
  }
}

@keyframes bounce {
  100% {
  top: -20px;
  text-shadow: 0 1px 0 #bfbebe,
  0 2px 0 #bfbebe,
  0 3px 0 #bfbebe,
  0 4px 0 #bfbebe,
  0 5px 0 #bfbebe,
  0 6px 0 #bfbebe,
  0 7px 0 #bfbebe,
  0 8px 0 #bfbebe,
  0 9px 0 #bfbebe,
  0 10px 0 #bfbebe,
  0 11px 0 #bfbebe,
  0 12px 0 #bfbebe,
  0 13px 0 #bfbebe,
  0 14px 0 #bfbebe,
  0 15px 0 #bfbebe,
  0 50px 25px rgba(10, 10, 10, 0.21);
  }
}

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

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

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

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

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

Kosten

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