如何用HTML/CSS实现仅边框灰度的动画边框效果？

你当前的代码将边框动画与图片绑定在同一个<img>元素上，使用filter:grayscale(100%)会作用于整个元素，导致图片也变为灰度。要实现边框灰度动画但图片主体全彩的效果，需要将边框效果与图片分离到不同元素，以下是修改后的代码：

修改后的HTML结构 #

<div class="scale-up">
  <a href="#" target="_blank">
    <div class="animated-border mono">
      <img src="https://placehold.co/1200x100/blue/white" alt="Brother mono printers">
    </div>
  </a>
</div>

<div class="breaker"></div>

<div class="scale-up">
  <a href="#" target="_blank">
    <div class="animated-border">
      <img src="https://placehold.co/1200x100/blue/white" alt="Brother Colour printers">
    </div>
  </a>
</div>

修改后的CSS代码 #

@property --bg-angle {
  inherits: false;
  initial-value: 0deg;
  syntax: "<angle>";
}
@keyframes spin {
  to {
    --bg-angle: 360deg;
  }
}
.scale-up {
  text-align: center;
  width: 80%;
  margin: 0 auto;
}
.scale-up .animated-border {
  transition: ease-in-out 0.2s;
  animation: spin 3s infinite linear paused;
  background: linear-gradient(
        to bottom,
        oklch(0.1 0.2 240 / 0.95),
        oklch(0.1 0.2 240 / 0.95)
      )
      padding-box,
    conic-gradient(
        from var(--bg-angle) in oklch longer hue,
        oklch(0.85 0.37 0) 0 0
      )
      border-box;
  border: 2px solid transparent;
  border-radius: 6px;
  display: inline-block;
}
.scale-up .animated-border img {
  width: 100%;
  border-radius: inherit;
  display: block;
}
.scale-up .animated-border:hover {
  transform: scale(1.05);
  animation-play-state: running;
}

/* 灰度边框动画：替换彩色渐变为灰度渐变 */
.scale-up .animated-border.mono {
  background: linear-gradient(
        to bottom,
        oklch(0.1 0.2 240 / 0.95),
        oklch(0.1 0.2 240 / 0.95)
      )
      padding-box,
    conic-gradient(
        from var(--bg-angle),
        oklch(0.9 0 0),
        oklch(0.7 0 0),
        oklch(0.5 0 0),
        oklch(0.7 0 0),
        oklch(0.9 0 0)
      )
      border-box;
}
.breaker {
  font-size: 0;
  height: 20px;
  line-height: 0;
}

关键修改说明 #

• 把边框动画效果从<img>元素移到外层<div>容器，图片作为子元素存在，实现样式独立控制。
• 灰度边框不再使用filter，而是直接替换conic-gradient为灰度色系的渐变，彻底避免影响图片色彩。
• 调整容器与图片的布局细节（如圆角继承、块级显示），保证视觉效果一致。

内容的提问来源于stack exchange，提问作者Alex Joelle