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

Question

标题说明了一切，但我会更具体和详细。我花了 3 周时间尝试实现这种效果，但这并不像听起来那么容易，而且开始令人沮丧。

我希望鼠标悬停时的动画文本阴影能够实现从模糊文本到清晰文本的缓慢效果。

所以，我想用 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 Aaron 的 jquery css hook，可以在这里找到:

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

运气不好。

如果可以，请帮助我:)

提前致谢。

Answer 1

如果我没记错的话，所有支持文本阴影的浏览器都在其最新版本(Opera、Safari、Chrome、Firefox)中支持 css 转换。尚未对其进行测试，但您应该可以用它来制作文本阴影动画。