анимация текста (3 варианта)

Приветствую, читателей и гостей блога. Предлагаю вашему вниманию 3 варианта оформления текста или заголовка. А именно, анимированный текст на чистом CSS. Думаю, что кому - нибудь и придётся по душе при оформлении сообщений или страниц.

эффект анимации текста

Чтобы просмотреть каждый из вариантов, скопируйте нужный код и установите его в этом редакторе.

Вариант 1. Самый простой способ . Переливающийся текст. Можно настроить интервал мигания и задать нужный цвет.

Код

<div class="tsanext-animation">шпаргалки блогерши</div>
<style>
.tsanext-animation {
  font-size: 79px;
  font-family: 'sonos-logoregular';
  text-align: center;
  background: -webkit-linear-gradient(left, #503a86, #de494f, #ea8d5b, #ca497a, #6148a0);
  background: linear-gradient(left, #33235B, #D62229, #E97639, #792042, #33235B);
  background-size: 3200px 200px;
  margin-top: 20vh;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-animation: animate-logo;
  -webkit-animation-delay: 0;
  -webkit-animation-duration: 7s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
  transition: font-size 500ms ease-in-out;
}
}
@media only screen and (min-width: 40.063em) {
  .tsanext-animation {
  margin-top: 30vh;
  font-size: 80px;
  }
}
@media only screen and (min-width: 64.063em) {
  .tsanext-animation {
  margin-top: 25vh;
  font-size: 79px;
  }
}
@media only screen and (min-width: 90.063em) {
  .tsanext-animation {
  margin-top: 20vh;
  font-size: 80px;
  }
}
@media only screen and (min-width: 120.063em) {
  .tsanext-animation {
  margin-top: 15vh;
  font-size: 79px;
  }
}
@-webkit-keyframes animate-logo {
  0% {
  background-position: 0 3200px;
  }
  100% {
  background-position: 3200px 0;
  }
}</style>


Вариант 2. Прыгающие буковки. Используя свойство  CSS3 @keyframe создадим своеобразный 3D-эффект.

Код

<div class='is-animate'>

  <div class="l">П</div>

  <div class="l">Р</div>

  <div class="l">И</div>

  <div class="l">В</div>

  <div class="l">Е</div>

  <div class="l">Т</div>

  <div class="l">И</div>

  <div class="l">К</div>

</div>

<style>


.is-animate {

        background: #F08080;

    box-sizing: border-box;

    font-size: 66px;

    display: -webkit-inline-box;

    padding: 14px;

    border-radius: 7px;

}

.is-animate > div {

    animation-name: style;

    display: -webkit-inline-box;

    color: #fff;

    padding: 9px;

    background:#F08080;

    font-family: 'Indie Flower', cursive;

    box-shadow: 2px 2px 9px 2px;

}

.l{

  animation: letterspacing 1s infinite alternate cubic-bezier(.2, 0, 0, 1);

}
.is-animate > div {

  animation-duration: 1s;

  animation-fill-mode: both;

  animation-iteration-count: infinite;

}



.is-animate > div:nth-child(1) { animation-delay: 0.0s }

.is-animate > div:nth-child(2) { animation-delay: 0.1s }

.is-animate > div:nth-child(3) { animation-delay: 0.2s }

.is-animate > div:nth-child(4) { animation-delay: 0.3s }

.is-animate > div:nth-child(5) { animation-delay: 0.4s }

.is-animate > div:nth-child(6) { animation-delay: 0.5s }

.is-animate > 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);

  }

}

</style>


Вариант 3. При наведении курсора текст начинает "дёргаться".

Код

<p class="text animated rubberBand">НАВЕДИ НА МЕНЯ</p>

<style>

.text {
  text-align: center;
  margin-top: 20px;
  color: #F47C0A;
  font-size: 2.0em;
  font-family: sans-serif;
  text-transform: uppercase;
}

.animated:hover {
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  cursor:pointer;
}
@keyframes rubberBand {
  0% {transform: scale(1);}
  30% {transform: scaleX(1.15) scaleY(0.75);}
  40% {transform: scaleX(0.75) scaleY(1.25);}
  60% {transform: scaleX(1.15) scaleY(0.85);}
  100% {transform: scale(1);}
}
p.rubberBand {
  animation-name: rubberBand;
}
</style>


Анимация применяется где угодно. С помощью её можно двигать любые элементы страницы -  текст, картинку, произвольные фигуры,  что придет на ум. Если решите применить у себя в блоге, просто в редакторе сообщения или страницы, перейдите в режим HTML и в нужном месте установите код.

Посмотрите ещё некоторые эффекты для текста

