Javascript 我希望我的navbar品牌能够使用Bootstrap 4在点击时旋转

我正在测试我的技能，使用Bootstrap4创建一个新的Twitter界面，这是出于我自己的兴趣，但是我对这个徽标有一个问题，我希望在点击它时Twitter徽标会旋转。 我怎样才能做到这一点

下面是我所做工作的预览

HTML

  <a class="navbar-brand" href="#">  <img src="img/twitter-logo.png" width="auto" height="30" class="mx-auto d-inline-block align-top" alt=""></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#first">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#second">Who are we?</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#third">Functions</a>
      </li>
    </ul>
  </div>
</nav>

添加此样式

.navbar-brand.spining{
  animation-name: spin;
  animation-duration: 1000ms;
  animation-timing-function: ease; 
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

并通过

<a class="navbar-brand" href="#" onclick="this.classList.toggle('spining')">...</a> 

添加到此样式中

.navbar-brand.spining{
  animation-name: spin;
  animation-duration: 1000ms;
  animation-timing-function: ease; 
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

并通过

<a class="navbar-brand" href="#" onclick="this.classList.toggle('spining')">...</a> 

您可以在CSS动画中使用

transform:rotate（）

。请添加有疑问的

。只添加了关闭导航（

）。您可以在CSS动画中使用

变换：旋转（）

。请添加有疑问的

。这里只添加了关闭导航（

）。更改

动画持续时间：1000ms根据您的需要。享受吧。我把它改成了
动画持续时间：.5s；动画计时功能：轻松进出更改
动画持续时间：1000ms根据您的需要。享受吧。我把它改成了
动画持续时间：.5s；动画计时功能：轻松进出