使全屏背景图像在 5 秒后出现

Question

我在 css 中有背景图片，我想制作动画，所以它会在 5 秒后立即出现（没有过渡） CSS:

body {
font-family: 'Roboto', sans-serif;
background-color: #0d0d0d;
color: #dedede;
animation: none;
background:url(img/cat.gif) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}

前景会有一个<table>元素。

Answer 1

你的问题有点不清楚，但我没有发表评论的名誉，为了要求你提供更多细节，但是......根据你提供的信息，我推断如下：

您希望背景图片在 5 秒后显示在您的 body 上，没有过渡（如 toggle）。

鉴于你没有标记任何 framework/library 我将在 vanilla JS.

中进行此操作

不幸的是，我相信您将需要创建一个脚本来执行此操作，除非原始 CSS 解决方案是我不熟悉的可能。

您可以做的是创建一个 'background div' 放置在您的页面上，并给它一个 fixed 位置属性，以及它将占据整个屏幕的广阔天性。

这是一个片段（我没有你的本地 cat 文件，所以用 web-link 即兴创作）：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title></title>
<style>
.popout-div {
    font-family: 'Roboto', sans-serif;
    background-color: #0d0d0d;
    color: #dedede;
    animation: none;
    background:url("https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}
</style>

<script>
function showBackground() {
  var element = document.getElementById("page-bg");
  element.classList.add("popout-div");
}

var counter = 0;
var interval = setInterval(function() {
    counter++;
    if (counter == 5) {
        showBackground();
        clearInterval(interval);
    }
}, 1000);
</script>
</head>
<body>
    <div id="page-bg"></div>
        <table>
            <thead>
                <tr>
                    <th>Some</th>
                    <th>Table</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Some</th>
                    <th>Table</th>
                </tr>
            </tbody>
        </table>
</body>
</html>

除 .popout-div 中的位置属性外，其他属性基本保持不变。 z-index用于表示此图片默认应位于页面内容的下方（-1），如果您希望此图片显示在内容之上，请将其设置为更高的值。

否则脚本会在页面加载时启动，以进行倒计时。 5 秒后，调用 showBackground() 将 class 应用于 page-bg div.

有用的资源：

1) z-index

2) layout

3) classlist

Answer 2

您写道您有一张背景图片，您想要对其进行动画处理，使其在 5 秒后显示。我的建议是使用两个关键帧并让你的动画运行持续 5 秒：

@keyframes yourAnimation{
0%{
    opacity: 0;
    }
100%{
    opacity: 1;
    }
}

.elementToAnimate{
animation: yourAnimation 5s initial 0s linear;
}

这个动画可以改变，例如，如果你想让你的 bg img 淡入，你可以在 10%、20%、30% 等处添加更多关键帧，逐渐增加你的不透明度图像。

如果您是 CSS 动画的新手：您想要制作动画的 bg img 是 .elementToAnimate，因此您想为您的 bg img 分配一个 class 或 ID，并且用它替换 .elementToAnimate。

希望对您有所帮助！

使全屏背景图像在 5 秒后出现

Making fullscreen background image appear after 5 seconds

html

css

background

image

opacity