使用图像和动画渐变背景遮盖 div

Question

我目前正在设计一个具有动画渐变背景的徽标。

要求：

• 遮罩图像必须是 jpg 或 png
• 被屏蔽的元素最好是<div>
• 渐变应该是 CSS 并且最好来自<div>背景

面具应该看起来像这样：

我已经关闭了 CSS 动画，但是当涉及到<div>从 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 动画和图像蒙版！

Answer 1

您可以使用 CSS mask，但需要 f\xc3\xaerst 创建一个 PNG 图像，如下所示：

\n

\n

然后像下面这样使用它：

\n

\r\n

\r\n

.box {\n  display:inline-block;\n  width:300px;\n  -webkit-mask:url(https://i.ibb.co/m9fR6H1/aLOO0.png) center/cover;\n          mask:url(https://i.ibb.co/m9fR6H1/aLOO0.png) center/cover;\n  background:linear-gradient(to right,red,blue,green) left/300% 100% no-repeat;\n  animation:change 2s linear infinite alternate;\n}\n\n/* maintain the square ratio */\n.box::before {\n  content:"";\n  display:block;\n  padding-top:100%;\n}\n/**/\n\n\n@keyframes change {\n  to {\n    background-position:right;\n  }\n}\n\nbody {\n  background:#f2f2f2;\n}

\r\n

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

\r\n

\r\n

\r\n

\n

我使用的图像质量非常差。我只注重技巧而不是质量。

\n