» »

Плавное появление и исчезновение текста CSS

Плавное появление и исчезновение текста CSS

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

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

Приступаем к установки:

HTML

Код
<div class="kespatares kespatares-1">
  <span>С</span>
  <span>А</span>
  <span>И</span>
  <span>Т</span>
</div>
<div class="kespatares kespatares-1">
  <span>S</span>
  <span>E</span>
  <span>O</span>
</div>
<div class="kespatares kespatares-1">
  <span>C</span>
  <span>S</span>
  <span>S</span>
  <span>3</span>
</div>

CSS

Код
body {
  background: #19ab8e;
  overflow-x: hidden;
  font-family: 'Rubik Mono One', sans-serif;
  padding: 119px;
  text-align: center;
}

.kespatares {
  color: #19ab8e;
  font-size: 0;
  line-height: 1;
}
.kespatares span {
  font-size: 119px;
  display: inline-block;
  -webkit-animation: move 2s ease-in-out infinite;
  animation: move 2s ease-in-out infinite;
}
.kespatares span:nth-child(2) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.kespatares span:nth-child(3) {
  -webkit-animation-delay: 1.0s;
  animation-delay: 1.0s;
}
.kespatares span:nth-child(4) {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

@-webkit-keyframes move {
  0% {
  -webkit-transform: translate(-33%, 0);
  transform: translate(-33%, 0);
  }
  50% {
  text-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
  }
  100% {
  -webkit-transform: translate(33%, 0);
  transform: translate(33%, 0);
  }
}

@keyframes move {
  0% {
  -webkit-transform: translate(-33%, 0);
  transform: translate(-33%, 0);
  }
  50% {
  text-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
  }
  100% {
  -webkit-transform: translate(33%, 0);
  transform: translate(33%, 0);
  }
}
* {
  box-sizing: border-box;
}

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

Демонстрация
28.07.2018 Загрузок: 1 Просмотров: 279 Комментарий: (4)

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

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

Комментарий: 4
phtf@atua
phtf@atua 29.07.2018 17:291
0
Как это вообще может сгодиться?
Kosten
Kosten 29.07.2018 18:272
0
Это веб мастеру решать, но вдруг, кому то как раз такой трюк нужен, так, что не могу так утверждать.
Koneko
Koneko 30.07.2018 09:593
0
Это довольно креативно. 04b
Kosten
Kosten 31.07.2018 20:004
0
Здесь не поспоришь, оригинально.
avatar