• Страница 1 из 1
  • 1
Форум » Веб-разработка » Коды сайта HTML » Анимация текстового цикла на чистом CSS3 (Текст под анимацией идет по всему экрану под эффектом)
Анимация текстового цикла на чистом CSS3
Kosten
Дата: Суббота, 2021-05-15, 21:34 | Сообщение 1
Онлайн
Администраторы
Сообщений:37902
Награды: 65


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

По дизайну:



HTML
Код
<div class="animation">
  <div class="salopad">
    <div class="kidsam">
Бесконечность не предел<span> </span></div>
  <div class="kidsam">Бесконечность не предел<span> </span></div>
  <div class="kidsam">Бесконечность не предел<span> </span></div>
  <div class="kidsam">Бесконечность не предел<span> </span></div>
  
</div>
  <div class="salopad">
  <div class="kidsam">Бесконечность не предел<span> </span></div>
  <div class="kidsam">Бесконечность не предел<span> </span></div>
  <div class="kidsam">Бесконечность не предел<span> </span></div>
  <div class="kidsam">Бесконечность не предел<span> </span></div>
  
</div>
</div>

CSS

Код
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #282828;
}
.animation {
  display: flex;
  white-space: nowrap;
}

.salopad {
  display: flex;
  font-size: 5vw;
  -webkit-animation: loop 20s infinite linear;
  animation: loop 20s infinite linear;
}

.kidsam {color: #00ffb6;}

@keyframes loop {
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

Как видим, что не чего сложного нет, где можно выставить свое оригинальное оформление.

Демонстрация
Прикрепления: 7579191.png(14.1 Kb) · css3-only.zip(2.5 Kb)
Страна: (RU)
Форум » Веб-разработка » Коды сайта HTML » Анимация текстового цикла на чистом CSS3 (Текст под анимацией идет по всему экрану под эффектом)
  • Страница 1 из 1
  • 1
Поиск: