//on page load, fades the background in
document.addEventListener('DOMContentLoaded', ()=> fadeInBackground());
function fadeInBackground(){
//removes the class show from body
document.body.classList.remove('show');
//waits 200ms before adding the class show to body
setTimeout(()=> document.body.classList.add('show'), 200);
}
<body class="bg">
<div>
<p>This is the page content slightly faded relative to the background</p>
<br>
<p>The fadein is expected to happen at page load but you can trigger the action also from here</p>
<button onclick="fadeInBackground()">Fade in background</button>
</div>
</body>
4条答案
按热度按时间n7taea2i1#
这里有一个只使用CSS的方法。但是，有一个警告，CSS不能等待一个事件，所以它不能知道整个网站何时加载。
相反，在这个代码片段中，它在开始引入body的before伪元素上的背景图像之前等待了1秒钟。
fkaflof62#
是的，这是可能的。这就是你能做到的。
vh0rcniy3#
如何淡入背景
有几种方法可以实现这一点，但最简单的方法可能是使用
transitioncss属性。CSS转换属性：
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
转换使您能够定义元素的两种状态之间的转换。不同的状态可以使用伪类定义，如：hover或：active或使用JavaScript动态设置。
通常转换是在css层应用事件的，所以你可能有第三个规则，***on：hover***将应用css属性的转换（在这个例子中是
opacity），但是这里我们需要在文档加载时做，并且没有css选择器，所以我们将在文档准备好后缓慢延迟地添加类。演示：
所以在这个演示中，我有一个css规则来处理
.bg元素，在一个伪元素中设置它们的背景，这个伪元素覆盖了整个父元素，但是使用了opacity: 0。我之所以使用伪元素
::before，是因为过渡将被限制在背景本身，而不是整个正文内容。***重要：***我设置了z-index: -1，以便元素将被授权保留在背景上。然后，还有另一个针对
.show元素的规则，该规则将设置opacity: 1的转换持续5秒。bg类被赋予html中的body，类show通过js应用于DOMContentLoaded事件（当页面准备就绪时）。同样的效果可以通过点击页面中的按钮来实现，这个按钮将调用相同的
fadeInBackground函数，这个函数将删除show类，并在添加该类之前等待片刻。这样的延迟很重要，因为css引擎的React会很糟糕，否则如果你删除和添加类的速度太快，它将不会执行动画（这是因为上面解释的css事件与通过js触发动作相比的原因）。
bpzcxfmw4#
它可能与关键帧只是有点棘手。