Question

我正在尝试在页面加载后立即淡出css背景颜色而不进行任何用户交互。可以这样做吗？

Answer 1

这可以使用CSS动画完成。有一个属性动画延迟，可以在几秒钟内设置。

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

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

Answer 2

就个人而言，我已经在CSS中设置了背景。然后使用jQuery修改文档。所以我设置了背景颜色

CSS

body {
    background: #009dff;
}

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

JS

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

加here's演示。

使用纯JS，您可以在正文上使用onload并设置一个函数，然后以这种方式调用它。

Answer 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。希望这会有所帮助。

背景颜色淡出，没有悬停

3 个答案: