让div背景带呼吸灯效果多种背景颜色

可以使用CSS的animation和@keyframes属性来实现div背景带呼吸灯效果，同时可以设置多种背景颜色。

以下是一个示例代码：

HTML：

<div class="bg-light"></div>

CSS：

.bg-light {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  animation: breathing 2s ease-in-out infinite;
}

@keyframes breathing {
  0% {
    background-color: #ff5e3a;
  }
  50% {
    background-color: #00a8ff;
  }
  100% {
    background-color: #ffdd59;
  }
}

解释：

• 通过设置div的宽度、高度和圆角，将其变为圆形。
• 使用animation属性指定动画名称为breathing，持续时间为2秒，缓动函数为ease-in-out，无限循环。
• 使用@keyframes定义动画的关键帧，从0%到50%背景色渐变为#ff5e3a到#00a8ff，再从50%到100%背景色渐变为#00a8ff到#ffdd59。

通过这样的方式，可以让div背景带有呼吸灯效果，并且可以设置多种背景颜色。可以根据需要修改动画的持续时间、关键帧的背景色等