/**
@keyframes circle {}
@-o-keyframes circle {}
@-moz-keyframes circle {}
@-webkit-keyframes circle {}
**/
.circle {
  animation: circleX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate, circleY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
  -o-animation: circleX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate, circleY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
  -moz-animation: circleX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate, circleY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
  -webkit-animation: circleX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate, circleY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
}
/*画圆运动*/
@keyframes circleX {  from {    top: -0.6rem;  }  to {    top: -0.4rem;  }}
@keyframes circleY {  from {    right: -1.5rem;  }  to {    right: -1.2rem;  }}
.a_ani::before{content:"";position:absolute;width:100%;height:2rem;left:0;right:0;top:50%;background:rgba(255,179,179,0.2);border-radius:50%;margin:-1rem auto auto;animation:mytop 1s infinite;-moz-animation:mytop 1s infinite;-webkit-animation:mytop 1s infinite;-o-animation:mytop 1s infinite;-webkit-transform:scale(0.2)}
@-webkit-keyframes mytop{0%{-webkit-transform:scale(0.2)}100%{-webkit-transform:scale(1)}}
@-moz-keyframes mytop{0%{-moz-transform:scale(0.2)}100%{-moz-transform:scale(1)}}
@-o-keyframes mytop{0%{-o-transform:scale(0.2)}100%{-o-transform:scale(1)}}
@keyframes mytop{0%{transform:scale(0.2)}100%{transform:scale(1)}}

/*放大缩小1*/
@keyframes scale1 {  from {    transform: scale(0.9)  }  to {    transform: scale(1)  }}
@-o-keyframes scale1  {  from {    transform: scale(0.9)  }  to {    transform: scale(1)  }}
@-moz-keyframes scale1  {  from {    transform: scale(0.9)  }  to {    transform: scale(1)  }}
@-webkit-keyframes scale1  {  from {    transform: scale(0.9)  }  to {    transform: scale(1)  }}
/*放大缩小2*/
@keyframes scale2 {  from {    transform: scale(1)  }  to {    transform: scale(1.05)  }}
@-o-keyframes scale2  {  from {    transform: scale(1)  }  to {    transform: scale(1.05)  }}
@-moz-keyframes scale2  {  from {    transform: scale(1)  }  to {    transform: scale(1.05)  }}
@-webkit-keyframes scale2  {  from {    transform: scale(1)  }  to {    transform: scale(1.05)  }}
/*上下移动*/
@keyframes moveY{  0%{transform: translateY(-0.1rem);}  100%{transform: translateY(0);}}
@-o-keyframes moveY{  0%{transform: translateY(-0.1rem);}  100%{transform: translateY(0);}}
@-moz-keyframes moveY{  0%{transform: translateY(-0.1rem);}  100%{transform: translateY(0);}}
@-webkit-keyframes moveY{  0%{transform: translateY(-0.1rem);}  100%{transform: translateY(0);}}

/*左右移动1*/
@keyframes moveX1{  0%{transform: translateX(-0.1rem);}  100%{transform: translateX(0);}}
@-o-keyframes moveX1{  0%{transform: translateX(-0.1rem);}  100%{transform: translateX(0);}}
@-moz-keyframes moveX1{  0%{transform: translateX(-0.1rem);}  100%{transform: translateX(0);}}
@-webkit-keyframes moveX1{  0%{transform: translateX(-0.1rem);}  100%{transform: translateX(0);}}

/*左右移动2----opcity*/
@keyframes moveX2{  0%{transform: translateX(-0.1rem);opacity: .4}  100%{transform: translateX(0.1rem);opacity: 1}}
@-o-keyframes moveX2{  0%{transform: translateX(-0.1rem);opacity: .4}  100%{transform: translateX(0.1rem);opacity: 1}}
@-moz-keyframes moveX2{  0%{transform: translateX(-0.1rem);opacity: .4}  100%{transform: translateX(0.1rem);opacity: 1}}
@-webkit-keyframes moveX2{  0%{transform: translateX(-0.1rem);opacity: .4}  100%{transform: translateX(0.1rem);opacity: 1}}

/*转圈1*/
@keyframes rotate1 {  from {    transform: rotate(0)  }  to {    transform: rotate(360deg)  }}
@-o-keyframes rotate1  {   from {    transform: rotate(0)  }  to {    transform: rotate(360deg)  }}
@-moz-keyframes rotate1  {   from {    transform: rotate(0)  }  to {    transform: rotate(360deg)  }}
@-webkit-keyframes rotate1  {   from {    transform: rotate(0)  }  to {    transform: rotate(360deg)  }}

