css3 实现页面加载动画（pc+移动）

 先看一下效果吧

 css

<style>
    html,
    body {
      width: 100%;
      height: 100%;
    }

    #load_more_box {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-color: #fff;
      z-index: 99999999;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 14px !important;
    }

    .load_more_wrap {
      transform: translateY(-200%);
    }

    .load_tip {
      color: #cc9856;
    }

    /* 根据自己需求调整行高以及 span的高度就行*/
    /* 建议移动端调整成行高  40px   span为10px  延伸高度为30px */

    .load_more_box {
      height: 80px;
      line-height: 80px;
      position: relative;
      text-align: center;

    }

    .load_more_box span {
      width: 10px;
      height: 10px;
      margin: 0 1px;
      display: inline-block;
      vertical-align: middle;
      background: #cc9856;
      animation: load_more_box 1.5s infinite ease-in-out;
    }

    .load_more_box span:nth-child(2) {
      animation-delay: .2s;
    }

    .load_more_box span:nth-child(3) {
      animation-delay: .4s;
    }

    .load_more_box span:nth-child(4) {
      animation-delay: .6s;
    }

    .load_more_box span:nth-child(5) {
      animation-delay: .8s;
    }

    @keyframes load_more_box {
      0% {
        height: 10px;
        background: #cc9856;
      }

      25% {
        height: 60px;
        background: #e86666;
      }

      50% {
        height: 10px;
        background: #cc9856;
      }

      100% {
        height: 10px;
        background: #cc9856;
      }
    }

    .bounce {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      color: #cc9856;
      height: 100%;
      font: normal bold 6rem "Product Sans", sans-serif;
      white-space: nowrap;
    }

    .letter {
      animation: bounce 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
      display: inline-block;
      transform: translate3d(0, 0, 0);
      margin-top: 0.5em;
      text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
      font: normal 500 6rem 'Varela Round', sans-serif;
      font-size: 22px;
      font-weight: 600;
    }

    .letter:nth-child(1) {
      animation-delay: 0s;
    }

    .letter:nth-child(2) {
      animation-delay: .2s;
    }

    .letter:nth-child(3) {
      animation-delay: .4s;
    }

    .letter:nth-child(4) {
      animation-delay: .6s;
    }

    .letter:nth-child(5) {
      animation-delay: .8s;
    }

    .letter:nth-child(6) {
      animation-delay: 0.4166666667s;
    }

    @keyframes bounce {
      0% {
        transform: translate3d(0, 0, 0);
        text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
      }

      100% {
        transform: translate3d(0, -14px, 0);
        text-shadow: rgba(255, 255, 255, 0.4) 0 1em 0.35em;
      }
    }
  </style>

html

<div id="load_more_box">
   <div class="load_more_wrap">
      <div class="load_more_box">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="load_tip bounce">
        <span class="letter">努</span>
        <span class="letter">力</span>
        <span class="letter">加</span>
        <span class="letter">载</span>
        <span class="letter">中</span>
      </div>
   </div>
 </div>