В настоящее время я разрабатываю логотип с анимированным градиентным фоном.
Требования:
- Изображение маски должно быть в формате 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.