ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимированный текст на CSS + HTML

Анимированный текст на CSS + HTML

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

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

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

Здесь изначально убедитесь, что ваш анимированный текст остается на экране достаточно долго, чтобы ваша аудитория могла его понять.

Первый вариант:

HTML

Код

<body>
<p>
  <span>
  ZorNet.Ru для вебмастера
  </span>
</p>
</body>

CSS

Код

p {
  border: 4px double rgba(255, 255, 255, 0.25);
  border-width: 4px 0;
  padding: 1.5em 0em;
  position: absolute;
  top: 17%;
  left: 50%;
  width: 49em;
  margin: 0 0 0 -20em;
}
span {
  text-transform: uppercase;
  font-size: 45px;

  padding: .25em 0 .325em;
  display: block;
  text-shadow: 0 0 80px rgba(255, 255, 255, 0.9);
  animation: bounce-top 2s infinite both;
  }

@keyframes bounce-top {
  0% {
  transform: translateY(-45px);
  animation-timing-function: ease-in;
  opacity: 1;
  }
  24% {
  opacity: 1;
  }
  40% {
  transform: translateY(-24px);
  animation-timing-function: ease-in;
  }
  65% {
  transform: translateY(-12px);
  animation-timing-function: ease-in;
  }
  82% {
  transform: translateY(-6px);
  animation-timing-function: ease-in;
  }
  93% {
  transform: translateY(-4px);
  animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
  transform: translateY(0px);
  animation-timing-function: ease-out;
  }
  100% {
  transform: translateY(0px);
  animation-timing-function: ease-out;
  opacity: 1;
  }
}

Все очень просто, где изначально задали знаком оттенок, а потом выставили анимацию, что не так быстро и не медленно.

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

Второй вариант:

HTML

Код

CSS

Код

.animated-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.animated-text ul {
  margin: 0;
  padding: 0;
  list-style: none;
  }
  .animated-text ul li {
  display: inline-block;
  font-size: 45px;
  text-transform: uppercase;
  margin-left: 15px;
  color: #22A7F0;
  opacity: 1;
  transition: all 2.5s ease 0s;
  }
.animated-text ul li:first-child {
  margin-left: 0px;
  }

.animated-text.hidden-text ul li {
  opacity: 0;
}
  .animated-text.hidden-text ul li:nth-child(1) {
  transform: translate(-200px, -180px);
  }
.animated-text.hidden-text ul li:nth-child(2) {
  transform: translate(100px, 180px);
  }
  .animated-text.hidden-text ul li:nth-child(3) {
  transform: translate(250px, 50px)
  }
  .animated-text.hidden-text ul li:nth-child(4) {
  transform: translate(-80px, -100px)
  }
  .animated-text.hidden-text ul li:nth-child(5) {
  transform: translate(200px, -180px)
  }
  .animated-text.hidden-text ul li:nth-child(6) {
  transform: translate(10px, -80px)
  }
  .animated-text.hidden-text ul li:nth-child(7) {
  transform: translate(-250px, 70px)
  }
  .animated-text.hidden-text ul li:nth-child(8) {
  transform: translate(-240px, 140px)
  }
  .animated-text.hidden-text ul li:nth-child(9) {
  transform: translate(290px, -100px)
  }
  .animated-text.hidden-text ul li:nth-child(10) {
  transform: translate(60px, -170px)
  }
  .animated-text.hidden-text ul li:nth-child(11) {
  transform: translate(190px, -20px)
  }
  .animated-text.hidden-text ul li:nth-child(12) {
  transform: translate(-200px, -180px)
  }

Код

$(function () {
  setTimeout(function () {
  $(".animated-text").removeClass("hidden-text");
  }, 500);
});

Это вариант работает при открытие страницы, где со всех сторон собирается значение виде слова или название.

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

Третий вариант:

HTML

Код

<h1>CSS3 анимация перемещения текста</h1>

CSS

Код

h1 {
  animation: move 3s;
  -webkit-animation: move 3s;
}

@keyframes move {
  from {
  margin-left: 100%;
  width: 300%;
  }

  to {
  margin-left: 0%;
  width: 100%;
  }
}

@-webkit-keyframes move {
  from {
  margin-left: 100%;
  width: 300%;
  }

  to {
  margin-left: 0%;
  width: 100%;
  }
}

Простой и красивый эффект CSS3 анимации для перемещения текста.

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

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

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

07 Марта 2019 Просмотров: 6399 Комментариев: (0)

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

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

Kosten

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