【如何让胶囊式导航栏实现下拉的动画效果 _导航栏 _css动画】

如何让胶囊式导航栏实现下拉的动画效果

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(0)

导航栏 css动画

详细描述

截图

代码

  .nvb-ul {
    display: none;
    text-align: center;
    width: 100%;
    padding: 0;
    height: auto;
    transition: display .5s ease;//这里是报错的
  }
  .nvb-li {
    background-color: #29b078;
    line-height: 3rem;
    border-bottom: none!important;
    overflow-x: hidden;
    width: 100%;
    &:first-child {
      border-top: .1rem solid #fff;
    }
  }
}
#menu:checked~ .nvb-ul {
  display: block;
}

编辑于2024-04-17