我是HTML和CSS的新手，已经在这个问题上纠结了一段时间。理想情况下，我正在寻找一个只使用CSS的解决方案，但如果需要的话，我可以尝试JavaScript解决方案。我的代码可能写得很糟糕，所以请原谅我。
我正在尝试为我的个人网站创建一个旋转横幅动画效果。我有一个容器，有一个色轮的背景图像，我有一些在这个容器内的div，持有我的标志和副标题。

色轮图像只是一个大圆圈。我正在寻找旋转这个图像没有它旋转整个容器。

我已经尝试了这篇文章的一切，但这只是旋转图像一次，因为我想连续旋转图像：How to rotate the background image in the container?
我也尝试过这个方法，它有动画方面，但也旋转整个容器：https://www.sitepoint.com/community/t/rotate-background-image-constantly/251925/3
下面是我的代码：

HTML格式：

<section id="banner">
      <div class= "banner-container">
        <div class="row">
          <div class="col text-center">
              <img src="images/BenMillerType.png" class="logo"/>
          </div>
        </div>
        <div class="row justify-content-center align-items-center">
          <div class="col-md-10">
            <p class="promo-title text-center"></p>
            <p class="promo-subtitle text-center">
              Graphic Design | 3D Design | UI/UX Design
            </p>
          </div>
        </div>
      </div>
    <div id="work"></div>
  </section>

CSS格式：

#banner {
  margin-bottom: 100px;
  background-color: #FFFDC4 ;
  border-bottom: 1px solid black;
}

.banner-container{
  overflow: hidden;
  width: 100%;
  height: 95%;
  margin: 0px;
  background-image: url(/images/ColourWheel.png);
  background-position: center;
  margin:0 !important;
}

.promo-subtitle {
  font-size: 20px;
  background-color: rgb(42, 156, 157) !important;
  color: #fff;
  border-radius: 30px;
  border: 1px solid black;
  padding: 10px 20px;
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.logo {
  margin-top: 250px;
  object-fit:contain;
  width: 500px;
  height: auto;
  z-index: 2 !;
}