Как я могу создать эффект выделения?

Ответ 1

С небольшим изменением разметки, вот мой подход (я только что вставил span внутри абзаца):

.marquee {
  width: 450px;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  /* show the marquee just outside the paragraph */
  animation: marquee 15s linear infinite;
}

.marquee span:hover {
  animation-play-state: paused
}


/* Make it move */

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

<p class="marquee">
   <span>
       Windows 8 and Windows RT are focused on your life—your friends 
       and family, your apps, and your stuff. With new things like the 
       Start screen, charms and a Microsoft account, you can spend    
       less time searching and more time doing.
   </span>
   </p>

Ответ 2

Анимация принятых ответов не работает в Safari, я обновил ее, используя translate вместо padding-left, что обеспечивает более плавную, пуленепробиваемую анимацию.

Также в принятой демоверсии ответов есть множество ненужных стилей.

Поэтому я создал простую версию, если вы просто хотите вырезать и вставить полезный код, а не тратить 5 минут на прохождение демонстрации.

http://jsfiddle.net/e8ws12pt/

.marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
    height: 16px;
    display: block;
}
.marquee span {
    display: inline-block;
    text-indent: 0;
    overflow: hidden;
    -webkit-transition: 15s;
    transition: 15s;
    -webkit-animation: marquee 15s linear infinite;
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    0% { transform: translate(100%, 0); -webkit-transform: translateX(100%); }
    100% { transform: translate(-100%, 0); -webkit-transform: translateX(-100%); }
}

<p class="marquee"><span>Simple CSS Marquee - Lorem ipsum dolor amet tattooed squid microdosing taiyaki cardigan polaroid single-origin coffee iPhone. Edison bulb blue bottle neutra shabby chic. Kitsch affogato you probably haven't heard of them, keytar forage plaid occupy pitchfork. Enamel pin crucifix tilde fingerstache, lomo unicorn chartreuse plaid XOXO yr VHS shabby chic meggings pinterest kickstarter.</span></p>

Ответ 3

Основываясь на предыдущем ответе, в основном @fcalderan, эта область прокрутки прокручивается при наведении, с тем преимуществом, что анимация прокручивается полностью, даже если текст короче, чем пространство в ней, также любая длина текста занимает такое же количество времени (это может будь плюсом или минусом) когда не зависал текст возврата в исходное положение.

Нет жестко заданного значения, кроме времени прокрутки, лучше всего подходит для небольших пространств прокрутки

.marquee {
    width: 100%;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    display: inline-flex;    
}

.marquee span {
    display: flex;        
    flex-basis: 100%;
    animation: marquee-reset;
    animation-play-state: paused;                
}

.marquee:hover> span {
    animation: marquee 2s linear infinite;
    animation-play-state: running;
}

@keyframes marquee {
    0% {
        transform: translate(0%, 0);
    }    
    50% {
        transform: translate(-100%, 0);
    }
    50.001% {
        transform: translate(100%, 0);
    }
    100% {
        transform: translate(0%, 0);
    }
}
@keyframes marquee-reset {
    0% {
        transform: translate(0%, 0);
    }  
}

<span class="marquee">
    <span>This is the marquee text</span>
</span>

Ответ 4

Следующее должно делать то, что вы хотите.

@keyframes marquee {
    from  { text-indent:  100% }
    to    { text-indent: -100% }
}

Ответ 5

Я думаю, вам стоит пойти на некоторый слайдер текста javascript, который отлично работает со всем браузером. Мне понравился этот, и вы можете делать больше вещей с тем же:

http://jscroller2.markusbordihn.de/example/endless/