使用CSS 3盒影子渐渐？ [英] Fade in Box Shadow using CSS 3?

问题描述

我有一个脚本，一旦用户开始滚动框添加阴影，看起来非常漂亮。然而，这个盒子的影子瞬间补充说。我想preFER，它使用CSS 3，我曾尝试创建的不透明度从0更改关键帧褪色 - 1 1秒以上，但不起作用。

I have a script that as soon as the user starts to scroll a box shadow is added that looks very nice. However, this box shadow is added instantly. I would prefer that it fade in using CSS 3. I have tried creating keyframes that change the opacity from 0 - 1 over 1 second but that doesn't work.

下面是我使用的脚本：

$(function() {
 $(window).scroll(function() {
    var top_offset = $(window).scrollTop();
    if (top_offset) {
      $('.top_head_separator').addClass('fixed-top fade-in');
  }
});

CSS：

.fixed-top {
  background:#FFFFFF;
  box-shadow: 0 7px 15px 4px rgba(0,0,0,0.38);
  height: 90px;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;

}
@keyframes fadeIn {
  0% {opacity: 0;}  
  100% {opacity: 1;}
}

.fadeIn {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeIn;
}

我如何在盒子阴影淡出？

How do I have the box shadow fade in?

请注意：我省略了这个问题，厂商prefixes，但他们都在我的code

Note: I omitted vendor prefixes in this question but they are in my code.

推荐答案

我觉得你只是有一个拼写错误和语法错误或两个，否则，你的罚款。两件事情：

I think you just have a spelling mistake and a syntax error or two, otherwise you're fine. Two things:

• 关闭的在jQuery的两个的功能。


• 您的CSS提到淡入，但jQuery的有淡入

• Close both functions in your jQuery.
• Your CSS mentions fadeIn, but jQuery had fade-in

下面是新的，固定的jQuery code：

Here's the new, fixed jQuery code:

$(function() {
 $(window).scroll(function() {
    var top_offset = $(window).scrollTop();
    if (top_offset) {
      $('.top_head_separator').addClass('fixed-top fadeIn'); // <<<< "fadeIn"
    }
 }); // <<<< ADDED
});

请参阅这个 -webkit - 演示了工作示例。

See this -webkit- demo for a working example.

这篇关于使用CSS 3盒影子渐渐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！