记录一次loading制作

扫光效果分别用svg和css两种效果实现，svg的效果要好些，但是加载比css慢

html

<div class="load-effect">
    <div class="span-box"><span></span></div>
    <div class="span-box"><span></span></div>
    <div class="span-box"><span></span></div>
    <div class="span-box"><span></span></div>
    <div class="span-box"><span></span></div>
    <div class="span-box"><span></span></div>
    <div class="span-box"><span></span></div>
    <div class="span-box"><span></span></div>
    <div class="span-box"><span></span></div>
    <div class="span-box"><span></span></div>
    <div class="span-box"><span></span></div>
    <div class="span-box"><span></span></div>
    <div class="span-box"><span></span></div>
    <div class="span-box"><span></span></div>
    <div class="span-box"><span></span></div>
    <div class="span-box"><span></span></div>
  </div>
  <div class="logo">
    <!-- <svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      x="0px" y="0px" viewBox="0 0 97.5 23.2" style="enable-background:new 0 0 97.5 23.2;" xml:space="preserve">
      <defs>
        <linearGradient id="gradient" x1="0.2" x2="0.8" y1="0.3" y2="0.5">
          <stop offset="0" stop-color="#fff" stop-opacity="0"></stop>
          <stop offset="0.6" stop-color="#fff" stop-opacity="0.8"></stop>
          <stop offset="0.7" stop-color="#fff" stop-opacity="0.9"></stop>
          <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
        </linearGradient>
        <clipPath id="mask" fill="#000">
          <path d="M23 -60 L20 -60 L226 -60 L226 180 L-23 180 Z" fill="#000"></path>
        </clipPath>
      </defs>
      <rect x="-56%" y="-145%" width="100" height="90" fill="url(#gradient)" clip-path="url(#mask)">
        <animate attributeType="XML" attributeName="x" from="-100" to="100" dur="2.5s" repeatCount="indefinite" />
      </rect>
    </svg> -->
  </div>

回滚

 body {
      background-color: #1e1e1e;
    }

    .logo {
      width: 100px;
      height: 80px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      zoom: .5;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      background: url("logo_A.png") no-repeat left, url("logo_S.png") no-repeat right;
      overflow: hidden;
      background-color: #1e1e1e;
      background-size: 50%;
      z-index: 2;
      clip-path: polygon(92% 0, 97% 8%, 97% 95%, 92% 100%, 0 100%, 12% 0);
      -webkit-clip-path: polygon(92% 0, 97% 8%, 97% 95%, 92% 100%, 0 100%, 12% 0);
    }

    /* .logo svg {
      position: absolute;
      top: 0;
      left: -2px;
      display: block;
      width: 100px;
      height: 80px;
      mix-blend-mode: overlay;
      z-index: 10;
    } */

    /* loading */
    .load-effect {
      width: 180px;
      height: 180px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 6);
      zoom: .5;
      z-index: 1;
    }

    .load-effect .span-box span {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ffd051;
      animation: load 2.4s ease infinite;
    }

    @keyframes load {
      0% {
        opacity: 1;
      }

      100% {
        opacity: 0.1;
      }
    }

    .load-effect .span-box {
      height: 180px;
      width: 8px;
      display: block;
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -4px;
    }

    .load-effect .span-box:nth-child(1) {
      transform: rotate(calc(22.5deg*1));
    }

    .load-effect .span-box:nth-child(2) {
      transform: rotate(calc(22.5deg*2));
    }

    .load-effect .span-box:nth-child(3) {
      transform: rotate(calc(22.5deg*3));
    }

    .load-effect .span-box:nth-child(4) {
      transform: rotate(calc(22.5deg*4));
    }

    .load-effect .span-box:nth-child(5) {
      transform: rotate(calc(22.5deg*5));
    }

    .load-effect .span-box:nth-child(6) {
      transform: rotate(calc(22.5deg*6));
    }

    .load-effect .span-box:nth-child(7) {
      transform: rotate(calc(22.5deg*7));
    }

    .load-effect .span-box:nth-child(8) {
      transform: rotate(calc(22.5deg*8));
    }

    .load-effect .span-box:nth-child(9) {
      transform: rotate(calc(22.5deg*9));
    }

    .load-effect .span-box:nth-child(10) {
      transform: rotate(calc(22.5deg*10));
    }

    .load-effect .span-box:nth-child(11) {
      transform: rotate(calc(22.5deg*11));
    }

    .load-effect .span-box:nth-child(12) {
      transform: rotate(calc(22.5deg*12));
    }

    .load-effect .span-box:nth-child(13) {
      transform: rotate(calc(22.5deg*13));
    }

    .load-effect .span-box:nth-child(14) {
      transform: rotate(calc(22.5deg*14));
    }

    .load-effect .span-box:nth-child(15) {
      transform: rotate(calc(22.5deg*15));
    }

    .load-effect .span-box:nth-child(16) {
      transform: rotate(calc(22.5deg*16));
    }

    .load-effect .span-box:nth-child(1) span {
      animation-delay: calc(0.3s*1);
      opacity: calc(1/8);
    }

    .load-effect .span-box:nth-child(2) span {
      animation-delay: calc(0.3s*2);
      opacity: calc(2/8);
    }

    .load-effect .span-box:nth-child(3) span {
      animation-delay: calc(0.3s*3);
      opacity: calc(3/8);
    }

    .load-effect .span-box:nth-child(4) span {
      animation-delay: calc(0.3s*4);
      opacity: calc(4/8);
    }

    .load-effect .span-box:nth-child(5) span {
      animation-delay: calc(0.3s*5);
      opacity: calc(5/8);
    }

    .load-effect .span-box:nth-child(6) span {
      animation-delay: calc(0.3s*6);
      opacity: calc(6/8);
    }

    .load-effect .span-box:nth-child(7) span {
      animation-delay: calc(0.3s*7);
      opacity: calc(7/8);
    }

    .load-effect .span-box:nth-child(8) span {
      animation-delay: calc(0.3s*8);
      opacity: 1;
    }

    .load-effect .span-box:nth-child(9) span {
      animation-delay: calc(0.3s*1);
      opacity: calc(1/8);
    }

    .load-effect .span-box:nth-child(10) span {
      animation-delay: calc(0.3s*2);
      opacity: calc(2/8);
    }

    .load-effect .span-box:nth-child(11) span {
      animation-delay: calc(0.3s*3);
      opacity: calc(3/8);
    }

    .load-effect .span-box:nth-child(12) span {
      animation-delay: calc(0.3s*4);
      opacity: calc(4/8);
    }

    .load-effect .span-box:nth-child(13) span {
      animation-delay: calc(0.3s*5);
      opacity: calc(5/8);
    }

    .load-effect .span-box:nth-child(14) span {
      animation-delay: calc(0.3s*6);
      opacity: calc(6/8);
    }

    .load-effect .span-box:nth-child(15) span {
      animation-delay: calc(0.3s*7);
      opacity: calc(7/8);
    }

    .load-effect .span-box:nth-child(16) span {
      animation-delay: calc(0.3s*8);
      opacity: 1;
    }

    /* 用css实现的扫光效果 */
    .logo:after {
      display: block;
      content: " ";
      position: absolute;
      width: 60px;
      height: 80px;
      top: 0;
      left: -50px;
      z-index: 4;
      background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
      background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, .55)), color-stop(100%, rgba(255, 255, 255, 0)));
      background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
      background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
      transform: skewX(-10deg);
      animation: light-slide 1.8s 1s linear infinite;
    }

    @keyframes light-slide {
      from {
        left: -50px;
      }

      to {
        left: 150px;
      }
    }