SM - Стильные решения для вашего сайта

Анимация текста с прыжками, переворотами и покачиванием – пример на CSS

Весёлые прыжки и перевороты: Забавная анимация текста на CSS


Эта креативная и забавная анимация текста на CSS оживит ваш сайт и привлечёт внимание пользователей. Каждый символ текста выполняет прыжок и переворот, создавая динамичный и запоминающийся эффект.

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

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

See the Pen jump-and-a-flip-and-a-wobble by Ryan Mulligan (@hexagoncircle) on CodePen.

        
HTML

<main>
  <div style="--i: 0; --color: #be185d"></div>
  <div style="--i: 1; --color: #4f46e5"></div>
  <div style="--i: 2; --color: #047857"></div>
</main>

        
CSS
* {
  box-sizing: border-box;
}
 
html,
body {
  height: 100%;
}
 
body {
  display: grid;
  place-items: center;
  margin: 0;
  background-color: #09090b;
}
 
main {
  display: flex;
  gap: 5vmin;
}
 
div {
  --delay: 0.1s;
  --duration: 2s;
  --int: 1;
  --rotate: 0.5turn;
  display: grid;
  grid-template-areas: "stack";
  place-items: center;
  inline-size: 10vmin;
  aspect-ratio: 1;
  border-radius: 1vmin;
  background-color: var(--color);
  -webkit-animation: jump-flip var(--duration) calc(var(--i) * var(--delay)) infinite;
          animation: jump-flip var(--duration) calc(var(--i) * var(--delay)) infinite;
 
  &::after {
    --int: -1;
    --rotate: -0.5turn;
    content: "";
    grid-area: stack;
    background-image: url("dаta:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTguMjksMTgyLjE3YTEyLDEyLDAsMCwxLTE2LjQ3LDQuMTJMMTQwLDE0OS4xOVYyMTZhMTIsMTIsMCwwLDEtMjQsMFYxNDkuMTlsLTYxLjgyLDM3LjFhMTIsMTIsMCwxLDEtMTIuMzUtMjAuNThMMTA0LjY4LDEyOCw0MS44Myw5MC4yOUExMiwxMiwwLDEsMSw1NC4xOCw2OS43MUwxMTYsMTA2LjgxVjQwYTEyLDEyLDAsMCwxLDI0LDB2NjYuODFsNjEuODItMzcuMWExMiwxMiwwLDEsMSwxMi4zNSwyMC41OEwxNTEuMzIsMTI4bDYyLjg1LDM3LjcxQTEyLDEyLDAsMCwxLDIxOC4yOSwxODIuMTdaIj48L3BhdGg+PC9zdmc+");
    background-size: 100%;
    inline-size: 50%;
    block-size: 50%;
    -webkit-animation: jump-flip var(--duration) calc(var(--i) * var(--delay) + 0.63s)
      infinite;
            animation: jump-flip var(--duration) calc(var(--i) * var(--delay) + 0.63s)
      infinite;
  }
}
 
@-webkit-keyframes jump-flip {
  10% {
    rotate: 0.01turn;
    scale: 1.2 0.5;
    translate: 0 calc(35% * var(--int));
  }
  15% {
    rotate: 0turn;
    scale: 0.75 2.5;
  }
  20%,
  35% {
    scale: 1;
    translate: 0 calc(-250% * var(--int));
  }
  40% {
    scale: 0.8 2;
  }
  42%,
  100% {
    rotate: var(--rotate);
  }
  45% {
    scale: 1.2 0.8;
    translate: 0 calc(20% * var(--int));
    /* prettier-ignore */
    -webkit-animation-timing-function: linear(
      0, 0.218 2.1%, 0.862 6.5%, 1.114, 1.296 10.7%, 1.346, 1.37 12.9%, 1.373,
      1.364 14.5%, 1.315 16.2%, 1.032 21.8%, 0.941 24%, 0.891 25.9%, 0.877,
      0.869 27.8%, 0.87, 0.882 30.7%, 0.907 32.4%, 0.981 36.4%, 1.012 38.3%, 1.036,
      1.046 42.7% 44.1%, 1.042 45.7%, 0.996 53.3%, 0.988, 0.984 57.5%, 0.985 60.7%,
      1.001 68.1%, 1.006 72.2%, 0.998 86.7%, 1
    );
            animation-timing-function: linear(
      0, 0.218 2.1%, 0.862 6.5%, 1.114, 1.296 10.7%, 1.346, 1.37 12.9%, 1.373,
      1.364 14.5%, 1.315 16.2%, 1.032 21.8%, 0.941 24%, 0.891 25.9%, 0.877,
      0.869 27.8%, 0.87, 0.882 30.7%, 0.907 32.4%, 0.981 36.4%, 1.012 38.3%, 1.036,
      1.046 42.7% 44.1%, 1.042 45.7%, 0.996 53.3%, 0.988, 0.984 57.5%, 0.985 60.7%,
      1.001 68.1%, 1.006 72.2%, 0.998 86.7%, 1
    );
  }
  80%,
  100% {
    scale: 1;
    translate: 0 0;
  }
}
 
@keyframes jump-flip {
  10% {
    rotate: 0.01turn;
    scale: 1.2 0.5;
    translate: 0 calc(35% * var(--int));
  }
  15% {
    rotate: 0turn;
    scale: 0.75 2.5;
  }
  20%,
  35% {
    scale: 1;
    translate: 0 calc(-250% * var(--int));
  }
  40% {
    scale: 0.8 2;
  }
  42%,
  100% {
    rotate: var(--rotate);
  }
  45% {
    scale: 1.2 0.8;
    translate: 0 calc(20% * var(--int));
    /* prettier-ignore */
    -webkit-animation-timing-function: linear(
      0, 0.218 2.1%, 0.862 6.5%, 1.114, 1.296 10.7%, 1.346, 1.37 12.9%, 1.373,
      1.364 14.5%, 1.315 16.2%, 1.032 21.8%, 0.941 24%, 0.891 25.9%, 0.877,
      0.869 27.8%, 0.87, 0.882 30.7%, 0.907 32.4%, 0.981 36.4%, 1.012 38.3%, 1.036,
      1.046 42.7% 44.1%, 1.042 45.7%, 0.996 53.3%, 0.988, 0.984 57.5%, 0.985 60.7%,
      1.001 68.1%, 1.006 72.2%, 0.998 86.7%, 1
    );
            animation-timing-function: linear(
      0, 0.218 2.1%, 0.862 6.5%, 1.114, 1.296 10.7%, 1.346, 1.37 12.9%, 1.373,
      1.364 14.5%, 1.315 16.2%, 1.032 21.8%, 0.941 24%, 0.891 25.9%, 0.877,
      0.869 27.8%, 0.87, 0.882 30.7%, 0.907 32.4%, 0.981 36.4%, 1.012 38.3%, 1.036,
      1.046 42.7% 44.1%, 1.042 45.7%, 0.996 53.3%, 0.988, 0.984 57.5%, 0.985 60.7%,
      1.001 68.1%, 1.006 72.2%, 0.998 86.7%, 1
    );
  }
  80%,
  100% {
    scale: 1;
    translate: 0 0;
  }
}

jump-and-a-flip-and-a-wobble.zip
0 9.41 Kb
Нашли ошибку? Сообщите нам, мы исправим!
0 лайков 0 просмотров
Комментариев нет
Чтобы оставить комментарий, необходимо на сайте.
Копирование запрещено!

Сайт SATAMAX.RU