.conyanhua {
    width: 100%;
    height: 200px;
    
    position: relative;
    display: block;
    /*top: 100px;*/
    background-size: cover;

}
  .fireworks {
      position: absolute;
      width: 100px;
      height: 100px;
      background: #FFEFAD;
  /*     padding-bottom: 100px; */
      -webkit-mask: url('https://imgservices-1252317822.image.myqcloud.com/image/081320210201435/e9951400.png') right top no-repeat;
      -webkit-mask-size: auto 100px;
      animation: fireworks 2s steps(24) infinite, random 8s steps(1) infinite, random_color 1s infinite;
  }
  @keyframes fireworks {
      0% {
          -webkit-mask-position: 0%;
      }
      50%,
      100% {
          -webkit-mask-position: 100% 100%;
      }
  }
  
  @keyframes random {
      0% {
          transform: translate(0, 0);
      }
      25% {
          transform: translate(200%, 50%) scale(0.8);
      }
      50% {
          transform: translate(80%, 80%) scale(1.2);
      }
      75% {
          transform: translate(20%, 60%) scale(0.65);
      }
  }
  @keyframes random_color {
      0% {
          background-color: #FFEFAD;
      }
      25% {
          background-color: #ffadad;
      }
      50% {
          background-color: #aeadff;
      }
      75% {
          background-color: #adffd9;
      }
  }