背景颜色淡出没有悬停答案

【问题标题】：Background color fade out with no hover背景颜色淡出没有悬停
【发布时间】：2014-06-19 21:41:23
【问题描述】：

我正在尝试让 css 背景颜色在页面加载后立即淡出，而无需任何用户交互。这个可以吗？

【问题讨论】：

transition 在 CSS 中。和 jQuery 来获取文档加载。或 JS。喜欢this？

【解决方案1】：

这可以使用 CSS 动画来完成。有一个属性animation-delay可以秒级设置。

animation-delay: 2s;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;

下面是 2 秒后背景淡出的简单示例：http://jsfiddle.net/eKAf2/

【讨论】：

【解决方案2】：

我个人会在 CSS 中设置背景。然后用 jQuery 修改文档。所以我会设置背景颜色

CSS

body {
    background: #009dff;
}

然后设置页面淡入的背景色，并添加转场

$(document).ready(function() {
   $("body").css("transition", "3s"); // Adding transition
   $("body").css("background", "#fff"); //Background color to fade into 
});

加上here's 一个演示。

使用纯 JS 你可以在 body 上使用onload 并设置一个函数，然后这样调用它。

【讨论】：

【解决方案3】：

如果你有一个元素，例如：.elem

<div class="elem"></div>

样式：

.elem {
  width: 100px;
  height: 100px;
  background: red;
 }

你可以有一个 css 类 eh .nobackground 将背景设置为透明的过渡。

.nobackground {
  background: transparent !important;
  transition: all 1s;
}

然后您可以使用 jquery 将此类应用于页面加载时的元素。

$(document).ready(function(){

   $(".elem").addClass("nobackground");

});

这是bin。希望这会有所帮助。

【讨论】：