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懸停以實現從模糊到清晰文本的慢效果

回答

相關問題