Как создать эффект выделения в CSS3/Javascript?

У меня есть фрагмент текста, который при нажатии выделяется, изменяя цвет фона. Я хотел бы анимировать выделение, чтобы цвет фона постепенно менялся слева направо, как если бы кто-то действительно выделял текст. Любые мысли о том, как это было бы достижимо с помощью CSS3 и/или Javascript/jQuery?


javascript jquery css jquery-effects
person user2398029    schedule 20.04.2012    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Если вас устраивают некоторые функции только для CSS3, вы можете использовать переходы, градиенты и background-size:

.highlightable {
    background-size: 0 100%;
    background-repeat: no-repeat;
    -webkit-transition: background-size 0.5s ease-out;
    -moz-transition: background-size 0.5s ease-out;
    -ms-transition: background-size 0.5s ease-out;
    -o-transition: background-size 0.5s ease-out;
    transition: background-size 0.5s ease-out;
}

.highlightable.highlight {
    background-image: -webkit-linear-gradient(yellow, yellow);
    background-image: -moz-linear-gradient(yellow, yellow);
    background-image: -ms-linear-gradient(yellow, yellow);
    background-image: -o-linear-gradient(yellow, yellow);
    background-image: linear-gradient(yellow, yellow);
    background-size: 100% 100%;
}​

Вот демо.

person Ry-♦    schedule 20.04.2012
comment
Именно то, что я искал. Спасибо! - person user2398029; 21.04.2012

arrow_upward
0
arrow_downward

Многие библиотеки JavaScript упрощают эту задачу, например, моя любимая: YUI.

В противном случае без библиотеки я бы установил массив с шестнадцатеричными промежуточными значениями цвета, которые вы хотите, чтобы ваш фон имел в каждый временной интервал; и используйте метод setTimeout(), чтобы несколько раз быстро изменить цвет фона; например

setTimeout("document.getElementById('mySpan').style.backgroundColor = myColors[i]; i++;", 50);
person Reece    schedule 20.04.2012
comment
Кроме того, никогда не передавайте строку в setTimeout. - person Ry-♦; 21.04.2012