Как написать эффект тумана или дыма для заднего фона картинки или блока?

#javascript #css #svg #canvas #glsl

Очень интересно реализация тумана (или дыма) для заднего фона какого нибудь блока.

Пример:



.main_parent_container {
    width:300px;
    box-shadow: 0 20px 50px #e62429;
    border: 2px solid #e62429;
}
.main_parent_container > img {
    width:100%;
}

   





Для этого блока я на задний фон дал два свойства box-shadow: 0 20px 50px #e62429;
border: 2px solid #e62429; вместо них я бы хотел на задний фон добавить  дым либо туман.

Примеры я  нашел такие пример тумана  из Гарри Поттера,  второй пример, и третий
самый простой на  SCSS
    

Ответы

Ответ 1

Можно двигать несколько бэкграундов с полу-прозрачностью, вот что получается:



body {
  overflow: hidden;
  background-color: black;
  animation: bg 13s infinite linear;
  background-image: 
    url(https://data.whicdn.com/images/138510361/large.png),
    url(https://data.whicdn.com/images/138510361/large.png);
  height: 100vh;
}

@keyframes bg {
  0% {
    background-position: -100% 70%, 100% 30%;
    background-size: 200%, 200%;
  }
  100% {
    background-position: 100% 70%, -100% 30%;
    background-size: 200%, 200%;
  }
}

.main_parent_container {
    width: 300px;
    box-shadow: 0 20px 50px #e62429;
    border: 2px solid #e62429;
    transform: translate(calc(50vw - 50%),calc(50vh - 50%));
}
.main_parent_container > img {
    width: 100%;
}