花式图像装饰：口罩和高级悬停效果

这是仅使用<img alt="花式图像装饰：口罩和高级悬停效果" >>元素和CSS制作视觉上令人惊叹的图像装饰的三部分系列的第2部分。 在第1部分的基础上，我们将继续探索梯度并引入mask属性，以实现更复杂的效果和悬停动画。

花哨的图像装饰系列概述

• >单元魔术
• >面具和高级悬停效果（您在这里！）
• 概述和复杂动画

让我们进入我们的第一个示例：

邮票邮票效果

>令人惊讶的是，此效果仅需要两个梯度和一个过滤器：>

img {
  --r: 10px; /* Circle radius */
  padding: calc(2 * var(--r));
  filter: grayscale(.4);
  background: 
    radial-gradient(var(--r),#0000 98%,#fff) round
      calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#fff 0 0) no-repeat
      50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}

填充为背景梯度创造空间。

和radial-gradient()的组合巧妙地切开了图像周围的圆形部分。无论图像尺寸如何 linear-gradient()圆形框架round

此示例使用

在图像周围创建圆圈

，使用

值来保持一致的尺寸。 帧和图像之间的透明差距是使用radial-gradient()属性实现的：> roundmask组合

和

img {
  --s: 20px; /* Frame size */
  --g: 10px; /* Gap size */
  --c: #FA6900; 

  padding: calc(var(--g) + var(--s));
  background: 
    radial-gradient(farthest-side, var(--c) 97%, #0000) 
      0 0 / calc(2 * var(--s)) calc(2 * var(--s)) round;
  mask:
    conic-gradient(from 90deg at calc(2 * var(--s)) calc(2 * var(--s)), #0000 25%, #000 0)
      calc(-1 * var(--s)) calc(-1 * var(--s)),
    linear-gradient(#000 0 0) content-box;
}

以揭示图像和框架，掩盖了它们之间的间隙。

内部透明边框mask conic-gradient()此技术创建了一个透明的边框linear-gradient()内部的内部图像，使用a

为内部段，而a

为外部创造了间距，从而产生了透明的效果。 linear-gradient()多个梯度语法可以实现相似的结果；最佳方法优先考虑简洁性和可维护性。conic-gradient()

使用

img {
  --b: 5px;  /* Border thickness */
  --d: 20px; /* Distance from edge */

  --_g: calc(100% - 2 * (var(--d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--d) var(--d), #0000 25%, #000 0)
      0 0 / calc(100% - var(--d)) calc(100% - var(--d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
}

> trick添加了悬停效果，以动画原本不可模拟的

属性。

框架揭示动画font-size mask本节构建在先前的示例上，将梯度从属性移至

属性，并为边框添加

。 通过调整

或

。 background进一步的示例展示了更复杂的多步动画，挑战读者分析和了解梯度和掩蔽相互作用。 mask结论repeating-linear-gradient() 该系列的这一部分mask-position展示了使用单个mask-size元素创建复杂的图像装饰和动画的梯度和属性的功能。 第3部分将深入研究大纲和更复杂的动画。 提供了带有损坏图像效果的奖励演示。

花哨的图像装饰系列概述

• >单元魔术
• >面具和高级悬停效果（您在这里！）
• 概述和复杂动画

以上是花式图像装饰：口罩和高级悬停效果的详细内容。更多信息请关注PHP中文网其他相关文章！