Текстовые эффекты на CSS
Мигающий текст

Всем добра и до встречи.

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

введите пожалуйста свой email :

23 комментария:

  1. Спасибо за полезности --- https://tintebp.blogspot.com/2020/07/blog-post.html )

    ОтветитьУдалить
  2. K8, как лихо Вы уже установили. Здорово!

    ОтветитьУдалить
  3. Ни фига себе К8 отличился1 А вообще, очень забавная и симпатичная анимация (у меня в голове вертится реанимация0. Но меня в компьютерном плане уже не реанимируешь. Завидую К8!

    ОтветитьУдалить
    Ответы
    1. Семён, да уж и не заморачивайтесь. K8 молодец. сразу новое экспериментирует.

      Удалить
  4. Как интересно! Но уже ничего не охота устанавливать!

    ОтветитьУдалить
  5. Ирина, привет. А зря. Коды эти не скрипты джава и всякие библиотеки. Одна картинка может тяжелее быть. Иногда и в меру можно и даже нужно чем - то выделять страницы и сообщения. Просто сухой текст по другому воспринимается. визуальная информация обрабатывается быстрее, чем сам текст. http://www.shpargalochki.ru/2017/04/pro-oformlenie-statej-v-bloge.html

    ОтветитьУдалить
  6. Приветик, Вика! Очень мне понравился первый код, только очень крупный текст получается... Я пробовала уменьшить, тогда получается без анимации... (((
    Вика, подскажи, пожалуйста, в каких местах надо менять, а в каких не надо... Спасибо!!! )))

    ОтветитьУдалить
    Ответы
    1. Елена в коде меняйте на меньшее .tsanext-animation {
      font-size: 79px;
      и в двух местах font-size: 80px;. размер величины на анимацию не влияет.

      Удалить
  7. Вика, приветик. Очень даже мило, для разнообразия замечательно. Прыгающие на любителя, а первый и третий прямо-таки для тех (себя имею ввиду), кому надо поспокойнее. Спасибочки!!!

    ОтветитьУдалить
    Ответы
    1. Люба, привет. Да прыгающие на любителя. Можно на одной страничке где сделать. Последний тоже смешной получился.

      Удалить
  8. Да я и не заморачиваюсь, Вика! Мне хватает того, в чем я, действительно, что-то понимаю. В дальнейших новеллах будет про японцев. Для них название моего блога - нонсенс. У каждого есть одна жена, одно хобби и одна профессия. Но уж в этом-то он разбирается, как Бог! Если он специалист по забиванию гвоздей 20 мм., то 21 мм. он даже в руки не возьмёт. И не потому, что не сумеет, а потому что у них, косоглазых, это уже другая профессия.

    ОтветитьУдалить
    Ответы
    1. Семён, это на самом деле, каждому своё. И здорово, что все мы абсолютно разные. И знания , и увлечения, и характеры. Жить на планете с полностью идентичными людьми было бы скучно, рутинно и совершенно неинтересно.

      Удалить
  9. Ах, как верно Вы это определили, Вика! Мне жутко приятно с Вами общаться, а ведь мы могли рассориться и разбежаться из-за какого-то кретина-хакера, которого мои системные спецы так и не сумели вычислить. Впрочем, как их, сволочей, вычислишь, если оне Пентагон взламывают. Впрочем, я понимаю идею взломать Пентагон, а мы-то за что? На нас ведь гринов не срубишь!

    ОтветитьУдалить
  10. Семён, если из - за таких ссорится... Я вас умоляю... в жизни и без того есть на что нервы мотать

    ОтветитьУдалить
  11. Ответы
    1. Елена, попробовать всегда можно. А понравится или нет потом решите.

      Удалить
  12. Вика, спасибо большое! Уменьшить удалось, но, почему-то очень большой отступ... Может где-то еще надо изменить? Вот, посмотри, пожалуйста ( я потом исправлю, если не получится, пока так оставила, что бы ты посмотрела)
    https://mirosslava55.blogspot.com/2020/07/kollazh-po-uroku-kira.html

    ОтветитьУдалить
    Ответы
    1. Елена со значением margin-top: 20%; /* Отступ сверху */поиграйтесь.

      Удалить
  13. Спасибо большое, Вика, наша выручалочка!!! :-))) Теперь всё ок! ❤❤❤

    ОтветитьУдалить
  14. Вика,приветик.А как во втором варианте можно 2 слова сделать? В смысле словосочетание,пробел как вставить?

    ОтветитьУдалить
  15. Нужно менять и рассчитывать свойство transform: scale и child. Можно такой же код только с другим классом. Здесь задан класс is-animate прописать другой везде и в стилях и дивах

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск