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

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

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

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

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

Красивая анимация сбоя текста на HTML + 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 в области анимации уменьшилась, что теперь появилась возможность выставлять оригинальную анимацию, где только задействуем заданную стилистику.

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

Демонстрация
2021-02-05 Загрузок: 1 Просмотров: 327 Комментарий: (2)

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

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

Оставь свой отзыв

Комментарий: 2
BALLAS
BALLAS 2021-02-06 18:031
+1
для страницы 404 зайдет не плохо
Сопрано
Сопрано 2021-02-07 20:482
0
Еще под тематику Сталкер не плохо смотреться должно.
avatar