Создание полноэкранного фонового изображения появляется через 5 секунд - PullRequest
Новая
       68

Создание полноэкранного фонового изображения появляется через 5 секунд

1 голос
/ 29 апреля 2020

У меня есть фоновое изображение в 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> в передний план.

Ответы [ 2 ]

0 голосов
/ 29 апреля 2020

Вы пишете, что у вас есть фоновое изображение, которое вы хотите анимировать, чтобы оно появилось через 5 секунд. Мои предложения будут использовать два ключевых кадра и позволить вашей анимации работать в течение 5 секунд: 

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

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

Эта анимация может быть изменена, например, если вы хотите, чтобы ваш bg img просто исчезал, вы можете добавить больше ключевые кадры на 10%, 20%, 30% и др. c. это постепенно увеличивает непрозрачность вашего img.

Если вы новичок в CSS анимациях: bg img, который вы хотите анимировать, - это .elementToAnimate, поэтому вы хотите назначить класс или идентификатор для вашего bg img и заменить .elementToAnimate на который.

Надеюсь, это поможет!

0 голосов
/ 29 апреля 2020

Ваш вопрос несколько неясен, но у меня нет репутации, чтобы комментировать, чтобы попросить вас предоставить больше подробностей, но ... на основании предоставленной вами информации я сделал вывод:

Вы хотите, чтобы фоновое изображение появилось на вашем body через 5 секунд без перехода (например, toggle).

Учитывая, что вы не пометили framework/library, я собираюсь сделать это в vanilla JS.

К сожалению, я считаю, что вам нужно будет создать скрипт, чтобы сделать это, если только для CSS решения невозможно , к которому Я не знаком с.

То, что вы можете сделать, - это создать "фоновый div", который будет размещаться на вашей странице, и придать ему свойство позиции fixed и экспансивный характер. до которого он будет занимать весь экран.

Вот фрагмент кода (у меня нет локального файла с кошками, импровизированного с веб-ссылкой): 

<!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) по умолчанию, если вы установите sh для отображения поверх содержимого, установите для него более высокое значение.

В противном случае скрипт запускается при загрузке страницы для обратного отсчета. По истечении 5 секунд вызывается showBackground(), который применяет класс к page-bg div.

Полезные ресурсы:

1) z-index

2) макет

3) список классов

...