Показать сообщение отдельно
  #1 (permalink)  
Старый 31.03.2024, 09:05
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 80

Как тут правильно вынести стили из HTML в отдельный файл стилей ?
Всем привет. Нашел в инете нужный мне пример показа и скрытия изображений через определенные промежутки времени и с определенной длительностью показа. Хочу вынести стили изображений из HTML в отдельный файл стилей. Не получается вынести стили картинок, которые появляются и исчезают. Код YTML
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Плавное появление и исчезновение изображений</title>
<link rel="stylesheet" href="styles/style.css">
</head>
  <style>
    .myImg {
    display: none; /* Скрыть изображение по умолчанию */
    transition: opacity 2s; /* Плавное изменение прозрачности за 2 сек */
 </style>
<body>

<<div class="container">
  <div class="image-stack">

<img class="green"  src="pictures/зеленый.png">
<img class="black"  src="pictures/черный.png">

<img <img style="margin-top: -32.8em;margin-left: 25em;transform: scale(0.5);" class="myImg" src="pictures/роза.png" alt="Роза" data-appear-time="2000" data-disappear-time="15000">
<img <img style="margin-top: -32.8em;margin-left: -45em;transform: scale(0.8);" class="myImg" src="pictures/brevno.gif" alt="Бревно" data-appear-time="4000" data-disappear-time="7000">
<img <img style="margin-top: -32.8em;margin-left: -15em;transform: scale(0.5);" class="myImg" src="pictures/лютик.png" alt="Лютик" data-appear-time="6000" data-disappear-time="9000">
</div>

<script>
  const images = document.querySelectorAll('.myImg');
 
function showImages() {
    images.forEach(img => {
        const appearTime = img.getAttribute('data-appear-time');
        const disappearTime = img.getAttribute('data-disappear-time');
        setTimeout(() => {
            img.style.display = 'inline'; // Показать изображение
            img.style.opacity = 1; // Установить полную непрозрачность
 
            setTimeout(() => {
                img.style.opacity = 0; // Установить прозрачность на 0
            }, disappearTime - appearTime); // Изменить прозрачность через указанное время
        }, appearTime); // Появиться через указанное время
    });
}
 
window.onload = showImages; // Вызвать функцию showImages после загрузки страницы
  
  </script>
</body>
</html>

Это стили, которые я пытаюсь сделать
body {
      margin: 0;
    }
.container {

  width: 100%;
  margin: 0 auto;
  max-width: 1064px;
}

.image-stack::after {
    content: ' ';
    display: table;
    clear: both;
  }

.green {
      float: left;         
      z-index: -1; // говорит браузеру сделать это изображение сверху
  }

.black {
      float: left;         
      z-index: -1; // говорит браузеру сделать это изображение сверху
  }


 .myImg {
float: left;         
      z-index: 2; 
  }

.brevno {
      float: left;         
      z-index: 2; 
  }

.roza {
      float: left;         
      z-index: 2; 
  }

.lutik {
      float: left;         
      z-index: 2; 
  }

@supports (display: grid) {
.image-stack {
    display: grid;
    position: relative; // необходимо, чтобы перекрытие работало
    grid-template-columns: repeat(12, 1fr);
  }

 .myImg {
    display: none; /* Скрыть изображение по умолчанию */
    transition: opacity 2s; /* Плавное изменение прозрачности за 2 сек */   
}


.green {
 width: 1064px;
height: 510px;
grid-column: 4 / -1;
grid-row: 1; 
margin-top: 9em;
margin-left: 0em;  
  }

 .black {
grid-column: 4 / -1;
grid-row: 1; 
margin-top: 6.2em;
margin-left: 0em;  
  }

 .brevno {
grid-row: 1;
grid-column: 1;
transform: scale(0.8);
position: relative;
margin-top: 32em;
margin-left: -45em;
display:none;

}

.roza {
grid-row: 1;
grid-column: 1;
transform: scale(0.8);
position: relative;
margin-top: -32em;
margin-left: -45em;

}

.lutik {
grid-row: 1;
grid-column: 1;
transform: scale(0.8);
position: relative;
margin-top: -32em;
margin-left: -15em;

}


.green и .black отображаются правильно, а всё остальное не отображается. Что делаю не так? С подобными вариантами дел не имел.
Во вложении файл со стилями в HTML. И попутно вопрос, не для этого раздела, но может кто-то подскажет решение. Надо сделать так, чтобы появление картинок происходило плавно, как и их скрытие. Появление картинок, так сказать резким скачком, а исчезновение плавное. Всем спасибо.

Последний раз редактировалось III, 25.04.2024 в 18:45.
Ответить с цитированием