Показать сообщение отдельно
  #8 (permalink)  
Старый 01.04.2024, 22:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от III
Осталось сделать временные показатели для каждой картинки и если возможно решить вопрос плавным появлением и скрытием.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Показать и скрыть</title>
    <link rel="stylesheet" href="styles/style.css">
    <style type='text/css'>
        .blink-image  {
            opacity: 0;
            width: 150px;
            transition: opacity 1.2s;
        }

        .brevno.open {
            opacity: 1;
            transition: opacity 1s;
        }

        .roza.open {
           opacity: 1;
           transition: opacity .3s;
        }

        .lutik.open {
           opacity: 1;
           transition: opacity .7s;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="image-stack">
            <img class="зеленый" src="pictures/зеленый.png" alt="" />
            <img class="черный" src="pictures/черный.png" alt="" />
            <img class="blink-image brevno" src="https://diomaks.com/images/tree.gif" alt="бревно" />
            <img class="blink-image roza" src="https://pngicon.ru/file/uploads/2_8-256x256.png" alt="роза" />
            <img class="blink-image lutik" src="https://cdn-icons-png.flaticon.com/256/8958/8958580.png" alt="лютик" />
        </div>
    </div>
    <script>
const arr = [{show : 1000, hide : 4000}, {show : 5000, hide : 8000}, {show : 3000, hide : 5000}];
document.querySelectorAll('.blink-image').forEach((image, index) => {
    let {show, hide} = arr[index];
    setTimeout(() => image.classList.add('open'), show);
    setTimeout(() => image.classList.remove('open'), hide);
});
</script>
</body>
</html>
Ответить с цитированием