溢出时具有淡入淡出效果的水平菜单

Question

我正在使用 CSS3/SASS，如果可能我不想使用任何 Javascript。我正在尝试制作一个水平菜单，其中 overflow-x 会在右侧产生漂亮的淡入淡出效果，因此移动设备上的用户会知道他可以左右移动它。

这是我要实现的目标：

...正如您在图片上看到的那样，右侧的文字有点淡出，当然，还有一个 OPTION3 菜单项（所以它溢出了）。

到目前为止我得到了菜单，但我真的不知道溢出和它们的技巧。

HTML:

<nav class="navbar">
  <ul class="navbar-list">
    <li class="navbar-item"><a href="#">about</a></li>
    <li class="navbar-item"><a href="#">settings</a></li>
    <li class="navbar-item"><a href="#">option1</a></li>
    <li class="navbar-item"><a href="#">option2</a></li>
    <li class="navbar-item"><a href="#">option3</a></li>
  </ul>
</nav>

SASS:

.navbar
    float: left
    height: 40px
    min-width: 100%
    display: flex
    flex-wrap: wrap

    .navbar-item
        padding: 13px 0px
        font-size: 12px
        line-height: 14px
        text-transform: uppercase
        display: inline-block
        float: left
        margin: 0px 10px

        &.active
            padding: 13px 0px 11px 0px
            border-bottom: 2px solid $light-blue

        &:hover
            cursor: pointer

        a 
            color: $dark-grey
            font-weight: 600
            text-decoration: none

Answer 1

您可以使用 :before 和 :after 元素。（例如 div 和 width:100vh）您在屏幕左侧显示一种渐变，在右侧显示一种。

  content:'';
  height: 100%;
  width: 15%;
  display:block;
  position: absolute;
  left: 0;
  background: rgba(255,255,255,1);
  background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
  background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );

这样，您的菜单边缘就会出现渐变。

更精确一点，

.navbar 应该有 overflow-x: auto; white-space: nowrap; 并且 navbar-list 应该是 100% 宽。

溢出时具有淡入淡出效果的水平菜单

Horizontal menu with fade effect on overflow

css

sass

overflow