Question

我如何使用Javascript或jQuery做同样的事情？

使用css它也可以工作，但是当最后一行完成时，我需要重新开始行。此外，最后一个<li>元素边界右线也必须动画。

有什么想法吗？谢谢？

Answer 1

使用last-child选择器为最后一个li设置border-right。

li {
      list-style-type:none;    
      }
      a {
        float:left;
        font-size: 26px;
        text-align: center;
        color: #000;
        text-decoration: none;
        padding: 50px 35px;
        border-left: 1px solid transparent;
        -webkit-animation: fadeinout 1s linear forwards;
        animation: fadeinout 1s linear forwards;
        }
         a:hover {
          background-color: rgba(0, 0, 0, 0.4);
        }
        li:last-child a:after{
          content: '';
          height: 100%;
          width: 0px;
          border-right: 1px solid transparent;          
          right: 0;
          top: 0;
          -webkit-animation: fadeinout 1s linear forwards;
          animation: fadeinout 1s linear forwards;
          -webkit-animation-delay: 3s;
          animation-delay: 3s;
          padding:50px 35px 50px 0;
        }

      @-webkit-keyframes fadeinout {
        0%   { border-color: transparent}
        50%  { border-color: black}
        100% { border-color: transparent }
      }


    li:first-child > a {
        left: 9.5%;     
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
    }
    li:nth-child(2) > a {
        left: 19.5%;
        -webkit-animation-delay: 1s;
        animation-delay: 1s;
    }
    li:nth-child(3) > a {
        left: 29.6%;
        -webkit-animation-delay: 1.5s;
        animation-delay: 1.5s;
    }
    li:nth-child(4) > a {
        left: 39.6%;
        -webkit-animation-delay: 2s;
        animation-delay: 2s;
    }
    li:nth-child(5) > a {
        left: 49.7%;
        -webkit-animation-delay: 2.5s;
        animation-delay: 2.5s;
    }
    li:nth-child(6) > a {
        left: 59.8%;
        -webkit-animation-delay: 3s;
        animation-delay: 3s;
    }
    li:nth-child(7) > a {
        left: 69.9%;
        -webkit-animation-delay: 3.5s;
        animation-delay: 3.5s;
    }
    li:nth-child(8) > a {
        left: 80%;
        -webkit-animation-delay: 4s;
        animation-delay: 4s;
    }

<ul>
       <li><a>one</a></li>
    
       <li><a>two</a></li>
    
       <li><a>three</a></li>
    
       <li><a>four</a></li>
    
       <li><a>five</a></li>
</ul>

边框线动画

1 个答案: