javascript - 如何在 CSS3/Javascript 中创建 "highlighting"效果？

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

Here's a demo.