Я бы хотел, чтобы мой бренд навигационной панели вращался при нажатии с помощью Bootstrap 4

ProgramBox

Я бы хотел, чтобы мой бренд навигационной панели вращался при нажатии с помощью Bootstrap 4

Post author:admin
Запись опубликована:23 марта, 2023
Post category:Вопросы по программированию

#javascript #html #jquery #css #twitter-bootstrap

#javascript #HTML #jquery #css #twitter-bootstrap

Вопрос:

Я проверяю свои навыки, создавая новый интерфейс Twitter с использованием Bootstrap 4 для собственного удовольствия, но у меня проблема с логотипом, я бы хотел, чтобы логотип Twitter вращался при нажатии на него. Как я мог этого добиться?

Вот предварительный просмотр того, что я уже сделал

https://gyazo.com/bf3626eef72bed0556f3c638c64351d0

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>

CSS , даже если я думаю, что это не очень важно

 .navbar-brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

.navbar-brand > img {
    transform:scale(1);
    transition:transform .2s ease;
}

.navbar-brand > img:hover {
    transform:scale(1.2);
}

.navbar{
  position: fixed !important;
  width:100%;
  transition: background-color 1s;
  box-shadow:0 0 30px rgba(0,0,0,0.03);
  color:#000;
}

.navbar-nav li > a {
    color:rgba(0,0,0,0.22);
    font-weight:400;
}

.navbar-nav li > a:hover {
    color:rgba(0,0,0,1);
}

.navbar-nav > li{
  padding-left:5px;
  padding-right:5px;
}

Ответ №1:

Чтобы добавить в этом стиле

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

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

И переключать класс spining с помощью

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

 .navbar-brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

.navbar-brand > img {
    transform:scale(1);
    transition:transform .2s ease;
}

.navbar-brand > img:hover {
    transform:scale(1.2);
}

.navbar{
  position: fixed !important;
  width:100%;
  transition: background-color 1s;
  box-shadow:0 0 30px rgba(0,0,0,0.03);
  color:#000;
}

.navbar-nav li > a {
    color:rgba(0,0,0,0.22);
    font-weight:400;
}

.navbar-nav li > a:hover {
    color:rgba(0,0,0,1);
}

.navbar-nav > li{
  padding-left:5px;
  padding-right:5px;
}
.navbar-brand.spining{
  animation-name: spin;
  animation-duration: 1000ms;
  animation-timing-function: ease; 
}

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#" onclick="this.classList.toggle('spining')">  <img src="https://i.stack.imgur.com/plLel.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>