如何在CSS3/Javascript中创建“高亮”效果？

Question

我有一段文字，当点击时会通过更改其背景色来突出显示。我想要动画效果，使背景色从左到右逐渐变化，就像有人实际上正在突出显示文本。您认为如何使用CSS3和/或Javascript / jQuery来实现这一目标？

- user2398029

Answer 1

如果您可以接受一些仅限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%;
}​

这里有个演示。

此链接为一个演示。

- Ry-

Answer 2

许多JavaScript库使这变得非常容易，例如我的最爱：YUI

否则，如果没有库，我会设置一个带有十六进制中间颜色值的数组，每个时间片都要设置你想要的背景颜色；并使用setTimeout()方法在快速连续几次更改背景颜色；例如：

setTimeout("document.getElementById('mySpan').style.backgroundColor = myColors[i]; i++;", 50); 

- Reece

---

另外，永远不要将字符串传递给 setTimeout。 - Ry-