|
Сообщение от 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>