javascript - 背景图像变暗的CSS动画过渡

Question

所以我正在构建一个具有背景图片的页面:

body {
    background:url(images/bg.png) center center no-repeat fixed;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover
}

页面加载了一个看起来像警告/消息的 div。当这个 div 加载时，我想要一个背景图像变暗的简短动画，
现在我用这个:

back { 
    background:rgba(0,0,0,.95);
    display:block;
    height:100%;
    left:0;
    opacity:1;
    position:fixed;
    top:0;
    width:100%
}

这会使它变暗，但我希望它在平滑的过渡/动画中逐渐发生。

Answer 1

您可以使用 @keyframes为了这。我不知道您的 HTML 是什么样子，但这里有一个小演示:

.back { 
    background:rgba(0,0,0,.95);
    display:block;
    height:500px;
    left:0;
    opacity:1;
    position:fixed;
    top:0;
    width:500px;
}

@keyframes back-change {
   from { background: rgba(133,133,133,.95) }
     to { background: rgba(0,0,0,.95) }
}

.back {
  animation: back-change 4s linear;
}

<div class="back"></div>

我将其设置为在 4 秒内以线性模式从亮变暗。您可以更改持续时间或将模式更改为您想要的任何内容(无、无限等)。

请注意 @keyframes 后面的名称 back-change 是您必须在 animation 属性中调用的名称稍后的。如果您在一处更改名称，则必须在两处都更改。

这是一个 JSFiddle Example以及自己乱搞。

---

您还可以使用 CSS3 Transitions以及。这些在 Web 浏览器中的支持时间更长一些。

.back { 
    background:rgba(0,0,0,.95);
    display:block;
    height:500px;
    left:0;
    opacity:1;
    position:fixed;
    top:0;
    width:500px;
    transition-property: background-color;
    transition-duration: 0.3s;
}

.back:hover {
    background-color: rgba(133,133,133,.95);
}

<div class="back"></div>

同样，这是一个 JSFiddle Example给你玩。