花哨的图像装饰：轮廓和复杂的动画

我们已经在这个由三部分组成的系列中的最后两篇文章中使用了渐变来制作非常整洁的图像装饰，除了使用 元素。 在第三篇也是最后一篇文章中，我们将探索更多使用 CSS 的技术 outline 财产。 这可能听起来很奇怪，因为我们通常使用 outline 在元素周围画一条简单的线——有点像 border 但它只能同时绘制所有四个边，并且不是盒子模型的一部分。

不过，我们可以用它做更多事情，这就是我想在本文中尝试的内容。

让我们从第一个示例开始——一个在悬停时消失的叠加层，带有很酷的动画：

我们可以通过在图像上添加一个额外的元素来实现这一点，但这就是我们正在挑战自己 不能 在这个系列中做。 相反，我们可以使用 CSS outline 属性和杠杆作用，它可以具有负偏移并且能够重叠其元素。

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 掩码。 有了这个，不再需要知道图像大小——它适用于所有大小！

您可能会遇到使用问题 100vmax 作为 Safari 的一大价值。 如果是这种情况，请考虑替换之前的技巧 100vmax 图像大小的一半。

我们可以更进一步！ 例如，不是简单地剪裁额外的 outline，我们可以创建形状并应用精美的显示动画。

酷吧？ 这 outline 是创建黄色叠加层的原因。 这 clip-path 剪辑额外的 outline 得到星形。 然后，在悬停时，我们使颜色透明。

哦，你想要红心吗？ 我们当然可以做到！

想象一下我们可以创造的所有可能的组合。 我们所要做的就是用 CSS 掩码和/或绘制一个形状 clip-path 并将其与 outline 诡计。 一种解决方案，无限可能！

而且，是的，我们当然也可以制作动画。 我们不要忘记 clip-path 是可动画的并且 mask 依赖于渐变——我们在本系列的前两篇文章中非常详细地介绍了这一点。

我知道，动画有点小故障。 这更像是一个演示来说明这个想法，而不是在生产现场使用的“最终产品”。 我们想要优化事物以实现更自然的过渡。

这是一个使用 mask 反而。 这是我在结尾取笑你的那个 最后一篇文章:

你知道吗 outline 财产有这么厉害？ 将其添加到您的工具箱中以获得精美的图像装饰！

结合所有的东西！

现在我们已经学习了许多使用渐变、蒙版、剪裁和轮廓的技巧，是时候进行大结局了。 让我们结合过去几周学到的所有知识来结束本系列，不仅展示技术，而且展示这些方法的灵活性和模块化程度。

如果您是第一次看到这些演示，您可能会认为有一堆额外的 div 包装器和伪元素用于将它们拉下来。 但一切都直接发生在 元素。 这是我们获得这些高级形状和效果所需的唯一选择器！

结束了

好吧，天哪，感谢您在过去几周与我一起参加这个由三部分组成的系列。 我们探索了一系列不同的技术，将简单的图像变成引人注目和互动的东西。 您会使用我们介绍的所有内容吗？ 当然不是！ 但我希望这是一个很好的练习，可以让你深入了解 CSS 功能的高级用法，比如渐变， mask, clip-path及 outline.

我们只用了一个 元素！ 没有额外的 div 包装器和伪元素。 当然，这是我们对自己的约束，但它也促使我们探索 CSS 并尝试为常见用例找到创新的解决方案。 因此，在将额外的标记注入 HTML 之前，请考虑 CSS 是否已经能够处理该任务。