Css 背景色淡出，无悬停

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

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

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

您可以有一个css类eh.nobackground，该类通过转换将背景设置为透明

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

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

$(document).ready(function(){

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

});

---

这是一张支票。希望这能有所帮助。

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

CSS

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

JS

加上一个演示

---

使用纯JS，您可以在主体上使用

onload

，设置一个函数，然后以这种方式调用它。

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

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

---

下面是一个2秒钟后背景褪色的简单示例：

CSS中的过渡。和jQuery来获取文档加载。或者JS。喜欢

body {
    background: #009dff;
}

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

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