javascript - 如何在 CSS3/Javascript 中创建“突出显示”效果？

Question

我有一段文本，单击时会通过更改其背景颜色来突出显示。我想为突出显示设置动画，以便背景颜色从左到右逐渐变化，就好像有人实际上在突出显示文本一样。关于如何使用 CSS3 和/或 Javascript/jQuery 实现这一点的任何想法？

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%;
}​

这是一个演示。

Answer 2

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

否则，如果没有库，我将设置一个具有十六进制中间颜色值的数组，您希望您的背景在每个时间片上都有；并使用setTimeout()快速连续多次改变背景颜色的方法；例如

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