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 /…