使用镂空 PNG 图片为任何形状添加颜色动画

您通常不会将 <img> 视为具有背景色，但它们当然可以具有该属性。 例如，如果您想要在图像周围添加两个边框，这可能会出现。 您可以使用 border 来创建一个，并通过为图像提供 background-color 和 padding 来模拟另一个。 或者，您可以将背景设置为鲜红色，以便缺少的图像清晰可见。

您可能想要在图像上声明背景色的另一个原因是让颜色透过图像的透明部分显示。 事实上，利用这个想法，您可以创建任何您想要的形状作为“镂空”，并设置其后面的颜色。 这意味着您可以通过 CSS 控制该唯一形状的颜色，并执行 CSS 可以执行的任何操作。 例如，对其颜色进行动画处理！

首先，我们制作一个图像，其中实心部分与我们正在使用的网站的背景颜色匹配。 为了举例说明，是白色。 “形状”是透明部分。 下面是 Photoshop 中的显示方式

我们将其放在标记中

<img src="images/marilyn.png" alt="">

我们为其上色

img { background: red; }

然后我们制作一个动画来循环遍历一些颜色。 现在有两种语法（grunt）

@-webkit-keyframes super-rainbow {
    0%   { background: red; } 
    20%  { background: orange; }
    40%  { background: yellow; }
    60%  { background: green; }
    80%  { background: blue; }
    100% { background: violet; }
}

@-moz-keyframes super-rainbow {
    0%   { background: red; } 
    20%  { background: orange; }
    40%  { background: yellow; }
    60%  { background: green; }
    80%  { background: blue; }
    100% { background: violet; }
}

然后我们将该动画应用到图像

img {
     background: red;  
     -webkit-animation: super-rainbow 15s infinite alternate linear; 
     -moz-animation: super-rainbow 15s infinite alternate linear; 
}

就这样。 查看此示例的演示和其他快速有趣的演示，例如自行车形状上的彩虹渐变在悬停时移动。

查看演示   下载文件

图像从 Vecteezy 获取。