<tbody id="5vw1z"></tbody>
<rp id="5vw1z"></rp>
  •  

    前端實現底部tapbar欄代碼

    今天給大家實現一個好看的底部tapbar欄,我們要實現的效果如下:

    css實現底部tapbar欄代碼

    接著看一下具體實現的代碼。

    HTML代碼:

    <div class="container">
      <div class="bar">
        <div class="bar-item pre-active" onclick="changeActive(this)">
          <div class="bar-fluid"></div>
          <div class="drop"></div>
          <i class="far fa-calendar-alt"></i>
        </div>
        <div class="bar-item" onclick="changeActive(this)">
          <div class="bar-fluid"></div>
          <div class="drop"></div>
          <i class="far fa-sticky-note"></i>
        </div>
        <div class="bar-item" onclick="changeActive(this)">
          <div class="bar-fluid"></div>
          <div class="drop"></div>
          <i class="far fa-bell"></i>
        </div>
        <div class="bar-item" onclick="changeActive(this)">
          <div class="bar-fluid"></div>
          <div class="drop"></div>
          <i class="far fa-address-book"></i>
        </div>
      </div>
    </div>

    CSS代碼:

    * {
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
    }
    
    .container {
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fc5c65;
    }
    
    .bar {
      padding: 0px 10px;
      display: flex;
      align-items: center;
      background-color: #ffffff;
      border-radius: 10px 10px 20px 20px;
      box-shadow: 3px 3px 0px 0px rgb(235 59 90);
    }
    
    .bar .bar-item {
      position: relative;
      overflow: hidden;
      padding: 20px 25px;
      cursor: pointer;
    }
    
    .bar .bar-item i {
      z-index: 1;
      position: relative;
      color: #a4b0be;
      transition: all .3s ease-in-out;
    }
    
    .bar .bar-item.pre-active i {
      color: #fc5c65;
    }
    
    .bar .bar-item.active i {
      color: #fc5c65;
      animation: colour 1s ease-in-out;
    }
    
    .bar .bar-item.active .bar-fluid {
      position: absolute;
      top: 0px;
      left: 0px;
      background-color: #fc5c65;
      width: 100%;
      height: 0px;
      animation: fluid 1s ease-in-out;
    }
    
    .bar .bar-item.active .bar-fluid:before {
      content: '';
      position: absolute;
      top: 0px;
      left: -50%;
      background-color: #ffffff;
      width: 110%;
      height: 400%;
      border-radius: 50%;
    }
    
    .bar .bar-item.active .bar-fluid:after {
      content: '';
      position: absolute;
      top: 0px;
      right: -50%;
      background-color: #ffffff;
      width: 110%;
      height: 400%;
      border-radius: 50%;
    }
    
    .bar .bar-item.active .drop {
      position: absolute;
      top: -2.5px;
      left: 30.5px;
      background-color: #fc5c65;
      width: 2.5px;
      height: 2.5px;
      border-radius: 50%;
      animation: drop 1s ease-in-out;
    }
    
    @keyframes colour {
      0% { color: #a4b0be; }
      55% {
        color: #a4b0be;
        transform: scale(1);
      }
      60% {
        color: #fc5c65;
        transform: scale(1);
      }
      70% { transform: scale(1.1); }
      80% { transform: scale(1); }
    }
    
    @keyframes fluid {
      0% { height: 0px; }
      30% { height: 10px; }
      100% { height: 0px; }
    }
    
    @keyframes drop {
      20% { top: -2.5px; }
      50% { top: 21px; }
      51% { top: -2.5px; }
    }

    JavaScript代碼:

    const preactiveItem = document.querySelector('.pre-active')
    const barItems = document.querySelectorAll('.bar-item')
    
    function changeActive (newActive) {
      preactiveItem.classList.remove('pre-active')
      barItems.forEach(element => {
        element.classList.remove('active')
      })
      newActive.classList.add('active')
    }

    看著有點多,沒事,自己下去慢慢消化,實在不想消化的就直接做個CV工程師,也不是不可以,哈哈。

    「點點贊賞,手留余香」

    1

    給作者打賞,鼓勵TA抓緊創作!

    微信微信 支付寶支付寶

    還沒有人贊賞,快來當第一個贊賞的人吧!

    聲明:
    1. 本站所有文章教程及資源素材均來源于網絡與用戶分享或為本站原創,僅限用于學習和研究。
    2. 如果內容損害你的權益請聯系客服QQ:1642748312給予處理。
    碼云筆記 » 前端實現底部tapbar欄代碼

    發表回復

    IT互聯網行業相關廣告投放 更專業 更精準

    立即查看 聯系我們
    亚洲 自拍 另类小说综合图区