Прыгающий текст на CSS

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

Во всех примерах задана анимация к тексту, что напоминает эффекты, предложенные  в этом посте, но в другом исполнении.

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

Вариант 1. Подпрыгивающие буквы. 

Код

<span class="back">
  <span>п</span>
  <span>р</span>
  <span>и</span>
  <span>в</span>
  <span>е</span>
  <span>т</span>
  <span>и</span>
<span>к</span>
</span>
<style>
.back span {
    font-size:3em;
    color:#F2C640;
    background:#262B37;
    display:table-cell;
    box-shadow:inset 0 0 5px rgba(0,0,0,0.3), 0 5px 0 #ccc;
    padding: 0 15px;
    line-height: 100px;
    animation:jumb 2s infinite;
  }
  @keyframes jumb {
    0% {
      transform:translateY(0px)
    }
    50% {
      transform:translateY(-30px);
      box-shadow:0 15px 0 rgb(242, 198, 64);
    }
    100% {
      transform:translateY(0px) 
    }
  }
  .back span:nth-child(1) {
    animation-delay:0s;
  }
  .back span:nth-child(2) {
    animation-delay:.1s;  
  }
  .back span:nth-child(3) {
    animation-delay:.2s;
  }
  .back span:nth-child(4) {
    animation-delay:.3s;  
  }
  .back span:nth-child(5) {
    animation-delay:.4s;
  }
  .back span:nth-child(6) {
    animation-delay:.5s;  
  }
  .back span:nth-child(7) {
    animation-delay:.6s;
  }
</style>

 

Вариант 2. Шейк, так шейк - буквы танцуют.

Код

<h1>shake effect!</h1>
<style>
h1 {
  position: relative;
  text-transform: uppercase;
  letter-spacing: 6px;
  font-size: 10vw;
  font-weight: 900;
  text-decoration: none;
  color: white;
  display: inline-block;
  background-size: 120% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  -ms-background-clip: text;
  -ms-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  background-image: linear-gradient(45deg, 
                    #7794ff, 
                    #44107A,
                    #FF1361,
                    #FFF800);
  animation: .8s shake infinite alternate;
}
@keyframes shake {
  0% { transform: skewX(-15deg); }
  5% { transform: skewX(15deg); }
  10% { transform: skewX(-15deg); }
  15% { transform: skewX(15deg); }
  20% { transform: skewX(0deg); }
  100% { transform: skewX(0deg); }  
}
</style>

Вариант 3. Подпрыгивающие буковки с тенью

Код

<h1><span>щ</span>
  <span>е</span>
  <span>к</span>
  <span>о</span>
  <span>т</span>
  <span>н</span>
  <span>o</span>
  <span>!</span>
</h1>
<style>
h1 {
  height: 100px;
}
h1 span {
  position: relative;
  top: 20px;
  display: inline-block;
  animation: bounce .3s ease infinite alternate;
  font-family: 'Titan One', cursive;
  font-size: 80px;
  color: #FFF;
  text-shadow: 0 1px 0 #CCC,
               0 2px 0 #CCC,
               0 3px 0 #CCC,
               0 4px 0 #CCC,
               0 5px 0 #CCC,
               0 6px 0 transparent,
               0 7px 0 transparent,
               0 8px 0 transparent,
               0 9px 0 transparent,
               0 10px 10px rgba(0, 0, 0, .4);
}
h1 span:nth-child(2) { animation-delay: .1s; }
h1 span:nth-child(3) { animation-delay: .2s; }
h1 span:nth-child(4) { animation-delay: .3s; }
h1 span:nth-child(5) { animation-delay: .4s; }
h1 span:nth-child(6) { animation-delay: .5s; }
h1 span:nth-child(7) { animation-delay: .6s; }
h1 span:nth-child(8) { animation-delay: .7s; }
@keyframes bounce {
  100% {
    top: -20px;
    text-shadow: 0 1px 0 #CCC,
                 0 2px 0 #CCC,
                 0 3px 0 #CCC,
                 0 4px 0 #CCC,
                 0 5px 0 #CCC,
                 0 6px 0 #CCC,
                 0 7px 0 #CCC,
                 0 8px 0 #CCC,
                 0 9px 0 #CCC,
                 0 50px 25px rgba(0, 0, 0, .2);
  }
}
</style>

Всё это делается с помощью CSS, без подключения сторонних скриптов и библиотек. Легко можно изменить стили в каждом коде под желаемый результат. Цвет, ширину, фон, шрифт - всё на ваше усмотрение. Обращу лишь внимание, что в последних двух кодах, прописан тег заголовка h1. Можно заменить H1 до H6 , на более низкий по приоритету, в зависимости от того где будет это применено. Устанавливается всё в гаджет или прямо на странице блога в режиме HTML.

Речь, конечно, о стандартных шаблонах Блоггер. 

Спасибо, что заглядываете в мои шпаргалки. Увидимся. 

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email