骨架屏中的那一道光

效果：

HTML

<div class="skeleton-wrapper"></div>

CSS:

.skeleton-wrapper {
      width: 600px;
      height: 300px;
      background-color: #eee;
      position: relative;
      font-size: 0;
      line-height: 0;
      overflow: hidden;
    }

    .skeleton-wrapper:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 20;
      background: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), color-stop(rgba(255, 255, 255, .5)), to(rgba(255, 255, 255, 0)));
      background: linear-gradient(270deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
      -webkit-animation: skeletonLoading 2s ease-in-out infinite;
      animation: skeletonLoading 2s ease-in-out infinite;
    }

    @-webkit-keyframes skeletonLoading {
      0% {
        -webkit-transform: translate(-100%);
        transform: translate(-100%)
      }

      80%,
      to {
        -webkit-transform: translate(100%);
        transform: translate(100%)
      }
    }

    @keyframes skeletonLoading {
      0% {
        -webkit-transform: translate(-100%);
        transform: translate(-100%)
      }

      80%,
      to {
        -webkit-transform: translate(100%);
        transform: translate(100%)
      }
    }