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

Эффект анимации текстового сбоя на CSS3

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

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

Анимация текстовых эффектов при наведении курсора CSS

HTML

Код

<div class="vanema-domuka" data-text="ZorNet.Ru">ZorNet.Ru</div>

CSS

Код

.vanema-domuka{
  font-size:3rem;
  position:relative;
  line-height: 1.2;
  transform:scale(2, 4);
}
.vanema-domuka::before,
.vanema-domuka::after{
  position:absolute;
  top:0;
  left:0;
  content:attr(data-text);
  background:var(--main-bg-color);
  clip:rect(0,0,0,0);
  width:100%;
}
.vanema-domuka::before{
  animation:vanema-domuka-2 3s 500 linear alternate-reverse;
  left:-2px;
  text-shadow: 1px 0 #fbe601, 2px 0 #eb3406;
}
.vanema-domuka::after{
  animation:vanema-domuka-1 2s 500 linear alternate-reverse;
  left:2px;
  text-shadow: 1px 0 #63c3ea, 2px 0 #2b30d1;
}
@-webkit-keyframes vanema-domuka-1 {
  0% {
  clip: rect(25px, 600px, 4px, 0);
  }
  5.88235% {
  clip: rect(22px, 600px, 12px, 0);
  }
  11.76471% {
  clip: rect(44px, 600px, 20px, 0);
  }
  17.64706% {
  clip: rect(7px, 600px, 29px, 0);
  }
  23.52941% {
  clip: rect(13px, 600px, 18px, 0);
  }
  29.41176% {
  clip: rect(21px, 600px, 31px, 0);
  }
  35.29412% {
  clip: rect(17px, 600px, 20px, 0);
  }
  41.17647% {
  clip: rect(41px, 600px, 7px, 0);
  }
  47.05882% {
  clip: rect(43px, 600px, 2px, 0);
  }
  52.94118% {
  clip: rect(44px, 600px, 12px, 0);
  }
  58.82353% {
  clip: rect(44px, 600px, 22px, 0);
  }
  64.70588% {
  clip: rect(10px, 600px, 17px, 0);
  }
  70.58824% {
  clip: rect(31px, 600px, 13px, 0);
  }
  76.47059% {
  clip: rect(40px, 600px, 22px, 0);
  }
  82.35294% {
  clip: rect(16px, 600px, 30px, 0);
  }
  88.23529% {
  clip: rect(33px, 600px, 34px, 0);
  }
  94.11765% {
  clip: rect(9px, 600px, 40px, 0);
  }
  to {
  clip: rect(45px, 600px, 21px, 0);
  }
}
@keyframes vanema-domuka-1 {
  0% {
  clip: rect(25px, 600px, 4px, 0);
  }
  5.88235% {
  clip: rect(22px, 600px, 12px, 0);
  }
  11.76471% {
  clip: rect(44px, 600px, 20px, 0);
  }
  17.64706% {
  clip: rect(7px, 600px, 29px, 0);
  }
  23.52941% {
  clip: rect(13px, 600px, 18px, 0);
  }
  29.41176% {
  clip: rect(21px, 600px, 31px, 0);
  }
  35.29412% {
  clip: rect(17px, 600px, 20px, 0);
  }
  41.17647% {
  clip: rect(41px, 600px, 7px, 0);
  }
  47.05882% {
  clip: rect(43px, 600px, 2px, 0);
  }
  52.94118% {
  clip: rect(44px, 600px, 12px, 0);
  }
  58.82353% {
  clip: rect(44px, 600px, 22px, 0);
  }
  64.70588% {
  clip: rect(10px, 600px, 17px, 0);
  }
  70.58824% {
  clip: rect(31px, 600px, 13px, 0);
  }
  76.47059% {
  clip: rect(40px, 600px, 22px, 0);
  }
  82.35294% {
  clip: rect(16px, 600px, 30px, 0);
  }
  88.23529% {
  clip: rect(33px, 600px, 34px, 0);
  }
  94.11765% {
  clip: rect(9px, 600px, 40px, 0);
  }
  to {
  clip: rect(45px, 600px, 21px, 0);
  }
}
@-webkit-keyframes vanema-domuka-2 {
  0% {
  clip: rect(8px, 600px, 50px, 0);
  }
  5.88235% {
  clip: rect(40px, 600px, 41px, 0);
  }
  11.76471% {
  clip: rect(33px, 600px, 16px, 0);
  }
  17.64706% {
  clip: rect(41px, 600px, 9px, 0);
  }
  23.52941% {
  clip: rect(14px, 600px, 30px, 0);
  }
  29.41176% {
  clip: rect(22px, 600px, 33px, 0);
  }
  35.29412% {
  clip: rect(37px, 600px, 48px, 0);
  }
  41.17647% {
  clip: rect(25px, 600px, 37px, 0);
  }
  47.05882% {
  clip: rect(1px, 600px, 18px, 0);
  }
  52.94118% {
  clip: rect(19px, 600px, 27px, 0);
  }
  58.82353% {
  clip: rect(33px, 600px, 29px, 0);
  }
  64.70588% {
  clip: rect(2px, 600px, 38px, 0);
  }
  70.58824% {
  clip: rect(18px, 600px, 41px, 0);
  }
  76.47059% {
  clip: rect(19px, 600px, 45px, 0);
  }
  82.35294% {
  clip: rect(44px, 600px, 32px, 0);
  }
  88.23529% {
  clip: rect(13px, 600px, 43px, 0);
  }
  94.11765% {
  clip: rect(4px, 600px, 6px, 0);
  }
  to {
  clip: rect(30px, 600px, 25px, 0);
  }
}
@-keyframes vanema-domuka-2 {
  0% {
  clip: rect(8px, 600px, 50px, 0);
  }
  5.88235% {
  clip: rect(40px, 600px, 41px, 0);
  }
  11.76471% {
  clip: rect(33px, 600px, 16px, 0);
  }
  17.64706% {
  clip: rect(41px, 600px, 9px, 0);
  }
  23.52941% {
  clip: rect(14px, 600px, 30px, 0);
  }
  29.41176% {
  clip: rect(22px, 600px, 33px, 0);
  }
  35.29412% {
  clip: rect(37px, 600px, 48px, 0);
  }
  41.17647% {
  clip: rect(25px, 600px, 37px, 0);
  }
  47.05882% {
  clip: rect(1px, 600px, 18px, 0);
  }
  52.94118% {
  clip: rect(19px, 600px, 27px, 0);
  }
  58.82353% {
  clip: rect(33px, 600px, 29px, 0);
  }
  64.70588% {
  clip: rect(2px, 600px, 38px, 0);
  }
  70.58824% {
  clip: rect(18px, 600px, 41px, 0);
  }
  76.47059% {
  clip: rect(19px, 600px, 45px, 0);
  }
  82.35294% {
  clip: rect(44px, 600px, 32px, 0);
  }
  88.23529% {
  clip: rect(13px, 600px, 43px, 0);
  }
  94.11765% {
  clip: rect(4px, 600px, 6px, 0);
  }
  to {
  clip: rect(30px, 600px, 25px, 0);
  }
}

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

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

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

05 Февраля 2021 Загрузок: 3 Просмотров: 917 Комментариев: (2)

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

СКАЧАТЬ

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

Kosten

Комментарии: 2
Порядок вывода комментариев: BALLAS 06 Февраля 2021 18:03¹ +1 для страницы 404 зайдет не плохо Сопрано 07 Февраля 2021 20:48² 0 Еще под тематику Сталкер не плохо смотреться должно.