花式图片装饰：轮廓和复杂动画

在过去两篇文章中，我们已经在这个由三部分组成的系列文章中使用渐变来制作非常漂亮的图片装饰，而只使用<img>元素。 在这第三部分也是最后一部分中，我们将探索使用 CSSoutline属性的更多技巧。 这听起来可能很奇怪，因为我们通常使用outline在元素周围绘制一条简单的线 - 与border类似，但它只能一次绘制所有四条边，并且不是盒子模型的一部分。

不过，我们可以用它做更多的事情，而这正是我想在这篇文章中尝试的。

让我们从我们的第一个示例开始 - 一个在悬停时消失并带有酷炫动画的叠加层

我们可以通过在图片上添加一个额外的元素来实现这一点，但这就是我们在这个系列中挑战自己不要做的事情。 相反，我们可以使用 CSSoutline属性，并利用它可以具有负偏移量并能够与它的元素重叠。

img {
  --s: 250px; /* the size of the image */
  --b: 8px;   /* the border thickness*/
  --g: 14px;  /* the gap */
  --c: #4ECDC4;

  width: var(--s);
  aspect-ratio: 1;
  outline: calc(var(--s) / 2) solid #0009;
  outline-offset: calc(var(--s) / -2);
  cursor: pointer;
  transition: 0.3s;
}
img:hover {
  outline: var(--b) solid var(--c);
  outline-offset: var(--g);
}

诀窍是创建一个outline，它的厚度是图片大小的一半，然后使用负值将其偏移图片大小的一半。 使用颜色添加一些半透明度，我们就有了我们的叠加层！

其余部分发生在:hover上。 我们更新outline，并且两者之间的过渡创建了酷炫的悬停效果。 这种相同的技巧也可以用来创建一个淡出效果，我们不移动outline，而是使其透明。

在这个示例中，我没有使用图片大小的一半，而是使用了一个非常大的outline厚度值（100vmax），同时应用了一个 CSS 蒙版。 这样，就不再需要知道图片大小 - 这个技巧在所有大小下都起作用！

您可能在 Safari 中使用100vmax作为大值时会遇到问题。 如果是这种情况，请考虑前面的技巧，您可以在其中用图片大小的一半替换100vmax。

我们可以更进一步！ 例如，与其简单地裁剪额外的outline，我们可以创建形状并应用一个花哨的显示动画。

很酷吧？ outline就是创建黄色叠加层的元素。 clip-path裁剪额外的outline以获得星形。 然后，在悬停时，我们使颜色透明。

哦，您想要心形？ 我们当然可以做到！

想象一下我们能创建的所有可能的组合。 我们要做的就是用 CSS 蒙版和/或clip-path绘制一个形状，并将其与outline技巧结合起来。 一种解决方案，无限种可能性！

而且，是的，我们当然可以对其进行动画。 不要忘记clip-path是可以进行动画的，而mask依赖于渐变 - 我们在该系列的前两篇文章中对此进行了详细介绍。

我知道，动画有点卡顿。 这更像是演示如何实现这个想法，而不是要用于生产网站的“最终产品”。 我们需要对它进行优化以获得更自然的过渡。

这是一个使用mask的演示。 这是我在上一篇文章末尾向您透露的。

您知道outline属性具有如此强大的功能吗？ 将其添加到您的工具箱中，用于创建花式图片装饰！

将所有内容组合在一起！

既然我们已经学习了使用渐变、蒙版、裁剪和轮廓的许多技巧，现在是时候进行盛大的结局了。 让我们通过将过去几周学到的所有内容结合起来来结束这个系列，不仅展示这些技巧，而且展示这些方法是多么灵活和模块化。

如果您第一次看到这些演示，您可能会认为有一些额外的 div 包装器和伪元素被用来实现它们。 但所有事情都直接发生在<img>元素上。 这是我们获得这些高级形状和效果所需的唯一选择器！

总结

好吧，天哪，感谢您在过去几周中与我一起观看这个由三部分组成的系列文章。 我们探索了许多不同的技巧，这些技巧将简单的图片变成了令人眼前一亮且互动的东西。 您会使用我们涵盖的所有内容吗？ 当然不会！ 但我希望这对您深入挖掘 CSS 特性的高级用途是一个很好的练习，比如渐变、mask、clip-path和outline。

我们只用一个<img>元素就做到了所有这些！ 没有额外的 div 包装器和伪元素。 当然，这是我们自己强加给自己的限制，但它也促使我们探索 CSS 并尝试找到针对常见用例的创新解决方案。 因此，在将额外的标记添加到您的 HTML 之前，请考虑 CSS 是否已经能够处理这项任务。

您可以在我的 CSS Tip 网站上找到更多用于图片的花式效果。 以下是一些示例

• 使用单个元素的显示悬停效果
• 图片上的 3D 视差效果
• 使用滑动悬停效果为您的图片着色