code

<svg width="500" height="500" viewBox="0 0 480 352" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <mask id="mask1" maskContentUnits="userSpaceOnUse">
            <image width="480" height="352" xlink:href="https://i.pinimg.com/originals/3d/cb/c2/3dcbc2ba6a3f6ded21c66f23b1b9b2cb.gif">
            </image>
        </mask>
        <linearGradient id="lg1" x1="0" y1="0" x2="100%" y2="100%">
            <stop offset="15%" class="sc sc1"></stop>
            <stop offset="45%" class="sc sc2"></stop>
            <stop offset="55%" class="sc sc2"></stop>
            <stop offset="85%" class="sc sc3"></stop>
        </linearGradient>
    </defs>
    <rect fill="url(#lg1)" mask="url(#mask1)" width="100%" height="100%">
    </rect>
</svg>
Copy the code
.sc {
    animation: rainbow 3s linear infinite alternate;
}

/* Add delay to create a staggered rainbow effect */
.sc2 {
    animation-delay: -1s;
}

.sc3 {
    animation-delay: -2s;
}

@keyframes rainbow {
    0% {
        stop-color: pink;
    }
    35% {
        stop-color: crimson;
    }
    50% {
        stop-color: purple;
    }
    85% {
        stop-color: yellow;
    }
    100% {
        stop-color: orange; }}Copy the code

explain

Mask can be regarded as a mask. When applied to other elements, the black part will be hidden and the white part will be combined with the original background of the element to create a new background.

Fill the Rect with a gradient background, then use a butterfly image with a black background and a white body as a mask on the Rect, and the gradient background will only show up on the butterfly.

Online code

Jsbin.com/fiyelof/edi…

reference

Codepen. IO/yoksel/pen /…