/*转圈2*/
@keyframes rotate2 {  from {    transform: rotate(0)  }  to {    transform: rotate(-360deg)  }}
@-o-keyframes rotate2  {   from {    transform: rotate(0)  }  to {    transform: rotate(-360deg)  }}
@-moz-keyframes rotate2  {   from {    transform: rotate(0)  }  to {    transform: rotate(-360deg)  }}
@-webkit-keyframes rotate2  {   from {    transform: rotate(0)  }  to {    transform: rotate(-360deg)  }}

@keyframes padding {  from {   padding: 0.1rem 0}  to {    padding: 0.2rem 0  }}
@-o-keyframes padding  {   from {   padding: 0.1rem 0}  to {    padding: 0.2rem 0  }}
@-moz-keyframes padding  {   from {   padding: 0.1rem 0}  to {    padding: 0.2rem 0  }}
@-webkit-keyframes padding  {   from {   padding: 0.1rem 0}  to {    padding: 0.2rem 0  }}

/*字体流光效果  配合 .text-streaming() 使用*/
@-moz-keyframes word {0% {background-position: 0 0;}  100% {background-position: -100% 0 }}
@-webkit-keyframes word {0% {background-position: 0 0;}  100% {background-position: -100% 0}}
@-ms-keyframes word {0% {background-position: 0 0;}  100% {background-position: -100% 0}}
@-o-keyframes word {0% {background-position: 0 0;}  100% {background-position: -100% 0}}
@keyframes word {0% {background-position: 0 0;}  100% {background-position: -100% 0}}

/*抖动渐显*/
@keyframes showing {
  0% {opacity: 0;transform: scale(.4) rotate(0)}
  15%{opacity: .15;transform: scale(.5) rotate(10deg)}
  36%{opacity: .36;transform: scale(.6) rotate(0)}
  50%{opacity: .5;transform: scale(.7) rotate(-10deg)}
  65%{opacity: .65;transform: scale(.8) rotate(0)}
  80%{opacity: .8;transform: scale(.9) rotate(10deg)}
  100% {opacity: 1;transform: scale(1) rotate(0)}
}
@-o-keyframes showing {
  0% {opacity: 0;transform: scale(.4) rotate(0)}
  15%{opacity: .15;transform: scale(.5) rotate(10deg)}
  36%{opacity: .36;transform: scale(.6) rotate(0)}
  50%{opacity: .5;transform: scale(.7) rotate(-10deg)}
  65%{opacity: .65;transform: scale(.8) rotate(0)}
  80%{opacity: .8;transform: scale(.9) rotate(10deg)}
  100% {opacity: 1;transform: scale(1) rotate(0)}
}
@-moz-keyframes showing {
  0% {opacity: 0;transform: scale(.4) rotate(0)}
  15%{opacity: .15;transform: scale(.5) rotate(10deg)}
  36%{opacity: .36;transform: scale(.6) rotate(0)}
  50%{opacity: .5;transform: scale(.7) rotate(-10deg)}
  65%{opacity: .65;transform: scale(.8) rotate(0)}
  80%{opacity: .8;transform: scale(.9) rotate(10deg)}
  100% {opacity: 1;transform: scale(1) rotate(0)}
}
@-webkit-keyframes showing {
  0% {opacity: 0;transform: scale(.4) rotate(0)}
  15%{opacity: .15;transform: scale(.5) rotate(10deg)}
  36%{opacity: .36;transform: scale(.6) rotate(0)}
  50%{opacity: .5;transform: scale(.7) rotate(-10deg)}
  65%{opacity: .65;transform: scale(.8) rotate(0)}
  80%{opacity: .8;transform: scale(.9) rotate(10deg)}
  100% {opacity: 1;transform: scale(1) rotate(0)}
}


@keyframes showing1 {
  0% {transform:  rotate(0);transform-origin: 50% 0;}
  25%{transform:  rotate(6deg);transform-origin: 50% 0;}
  50%{transform:  rotate(0);transform-origin: 50% 0;}
  75%{transform:  rotate(-6deg);transform-origin: 50% 0;}
  100% {transform:  rotate(0);transform-origin: 50% 0;}
}
@-webkit-keyframes showing1{
  0% {transform:  rotate(0);transform-origin: 50% 0;}
  25%{transform:  rotate(6deg);transform-origin: 50% 0;}
  50%{transform:  rotate(0);transform-origin: 50% 0;}
  75%{transform:  rotate(-6deg);transform-origin: 50% 0;}
  100% {transform:  rotate(0);transform-origin: 50% 0;}
}

@keyframes qjmian {
  0% {transform:  translateY(0);}
  20% {transform:  translateY(0.2rem);}
  40% {transform:  translateY(-0.1rem);}
  60%{transform:  translateY(0.15rem)}
  100% {transform:translateY(-0.4rem)}
}