ZorNet.Ru — сайт для вебмастера » HTML и CSS » Текстовой эффект текста и логотипа на CSS

Текстовой эффект текста и логотипа на CSS

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

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

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

HTML

Код

<div class="dacreatingokus keavyweig">
Сайт
Zornet.Ru!
</div>

CSS

Код

.dacreatingokus {
  font-size: 47px;
  margin: 100px 0 0;
}

.dacreatingokus span {
  display: inline-block;
}

.dacreatingokus span:nth-of-type(2) {
  animation-delay: .05s;
}
.dacreatingokus span:nth-of-type(3) {
  animation-delay: .1s;
}
.dacreatingokus span:nth-of-type(4) {
  animation-delay: .15s;
}
.dacreatingokus span:nth-of-type(5) {
  animation-delay: .2s;
}
.dacreatingokus span:nth-of-type(6) {
  animation-delay: .25s;
}
.dacreatingokus span:nth-of-type(7) {
  animation-delay: .3s;
}
.dacreatingokus span:nth-of-type(8) {
  animation-delay: .35s;
}
.dacreatingokus span:nth-of-type(9) {
  animation-delay: .4s;
}
.dacreatingokus span:nth-of-type(10) {
  animation-delay: .45s;
}
.dacreatingokus span:nth-of-type(11) {
  animation-delay: .5s;
}
.dacreatingokus span:nth-of-type(12) {
  animation-delay: .55s;
}
.dacreatingokus span:nth-of-type(13) {
  animation-delay: .6s;
}
.dacreatingokus span:nth-of-type(14) {
  animation-delay: .65s;
}
.dacreatingokus span:nth-of-type(15) {
  animation-delay: .7s;
}
.animate span:nth-of-type(16) {
  animation-delay: .75s;
}
.animate span:nth-of-type(17) {
  animation-delay: .8s;
}
.dacreatingokus span:nth-of-type(18) {
  animation-delay: .85s;
}
.dacreatingokus span:nth-of-type(19) {
  animation-delay: .9s;
}
.dacreatingokus span:nth-of-type(20) {
  animation-delay: .95s;
}

/* Animation One */
.keavyweig span {
  color: #15882f;
  opacity: 0;
  transform: translate(-150px, -50px) rotate(-180deg) scale(3);
  animation: revolveScale .5s forwards;
}

@keyframes revolveScale {
  60% {
  transform: translate(20px, 20px) rotate(30deg) scale(.3);
  }

  100% {
  transform: translate(0) rotate(0) scale(1);
  opacity: 1;
  }
}

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

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

22 Сентября 2018 Просмотров: 1095 Комментариев: (0)

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

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

Kosten

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