使用CSS3慢慢添加阴影

Question

当向下滚动时，我使用jquery在网站的标题中添加了阴影。但是，我希望在添加类时“淡入”阴影，并在删除时淡出。

可以使用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;}

谢谢！

Answer 1

使用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

Answer 2

像这样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'
    });
});