Возможно ли, чтобы независимый элемент размыл все под ним? - PullRequest
Новая
       7

Возможно ли, чтобы независимый элемент размыл все под ним?

0 голосов
/ 06 февраля 2020

Возможно ли, чтобы фигура SVG размыла все, что находится под ней? Дизайн должен иметь карусель картинок в качестве фона, поэтому он будет динамичным c, и svg не может быть вложен внутрь. Форма также должна трансформироваться на некоторых событиях. 

@keyframes move-svg {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes move-carousel {
  0%{
  transform: none;
  }
  33% {
  transform: translateX(-100%);
  }
  66% {
  transform: translateX(-200%);
  }
  100%{
  transform: translateX(0):
  }
}
.wrap, body {
  overflow: hidden;
  width: 100%;
}
.carousel {
  display: flex;
  position: relative;
  /*animation: move-carousel 10s linear infinite;*/
}
img {
  width: 100%;
}
svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: move-svg 10s linear infinite;
}
<div class="wrap">
  <div class="carousel">
    <img src="https://i.picsum.photos/id/95/1920/1080.jpg" />
    <img src="https://i.picsum.photos/id/94/1920/1080.jpg" />
    <img src="https://i.picsum.photos/id/93/1920/1080.jpg" />
  </div>
  <svg opacity="0.5" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1366 768">
    <defs>
      <filter id="f1" x="0" y="0">
        <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
      </filter>
    </defs>
    <path filter="url(#f1)" fill="#fff" d="M1008.07 768H1366V0h-283.26L1067 2.15C827.1 35 703.43 237.64 601 360.39c51.29 66.91 99.16 133.82 147.23 195C815.37 640.86 850.06 684.12 896.64 716 920 732 979 768 1006 768M373.6 0H0v314.91c51.44-57 103.19-119.18 157.37-178.83C217.47 69.91 283.53 2.28 373.6 0zM373.6 768H0V453.09c51.44 57 103.19 119.18 157.37 178.83 60.1 66.17 126.16 133.8 216.23 136.08z" style="pointer-events: all;"></path>
  </svg>
 </div>
...