时间戳

首页 > 解决方案 > 如何在圆形图像中使用 CSS 制作彩虹边框？

javascript - 如何在圆形图像中使用 CSS 制作彩虹边框？

问题描述

我正在尝试使用 CSS 来做到这一点，只是为了好玩和学习。

图片

您认为仅使用 CSS 就可以实现吗？如果没有，你会走什么路？

标签： javascriptcss

解决方案

我很确定您可以使用 CSS 动画来更改边框颜色。

#image-id {
  border: solid 1vw;
  animation: rainbow 5s linear infinite;
}

@keyframes rainbow {
  0% { border-color: color1 }
  10% { border-color: color2 }
  20% { border-color: color3 }
  30% { border-color: color4 }
  40% { border-color: color5 }
  50% { border-color: color4 }
  30% { border-color: color7 }
  70% { border-color: color8 }
  80% { border-color: color9 }
  90% { border-color: color10 }
  100% { border-color: color11 }
}
<!DOCTYPE html>
<html>
<body>
  <img id="image-id" src="imageurl"></img>
</body>
</html>

这将循环 11 种颜色（用您自己的颜色替换）。

推荐阅读