• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов HTML » Бегущая строка на чистом CSS и HTML (Анимированный эффект для текста на CSS)
Бегущая строка на чистом CSS и HTML
Kosten
Дата: Пятница, 2018-07-06, 21:18 | Сообщение 1
Администраторы
Сообщений:18463
Награды: 55


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



HTML

Код
<div class="sindicates-coming">
  <div>
    <span>Новые слухи о производстве AMD GPU и долгосрочных планах - в том числе о некоторых, </span>
    <span>которые предполагают долгое долгое ожидание преемника Vega.</span>
  </div>
</div>


CSS

Код
.sindicates-coming {
  height: 25px;
  width: 615px;

  overflow: hidden;
  position: relative;
}

.sindicates-coming div {
  display: block;
  width: 197%;
  height: 28px;

  position: absolute;
  overflow: hidden;

  animation: marquee 5s linear infinite;
}

.sindicates-coming span {
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}


Демонстрация
Прикрепления: 2269591.jpg(37.5 Kb)
Страна: (RU)
Kosten
Дата: Среда, 2018-08-22, 03:38 | Сообщение 2
Администраторы
Сообщений:18463
Награды: 55


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

HTML

Код
<h1 class="karetukolameg"><span>Анимированная бегущая строка текста</span></h1>


CSS

Код
@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    100% {
        -webkit-transform: translate(-100%, 0);
        transform: translate(-100%, 0)
    }
}

@-moz-keyframes scroll {
    0% {
        -moz-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    100% {
        -moz-transform: translate(-100%, 0);
        transform: translate(-100%, 0)
    }
}

@keyframes scroll {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0)
    }
}

.karetukolameg {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.karetukolameg span {
    display: inline-block;
    padding-left: 100%;
    -webkit-animation: scroll 5s infinite linear;
    -moz-animation: scroll 5s infinite linear;
    animation: scroll 5s infinite linear;
}


Демонстрация
Страна: (RU)
logangl
Дата: Среда, 2018-08-29, 15:08 | Сообщение 3
Заблокированные
Сообщений:9
Награды: 0


Если нужна стандартная бегущая строка без каких-либо размеров и эффектов, можно использовать код - <marquee></marquee>
Тогда никаких CSS не нужно будет прописывать
Код
<marquee direction="right">Бегущая строка cлева направо</marquee>


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


Мой сайт http://cssave.info/
-----------------------------
Я доволен тем, что он у меня есть!
Страна: (BY)
Zлой_Zаяц
Дата: Четверг, 2018-09-27, 12:45 | Сообщение 4
Пользователи
Сообщений:1
Награды: 0


да
Страна: (UA)
Форум » Веб-разработка » Скрипты для сайтов HTML » Бегущая строка на чистом CSS и HTML (Анимированный эффект для текста на CSS)
  • Страница 1 из 1
  • 1
Поиск: