ZorNet.Ru — сайт для вебмастера » HTML и CSS » 3D текст с анимационным эффектом CSS

3D текст с анимационным эффектом CSS

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

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

Так получится после установочного процесса:

Установка:

HTML

Код

<section id="stroyeniye-tekstura">
  <h1>
  <span>ZorNet.</span>
  <span style="color:#fb0a0a">Ru</span>
  </h1>
</section>

CSS

Код

@import "https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap";

#stroyeniye-tekstura {
  background: radial-gradient(circle, #fffc00 0%, #f0ed17 100%);
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Luckiest Guy", cursive
}

#stroyeniye-tekstura h1 {
  margin: 0;
  font-size: 10em;
  padding: 0;
  color: #f7f5f5;
  text-shadow: 0 0.1em 20px #131212, 0.05em -0.03em 0 #0c0c0c, 0.05em 0.005em 0 #131212, 0 0.08em 0 #0e0e0e, 0.05em 0.08em 0 #080808, 0 -0.03em 0 #0e0e0e, -0.03em -0.03em 0 #0e0e0e, -0.03em 0.08em 0 #0a0a0a, -0.03em 0 0 #0a0a0a;
}

#stroyeniye-tekstura h1 span {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  display: inline-block
}

#stroyeniye-tekstura h1 span:first-child {
  -webkit-animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
  animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate
}

#stroyeniye-tekstura h1 span:last-child {
  -webkit-animation: bopB 1s .2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
  animation: bopB 1s .2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate
}

@-webkit-keyframes bop {
  0% {
  -webkit-transform: scale(0.9);
  transform: scale(0.9)
  }

  50%,
  100% {
  -webkit-transform: scale(1);
  transform: scale(1)
  }
}

@keyframes bop {
  0% {
  -webkit-transform: scale(0.9);
  transform: scale(0.9)
  }

  50%,
  100% {
  -webkit-transform: scale(1);
  transform: scale(1)
  }
}

@-webkit-keyframes bopB {
  0% {
  -webkit-transform: scale(0.9);
  transform: scale(0.9)
  }

  80%,
  100% {
  -webkit-transform: scale(1) rotateZ(-3deg);
  transform: scale(1) rotateZ(-3deg)
  }
}

@keyframes bopB {
  0% {
  -webkit-transform: scale(0.9);
  transform: scale(0.9)
  }

  80%,
  100% {
  -webkit-transform: scale(1) rotateZ(-3deg);
  transform: scale(1) rotateZ(-3deg)
  }

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

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

22 Октября 2020 Загрузок: 2 Просмотров: 998 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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