震惊，加上这css动画，产品经理直呼溜溜溜

波浪扩展动画

/* css动画 */
@-webkit-keyframes ball-scale-multiple {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
}
@keyframes ball-scale-multiple {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
}
.ball-scale-multiple {
    position: relative;
    -webkit-transform: translate(0.2rem,0.14rem);
    -ms-transform: translate(0.2rem,0.14rem);
    transform: translate(0.2rem,0.14rem);
    z-index: 1;
}
.ball-scale-multiple>div:nth-child(2) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.ball-scale-multiple>div:nth-child(3) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}
.ball-scale-multiple>div {
    background-color: rgb(191, 235, 205);
    width: .15rem;
    height: .15rem;
    border-radius: 100%;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute;
    right: 0rem;
    top: -0.54rem;
    opacity: 0;
    margin: 0;
    width: .8rem;
    height: .8rem;
    -webkit-animation: ball-scale-multiple 1s 0s linear infinite;
    animation: ball-scale-multiple 1s 0s linear infinite;
}

光标移动动画

@keyframes colorRight {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 130% 0;
  }
}
li:hover {
    p:first-child {
      animation: colorRight 1.2s;
      color: #222;
      background: @fontColor
        linear-gradient(
          -135deg,
          transparent 25%,
          transparent 40%,
          rgba(255, 255, 255, 1) 40%,
          rgba(255, 255, 255, 1) 60%,
          transparent 60%,
          transparent
        );
      background-size: 20px 20px;
      background-repeat: no-repeat;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-position: -100% 0;
}
}

边框闪动

@keyframes borderRotate {
  50% {
    height: 100%;
    width: 0;
  }
  100% {
    height: 100%;
    width: 100%;
  }
}

 li:hover {
        &::before {
          content: "";
          position: absolute;
          width: 0;
          height: 0;
          border-left: 1px solid #98acff;
          border-bottom: 1px solid #98acff;
          z-index: 6;
          left: 0;
          bottom: 0;
          animation: borderRotate 0.5s forwards;
        }
        &::after {
          content: "";
          position: absolute;
          width: 0;
          height: 0;
          border-top: 1px solid #98acff;
          border-right: 1px solid #98acff;
          z-index: 6;
          right: 0;
          top: 0;
          animation: borderRotate 0.5s forwards;
        }
}