jquery动画 - 动画文字阴影CSS悬停以实现从模糊到清晰文本的慢效果

标题说除了我会更具体和详细。我试图达到这种效果的时间是3周，但听起来并不那么容易，而且开始令人沮丧。jquery动画 - 动画文字阴影CSS悬停以实现从模糊到清晰文本的慢效果

我想要在悬停时动画文字阴影以实现从模糊文本到清晰文本的慢效果。

所以，我想使用jquery animate（）函数为CSS的文本阴影属性设置动画;当你进入页面时，我想让它变得模糊;例如像

// CSS

.blur{color: transparent; text-shadow: 0px 0px 40px #000}

用CSS

这样会很容易把它清脆的悬停;

// CSS

.blur:hover{color: transparent; text-shadow: 0px 0px 0px #000}

，但怎样才能使它减缓去模糊脆？

我在网上找到很多例子，但没有一个像我想要的那样工作。现在这是我正在使用的实际代码。

$(document).ready(function() { 

$.fx.step.textShadowBlur = function(fx){ 
$(fx.elem).css({'text-shadow': '0px 0px' + Math.floor(fx.now) + 'px #000'}); 
}; 

$('.blur').hover(function(){ 
$(this).animate({ textShadowBlur: '10px'}, console.log('antani'), 1000); 
}); 

});

我创建了CSS的虚拟财产，因为我知道，jQuery的犯规支持文字阴影都有它是一个多变量属性。

我也由Brian亚伦试图jQuery的CSS挂钩，可以在这里找到：

https://github.com/brandonaaron/jquery-cssHooks/blob/master/textshadow.js

没有运气。

请帮我，如果你可以:)

在此先感谢。

来源

2011-04-20 user3690586

如果我没有弄错，所有支持文本 - 影子支持CSS的浏览器都会在其最新版本（Opera，Safari，Chrome，Firefox）中进行转换。还没有测试过，但你应该保持动画文字阴影。

来源

2011-04-20 12:12:40 Litek

感谢您的答复。我试过你的方法;它的工作原理：http://www.dimitrinube.com/work/francescovanstraten/，你可以在这里看到。无论如何，它在safari，chrome中运行良好，但我必须更新到最新版本的firefox（4）才能在其中运行。也许与jQuery我可以有更强大的支持？另外，Firefox比其他浏览器处理模糊不同：半径看起来更大。 – user3690586 2011-04-20 14:35:12

你可能会发现这篇[关于css-tricks的文章]（http://css-tricks.com/fun-with-blurred-text/）iteresting。它显示有趣的东西与文字阴影动画，其中之一是使用jQuery csshooks动画半径，它适用于我。 – Litek 2011-04-26 14:15:26

如果我没有弄错，这是你在找什么：http://tympanus.net/Tutorials/BlurMenu/index5.html

来源

2013-02-07 11:01:04 fuzzyvagina

jquery动画 - 动画文字阴影CSS悬停以实现从模糊到清晰文本的慢效果

回答

相关问题