使用CSS3緩慢添加陰影

向下滾動時，我使用jquery添加了一個陰影添加到網站的標題。不過，我想在添加類時「淡入」陰影，當刪除時淡入淡出。使用CSS3緩慢添加陰影

這可以使用CSS3來完成嗎？

這是滾動時添加/刪除的類。

.header_shadow{-webkit-box-shadow: 0 10px 6px -6px #777;-moz-box-shadow: 0 10px 6px -6px #777;box-shadow: 0 10px 6px -6px #777;}

謝謝！

來源

2012-09-05 Fede E.

使用CSS過渡（添加前綴，你會）：

.header_shadow { 
    box-shadow: 0 0 0 0 #777; 
    transition: box-shadow 3s ease-in-out; 
} 

.header_shadow.addshadow { 
    box-shadow: 0 10px 6px -6px #777; 
}

這裏有一個fiddle

來源

2012-09-05 04:32:35 Jason

對於添加工作陰影，但是在移除課程時，陰影消失而沒有「動畫」。 –

其實，它的確如此。只要刪除班級。我更新了小提琴以反映這一點。 – Jason

你是對的！謝謝！我把過渡放在「開始」課上，增加/刪除影子課程就像一個魅力。謝謝傑森！ –

像這樣Demo

$('#box').mouseover(function() { 
     $(this).delay(200).animate({ 
     'boxShadowX': '10px', 
     'boxShadowY':'10px', 
     'boxShadowBlur': '20px' 
    }); 
}); 

$('#box').mouseout(function() { 
     $(this).delay(200).animate({ 
     'boxShadowX': '0px', 
     'boxShadowY':'0px', 
     'boxShadowBlur': '0px' 
    }); 
});

來源

2012-09-05 04:42:19 Sender

使用CSS3緩慢添加陰影

回答

相關問題