.showEffect {
  position: fixed;
  right: 2%;
  top: 40%;
  z-index: 999999;
  width: 6%;
  opacity: 0.5;
  border-radius: 50%;
}
.showEffect:hover {
  opacity: 1;
  cursor: pointer;
  transform: scale(0.9);
  -webkit-transform: scale(0.9);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.try-animation {
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: url("../images/back.png");
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 2147483647;
}
.try-animation * {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
.try-animation img {
  max-width: inherit;
}
.try-animation .delete {
  position: absolute;
  right: 10%;
  top: 10%;
  z-index: 9000;
}
.try-animation .delete:hover {
  opacity: 0.6;
  cursor: pointer;
}
.try-animation .animate {
  position: absolute;
}
.try-animation .try-img1,
.try-animation .try-img2,
.try-animation .try-img3,
.try-animation .try-img4,
.try-animation .try-img5,
.try-animation .try-img6,
.try-animation .try-img7,
.try-animation .try-img8,
.try-animation .try-img9,
.try-animation .try-img10,
.try-animation .try-img11 {
  opacity: 0;
  will-change: transform, opacity, filter;
}

.try-animation .try-img1 {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: center center;
}
.try-animation .try-img2 {
  width: 24.74%;
  left: 17.29%;
  bottom: 0;
  margin-bottom: 4%;
}
.try-animation .try-img3 {
  width: 14.37%;
  right: 34.4%;
  bottom: 0;
  margin-bottom: 25.8%;
}
.try-animation .try-img4 {
  width: 2.66%;
  right: 23.65%;
  bottom: 0;
  margin-bottom: 27.7%;
}
.try-animation .try-img5 {
  width: 4.27%;
  right: 30.89%;
  bottom: 0;
  margin-bottom: 24.9%;
}
.try-animation .try-img6 {
  width: 16.25%;
  left: 14.58%;
  top: 0;
  margin-top: 5.73%;
}
.try-animation .try-img7 {
  width: 5.42%;
  left: 35.62%;
  top: 0;
  margin-top: 14.64%;
}
.try-animation .try-img8 {
  width: 18.49%;
  left: 22.66%;
  top: 0;
  margin-top: 16.41%;
}
.try-animation .try-img9 {
  width: 8.39%;
  right: 25.78%;
  bottom: 0;
  margin-bottom: 5.99%;
}
.try-animation .try-img10 {
  width: 4.9%;
  right: 20.05%;
  bottom: 0;
  margin-bottom: 7.66%;
}
.try-animation .try-img11 {
  width: 15.73%;
  right: 9.06%;
  bottom: 0;
  margin-bottom: 6.04%;
}

.try-animation.is-play .try-img1 {
  animation: zqScaleDown 3s cubic-bezier(0.22, 1, 0.36, 1) 0s forwards;
}
.try-animation.is-play .try-img2 {
  animation: zqFromBottom 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}
.try-animation.is-play .try-img3 {
  animation: zqFromBottom 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
}
.try-animation.is-play .try-img6 {
  animation: zqFromBottom 2.4s cubic-bezier(0.22, 1, 0.36, 1) 1.25s forwards;
}
.try-animation.is-play .try-img8 {
  animation: zqFromRight 2.4s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards;
}
.try-animation.is-play .try-img7 {
  animation: zqFadeIn 2s ease-out 1.75s forwards;
}
.try-animation.is-play .try-img4 {
  animation: zqFromBottom 2.4s cubic-bezier(0.22, 1, 0.36, 1) 1.95s forwards;
}
.try-animation.is-play .try-img5 {
  animation: zqFromBottom 2.4s cubic-bezier(0.22, 1, 0.36, 1) 2.3s forwards;
}
.try-animation.is-play .try-img9 {
  animation: zqFromBottom 2.4s cubic-bezier(0.22, 1, 0.36, 1) 2.65s forwards;
}
.try-animation.is-play .try-img10 {
  animation: zqFromRight 2.4s cubic-bezier(0.22, 1, 0.36, 1) 3s forwards;
}
.try-animation.is-play .try-img11 {
  animation: zqFromRight 2.6s cubic-bezier(0.22, 1, 0.36, 1) 3.35s forwards;
}

/**
 * 从大到小慢慢显示
 */
@keyframes zqScaleDown {
  from {
    transform: scale(1.35);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/**
 * 从下往上
 */
@keyframes zqFromBottom {
  from {
    transform: translateY(80px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/**
 * 从右往左
 */
@keyframes zqFromRight {
  from {
    transform: translateX(140px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/**
 * 慢慢显示
 */
@keyframes zqFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}