Question

标题说明了所有内容，但我会更具体和详细。这是我试图达到这个效果的3个星期，但它并不像听起来那么容易，而且开始令人沮丧。

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

所以，我想用jquery animate（）函数为css的text shadow属性设置动画。当你进入页面时，我想让它变得模糊;比如像

// 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 Aaron的jquery css钩子，可以在这里找到：

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

没有运气。

如果可以，请帮助我:)。

提前致谢。

Answer 1

如果我没弄错的话，支持text-shadow的所有浏览器都支持css过渡到最新版本（Opera，Safari，Chrome，Firefox）。尚未测试过它，但你应该用它来制作文本阴影动画。

Answer 2

如果我没弄错的话，这就是你要找的东西：http://tympanus.net/Tutorials/BlurMenu/index5.html

Jquery动画 - 在悬停时动画文本阴影css，以实现从模糊到清晰文本的缓慢效果

2 个答案: