Бегущая строка на чистом CSS и HTML - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Бегущая строка на чистом CSS и HTML (Анимированный эффект для текста на CSS)

Бегущая строка на чистом CSS и HTML

Kosten

Пятница, 06 Июля 2018, 21:18 | Сообщение 1

Администраторы

Сообщений:44490

Награды: 70

« 557 »

Здесь узнаете, как можно заставить двигаться текст с помощью чистого 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

Среда, 22 Августа 2018, 03:38 | Сообщение 2

Администраторы

Сообщений:44490

Награды: 70

« 557 »

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

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

Среда, 29 Августа 2018, 15:08 | Сообщение 3

Заблокированные

Сообщений:9

Награды: 0

« -9 »

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

Код

<marquee direction="right">Бегущая строка cлева направо</marquee>

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

Мой сайт http://cssave.info/
-----------------------------
Я доволен тем, что он у меня есть!

Страна: (BY)