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>

我将它设置为以线性模式在4s内从亮到暗变化。您可以更改持续时间或将模式更改为您想要的任何内容（无，无限等）。

请注意，back-change字后面的名称@keyframes是您稍后必须在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供你玩。

Answer 2

这是转换的工作，而不是动画：

在这个示例中，当您将鼠标悬停在其上时，我会将不透明度更改为淡出...

.TransitStyle {

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

-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-ms-transition-property: opacity;
-o-transition-property: opacity;
 transition-property: opacity;

-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
 transition-timing-function: linear;

-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
 transition-duration: 0.5s;
}

.TransitStyle:hover {
 opacity: 0.0;
}

Answer 3

您只能使用简单的css transition和jQuery addClass()方法来设置元素类属性。

JS

$( window ).load( function() {
    $( '.overlay' ).addClass( 'dark' );
});

CSS

.overlay {
    background-color: rgba(0,0,0,0);
    transition: background-color 1s ease;
}

.dark{
    background-color: rgba(0,0,0,.95);
}

FIDDLE

背景图像的CSS动画过渡越来越暗

3 个答案: