css 使用三次Bezier变换和Bootstrap制表符按钮

jecbmhm3  于 2023-08-09  发布在  Bootstrap
关注(0)|答案(1)|浏览(151)

我试图使标签按钮切换动画像这个参考它不使用Bootstrap标签。

  1. var tabs = $('.tabs');
  2. var selector = $('.tabs').find('a').length;
  3. //var selector = $(".tabs").find(".selector");
  4. var activeItem = tabs.find('.active');
  5. var activeWidth = activeItem.innerWidth();
  6. $(".selector").css({
  7. "left": activeItem.position.left + "px",
  8. "width": activeWidth + "px"
  9. });
  10. $(".tabs").on("click", "a", function(e) {
  11. e.preventDefault();
  12. $('.tabs a').removeClass("active");
  13. $(this).addClass('active');
  14. var activeWidth = $(this).innerWidth();
  15. var itemPos = $(this).position();
  16. $(".selector").css({
  17. "left": itemPos.left + "px",
  18. "width": activeWidth + "px"
  19. });
  20. });
  1. @import url('https://fonts.googleapis.com/css?family=Roboto');
  2. body {
  3. height: 100vh;
  4. display: flex;
  5. flex-direction: column;
  6. justify-content: center;
  7. align-items: center;
  8. font-family: 'Roboto', sans-serif;
  9. }
  10. h2 {
  11. margin: 0px;
  12. text-transform: uppercase;
  13. }
  14. h6 {
  15. margin: 0px;
  16. color: #777;
  17. }
  18. .wrapper {
  19. text-align: center;
  20. margin: 50px auto;
  21. }
  22. .tabs {
  23. margin-top: 50px;
  24. font-size: 15px;
  25. padding: 0px;
  26. list-style: none;
  27. background: #fff;
  28. box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
  29. display: inline-block;
  30. border-radius: 50px;
  31. position: relative;
  32. }
  33. .tabs a {
  34. text-decoration: none;
  35. color: #777;
  36. text-transform: uppercase;
  37. padding: 10px 20px;
  38. display: inline-block;
  39. position: relative;
  40. z-index: 1;
  41. transition-duration: 0.6s;
  42. }
  43. .tabs a.active {
  44. color: #fff;
  45. }
  46. .tabs a i {
  47. margin-right: 5px;
  48. }
  49. .tabs .selector {
  50. height: 100%;
  51. display: inline-block;
  52. position: absolute;
  53. left: 0px;
  54. top: 0px;
  55. z-index: 1;
  56. border-radius: 50px;
  57. transition-duration: 0.6s;
  58. transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  59. background: #05abe0;
  60. background: -moz-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
  61. background: -webkit-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
  62. background: linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
  63. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05abe0', endColorstr='#8200f4', GradientType=1);
  64. }
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <div class="wrapper">
  3. <h2>Elastic Tabs</h2>
  4. <h6>Click on tabs to see them in action</h6>
  5. <nav class="tabs">
  6. <div class="selector"></div>
  7. <a href="#" class="active"><i class="fab fa-superpowers"></i>Avengers</a>
  8. <a href="#"><i class="fas fa-hand-rock"></i>Hulk</a>
  9. <a href="#"><i class="fas fa-bolt"></i>Thor</a>
  10. <a href="#"><i class="fas fa-burn"></i>Marvel</a>
  11. </nav>
  12. </div>

这是我正在使用的Bootstrap标签,我试图找到可以实现上述过渡的参考,但找不到任何。

  1. .nav-link {
  2. transition-duration: 1.5s;
  3. transition-timing-function: cubic-bezier(1, 0.1, 1, 0.7);
  4. }
  1. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
  2. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
  3. <div class="d-flex align-items-start">
  4. <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  5. <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
  6. <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
  7. <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
  8. <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  9. </div>
  10. <div class="tab-content" id="v-pills-tabContent">
  11. <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0">Home</div>
  12. <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">Profile</div>
  13. <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">Messages</div>
  14. <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">Settings</div>
  15. </div>
  16. </div>

的字符串
任何建议或帮助,我可以得到,以实现过渡动画,我需要与引导标签按钮?

im9ewurl

im9ewurl1#

没有什么像动画背景元素内置到 Bootstrap ,唯一发生的过渡是颜色的变化。
您可以使用具有更高特异性的选择器来覆盖过渡属性值,如:#v-pills-tab .nav-link。在下面的代码片段中,您将看到颜色根据您的计时函数和持续时间进行转换。

  1. #v-pills-tab .nav-link {
  2. transition-duration: 1.5s;
  3. transition-timing-function: cubic-bezier(1, 0.1, 1, 0.7);
  4. }

个字符

相关问题