你可以在没有 jQuery 的情况下做到这一点。这是示例。
HTML
<div id="top">
<p id="test1">Fading Text Shadow 1</p>
<p id="test2">Fading Text Shadow 2</p>
<p id="test3">Fading Text Shadow 3</p>
<p id="test4">Fading Text Shadow 4</p>
<p id="test5">Fading Text Shadow 5</p>
</div>
CSS
#top p {
text-shadow : 2px 2px 2px rgba(255, 0, 0, 0.05);
/* Set shadow color by rgba() or rgb().
Also, set alpha channel greater than 0 */
}
Javascript
onload = function() {
var randomElm = function() {
for(var i = Math.floor(Math.random() * elements.length); locArr[i];) {
i = Math.floor(Math.random() * elements.length);
}
locArr[i] = true;
fadeInTextShadow(elements[i], i);
setTimeout(function() { randomElm(); }, 5000);
},
fadeInTextShadow = function(elm, n) {
var tShadow = document.defaultView.getComputedStyle(elm).textShadow;
if(tShadow && tShadow.match(/rgba?\(([0-9\.%]+)\s*,\s*([0-9\.%]+)\s*,\s*([0-9\.%]+)(\s*,\s*[0-9\.]+)?\)/)) {
var r = RegExp.$1, g = RegExp.$2, b = RegExp.$3, a = RegExp.$4 ? RegExp.$4.replace(/^\s*,\s*/, '') * 1 + 0.05 : 0.05, rgba = 'rgba(' + r + ',' + g + ',' + b + ',' + (a < 1 ? a : 1) + ')';
elm.style.textShadow = tShadow.replace(/rgba?\(.+?\)/, rgba);
a < 1 ? setTimeout(function() { fadeInTextShadow(elm, n) }, 100) : (a >= 1 && setTimeout(function() { fadeOutTextShadow(elm, n) }, 3000));
}
},
fadeOutTextShadow = function(elm, n) {
var tShadow = document.defaultView.getComputedStyle(elm).textShadow;
if(tShadow && tShadow.match(/rgba?\(([0-9\.%]+)\s*,\s*([0-9\.%]+)\s*,\s*([0-9\.%]+)(\s*,\s*[0-9\.]+)?\)/)) {
var r = RegExp.$1, g = RegExp.$2, b = RegExp.$3, a = RegExp.$4 ? RegExp.$4.replace(/^\s*,\s*/, '') * 1 - 0.05 : 0.95, rgba = 'rgba(' + r + ',' + g + ',' + b + ',' + (a > 0.05 ? a : 0.05) + ')';
elm.style.textShadow = tShadow.replace(/rgba?\(.+?\)/, rgba);
a > 0.05 ? setTimeout(function() { fadeOutTextShadow(elm, n) }, 100) : locArr[n] = false;
}
},
elements = document.querySelectorAll('#top p'),
locArr = [];
for(var i = 0, l = elements.length; i < l; i++) {
locArr[locArr.length] = false;
}
randomElm();
}
活生生的例子
http://asamuzak.jp/test/textshadow_fade_test