材质2.0底部工具栏运动设计与交互(material 2.0 bottom toolbar motion design & interaction)

更多有趣示例 尽在小红砖社区

示例

HTML

<div class="sc-bottom-bar">
    <a class="sc-menu-item">
      <i class="fas fa-list"></i>
      
    </a>
  <a class="sc-menu-item sc-current">
    <i class="fas fa-plus"></i>
  </a>
    <a class="sc-nav-indicator">
    </a>
    <a class="sc-menu-item">
      <i class="fas fa-calendar-alt"></i>
    </a>
  </div>

CSS

:root{
  --primary-color:#0D6FFA;
  --accent-color:#49CE95;
  --danger-color:#EC3582;
  --fore-color:rgba(0,0,0,0.65);
  --main-cast-shadow: 0px 3px 12px rgba(0, 0, 0, 0.08), 0px 3px 6px rgba(0, 0, 0, 0.12);
}
body{
  background-color:#9664a5;
}
.sc-bottom-bar{
  position:absolute;
  display:flex;
  
  padding: 16px 36px;
  justify-content:space-between;
  width:375px;
  margin:auto;
  top:0;
  left:0;
  bottom:0;
  right:0;
  height: 32px;
  
  font-size:26px;
  background-image:radial-gradient(circle at 36px 6px,transparent 36px, #ffffff 37px);
  filter: drop-shadow(0px -1px 6px  rgba(0, 0, 0, 0.08)) drop-shadow(0px -2px 12px  rgba(0, 0, 0, 0.12));
  border-bottom-left-radius:30px;
  border-bottom-right-radius:30px;
  transition: cubic-bezier(0.57, 0.23, 0.08, 0.96) .45s;
}

.sc-nav-indicator{
  position:absolute; 

  width: 56px;
  height: 56px;
  bottom:28px;
  margin:auto;
  left:0;
  
  background-color: #000000;
  box-shadow: var(--main-cast-shadow);
  border-radius:50%;
  transition: cubic-bezier(0.45, 0.73, 0, 0.59) .3s;
}
.sc-menu-item{
  color:var(--fore-color);
  transition:ease-in-out .5s;
  
  cursor: pointer;
}
.sc-current{
  position:relative;
  
  color:#ffffff;
  
  z-index:3;
  transform:translate3d(0px,-22px,0px);
}

JS

var menu_bar = document.querySelector('.sc-bottom-bar');
var menu_item = document.querySelectorAll('.sc-menu-item');
var menu_indicator = document.querySelector('.sc-nav-indicator');
var menu_current_item = document.querySelector('.sc-current');
var menu_position;

menu_position = menu_current_item.offsetLeft - 16;
menu_indicator.style.left = menu_position + "px";
menu_bar.style.backgroundPosition = menu_position-8 + 'px';
menu_item.forEach(
  function(select_menu_item){
    select_menu_item.addEventListener('click', function(e){
      e.preventDefault();
      menu_position = this.offsetLeft - 16;
      menu_indicator.style.left = menu_position + "px";
      menu_bar.style.backgroundPosition = menu_position-8 + 'px';
      [...select_menu_item.parentElement.children].forEach(
        sibling => {
          sibling.classList.remove('sc-current');
        })
      select_menu_item.classList.add('sc-current');
    });
  }
)