使用 CSS3 缓慢添加阴影

Posted 2023-05-08

【中文标题】使用 CSS3 缓慢添加阴影

【英文标题】：Add shadow slowly using CSS3

【发布时间】：2012-08-29 18:10:53

【问题描述】：

向下滚动时，我使用 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;

谢谢！

【参考方案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

【讨论】：

这适用于添加阴影，但是当删除类时，阴影会消失，没有“动画”。

事实上，确实如此。只需删除课程。我更新了小提琴以反映这一点。

你是对的！谢谢！我将过渡放在“开始”类中，添加/删除影子类就像一个魅力。谢谢杰森！

【参考方案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'
    );
);

​