动画文字 - 阴影

我的网站标题中有一些关键字。每隔几秒钟，我都希望其中一个能够使用CSS文本 - 阴影属性发光。动画文字 - 阴影

但是，JQuery动画似乎并没有很好地支持CSS文本阴影属性。

http://jsfiddle.net/VWBsU/：这是我想要的结果，但发光必须淡入和淡出。

http://jsfiddle.net/VWBsU/1/有了一个比较常见的CSS属性，如颜色，动画作品完美，红色那种衰落英寸

http://jsfiddle.net/VWBsU/2/但想要进行动画时，CSS text-shadow属性甚至没有出现它。

有谁知道如何淡入淡出文本阴影属性？

来源

2012-09-10 user1026090

试试这个

JS代码

var elements = jQuery("#top p").get(); 
setInterval(function() { 
    var element = elements[Math.floor(Math.random() * elements.length)]; 
    $(element).toggleClass('glow').animate({ 
     textShadow: "rgba(255,255,255,1) 0 0 15px" 
    }, 
    2000, 
    function() { 
     $(element).toggleClass('glow').animate({ 
      textShadow: "rgba(255,255,255,1) 0 0 0" 
     }); 
    }); 
}, 
2000);

来源

2012-09-10 09:54:02 Codegiant

谢谢你，伟大工程 – user1026090

jQuery动画不支持文字阴影。但看起来你的问题已经在这里解决了：Animating elements of text-shadow with jQuery

你必须自己创建动画，最好的方法是通过扩展jQuery和创建自定义动画（如上面的链接）。

来源

2012-09-10 09:37:16 tmazur

有人已经指出我这个插件http://www.alexpeattie.com/projects/animate-textshadow/ – user1026090

你可以不用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

来源

2012-09-10 14:51:19 Kazz

动画文字 - 阴影

回答

相关问题