如何在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%;
}?

这是一个演示.