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

Here's a demo.

Answer 2

大量的JavaScript庫使這很容易，例如我最喜歡的：YUI

否則沒有我會集與你想你的背景有在每個時間片的十六進制中介顏色值的數組庫;並使用setTimeout()方法快速連續多次更改背景顏色;例如

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