Маскирование div с изображением и анимация градиентного фона

Question

В настоящее время я разрабатываю логотип с анимированным градиентным фоном.

Требования:

Изображение маски должно быть в формате jpg или png.
Маскируемый элемент предпочтительно должен быть <div>
Градиент должен быть CSS и предпочтительно исходить от фона <div>.

Маска должна выглядеть примерно так:

У меня нет анимации CSS, но когда дело доходит до вырезания формы из с изображением jpg или png, я, кажется, застрял.

Что я придумал:

Мне не нравятся мои текущие решения, потому что они полагаются на анимацию SVG и маскируют элемент SVG <rect>, а не <div>. Это гораздо менее гибко, чем если бы это было достигнуто в основном с помощью CSS.
Но он выполняет свою работу.

<!-- image masked gradient -->
<svg  height="200px" width="200px">  
    <defs>  
        <!-- the gradient for the rectangle element-->
        <linearGradient id='gradient1'>
            <stop stop-color='#020024'/>
            <stop offset='.35' stop-color='#090979'/>
            <stop offset='1' stop-color='#6699ff'/>
            </linearGradient>

        <!-- the mask shape of a thunder bolt -->
        <mask id="image-mask" x="0" y="0" width="100" height="100" >  
            <image href="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRU8cEP-xBjtmZ2ZhpNKMc0dwE7I5a-PB8RBA&usqp=CAU" height="200" width="200"/>
        </mask>  
    </defs>

    <!-- this is the gradient rectangle element to be masked -->
    <g mask="url(#image-mask)">  
        <rect class="posr " x="10" y="0"  width="500%" height="400%" fill="url(#gradient1)">
           <animate attributeName="x" values='0px;-450px;0px' dur="5s"  repeatCount="indefinite" />
        </rect>
    </g>  
</svg>

Поэтому я в основном хочу, чтобы эффект был показан в снипете, но в основном с помощью CSS-анимации и маски изображения!

_{Свободный перевод вопроса Masking a div with an image and animating gradient background от участника @DiscreteTomatoes.}

Answer 1

Вы можете использовать маску CSS, но сначала нужно создать изображение PNG, как показано ниже:

.box {
  display:inline-block;
  width:300px;
  -webkit-mask:url(https://i.ibb.co/m9fR6H1/aLOO0.png) center/cover;
          mask:url(https://i.ibb.co/m9fR6H1/aLOO0.png) center/cover;
  background:linear-gradient(to right,red,blue,green) left/300% 100% no-repeat;
  animation:change 2s linear infinite alternate;
}

/* maintain the square ratio */
.box::before {
  content:"";
  display:block;
  padding-top:100%;
}
/**/


@keyframes change {
  to {
    background-position:right;
  }
}

body {
  background:#f2f2f2;
}

<div class="box"></div>
<div class="box" style="width:150px;"></div>

Качество изображения, которое я использую, очень плохое. Я сосредоточился только на технике выполнения, а не на качестве изображения.

_{Свободный перевод ответа от участника @Temani Afif.}

БЛОГ НА HUSL

Маскирование div с изображением и анимация градиентного фона

Ответы (1 шт):