加载页面时更改背景颜色

Question

一旦我继续执行screen-transition类的元素， 以下代码只是将背景色从透明变为  通过hover变为绿色：

.screen-transition{
        position: relative;
        display: block !important;
        background-color: transparent;
        z-index: 1;
    }
    .screen-transition::before{
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: green;
        z-index: -1;
        transition: 1s;
        opacity: 0;
    }

    .screen-transition:hover::before {
        opacity: 1;
    }

现在我只想用其他替换hover，以便在加载页面时背景颜色变为绿色

有什么解决方法吗？

Answer 1

尝试在css文件中设置页面的正文吗？

body {
  background-color: green;
}

Answer 2

如果要在“加载”页面上发生此淡入，只需定义一个关键帧并将动画添加到课前。让我知道这是否有效

@keyframes fadeIn {
  from { 
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.screen-transition{
        position: relative;
        display: block !important;
        background-color: transparent;
        z-index: 1;
        width: 100vw;
        height: 100px;
    }
    .screen-transition::before{
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: green;
        z-index: -1;
        transition: 1s;
      animation: fadeIn 2s;
    }

Answer 3

js代码

document.body.onload=function ()
{
     setTimeout(function() 
      {document.body.classList.add('animation_class')},1000);
}

CSS代码

. animatin_class
{
   background-color:green ! important;
}
body
{
   background-color:red;
  transition:all .4s;
 }