Question

在我的网站上，我想让我的导航栏列表文本从右到左淡出，就像这个网站https://www.bravenewcreative.com一样，当你点击3个栏时，这些字母从右到左。我想要在我的网站this is my website，code上应用相同的效果，所以从这里我只想要CSS或javascript或两者中的建议甚至解决方案，无论你认为会让它看起来更顺畅，还有一些易于使用的东西定制

Answer 1

以及如何通过CSS制作动画

HTML

function openBar(){
            Nav = document.getElementById('navegador');
            if(Nav.className==''){
                Nav.className='open';
            }else{
                Nav.className='';
            }
        }

#navegador{
      margin:0;
      padding:12px 56px 12px 12px;
      list-style: none;
      text-align: right;
      background-color: #f0f;
      transition: all 100ms ease;
      opacity: 0;
    }
    
    #navegador li{
      opacity: 0;
      display: inline-block;
      margin: 0 14px;
      color: #fff;
      opacity: 0;
      transition: all 800ms ease;
    }
    
    .icon-menu{
      position: fixed;
      right: 25px;
      top: 18px;
      text-decoration: none;
      color: #0800ff;
      font-weight: bold;
      font-size: 1.2em;
      z-index: 300;
    }
    #navegador.open{
      opacity: 1
    }
    #navegador.open li{
      animation: aparecer .5s ease 1; /* name animation, duration-animation, timing line animation, and repeat animation*/
      animation-fill-mode: forwards; 
    }
    /* delay for animation according to position on item*/
    body ul#navegador li:nth-last-of-type(1){animation-delay: .1s !important;} 
    body ul#navegador li:nth-last-of-type(2){animation-delay: .3s !important;}
    body ul#navegador li:nth-last-of-type(3){animation-delay: .5s !important;}
    body ul#navegador li:nth-last-of-type(4){animation-delay: .9s !important;}
    
    @keyframes aparecer{
      0%{transform: translateX(20px); opacity: 0}
      100%{transform: translateX(0px); opacity: 1;}
    }

<a href="#" class="icon-menu" onclick="openBar();">=</a>    
    <ul id="navegador" class="">
        <li> menu 1 </li>
        <li> menu 2</li>
        <li> menu 3</li>
    </ul>

在导航栏上需要信件淡入点击我应该使用的内容

1 个答案: