[英]How can I change tab to "home-tab" with navbar-brand click in bootstrap 5 with Javascript?
[英]I would like my navbar-brand to spin on the click using Bootstrap 4
我正在通過使用 Bootstrap 4 制作一個 Twitter 新界面來測試我的技能,但我對徽標有疑問,我希望 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;
}
添加此樣式
.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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.