CSS光闪过的特效

会员的光线闪过的特效

.member-item-wrap{
        display: inline-flex;
        position: relative;
        height: 100%;
        overflow: hidden;
        align-items: center;
        background: #FEEBCE;
        color: #BD7901;
        padding: 0 10px;
        margin: 0 12px 0 2px;
        cursor: pointer;
        &:before{
          position: absolute;
          top: 0;
          width: 30%;
          height: 100%;
          content: "";
          background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);
          transform: skewX(-45deg);
          animation: lightMove 2s ease infinite;
        }
    }

移动的动画

@keyframes lightMove {
  from{
    left: -100%;
  }
  to{
    left: 150%;
  }
}