/**
@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: 1.58rem; opacity: .1 }  to {    top:0.5rem; opacity: 1 }}
@keyframes circleY {  from {    right: -0.5rem;  opacity: .1 }  to {    right: -2.2rem;opacity: 1  }}
.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.1)  }}
@-o-keyframes scale1  {  from {    transform: scale(0.9)  }  to {    transform: scale(1.1)  }}
@-moz-keyframes scale1  {  from {    transform: scale(0.9)  }  to {    transform: scale(1.1)  }}
@-webkit-keyframes scale1  {  from {    transform: scale(0.9)  }  to {    transform: scale(1.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(0rem);}  100%{transform: translateX(-0.1rem);}}
@-o-keyframes moveX1{  0%{transform: translateX(0rem);}  100%{transform: translateX(-0.1rem);}}
@-moz-keyframes moveX1{  0%{transform: translateX(0rem);}  100%{transform: translateX(-0.1rem);}}
@-webkit-keyframes moveX1{  0%{transform: translateX(0rem);}  100%{transform: translateX(-0.1rem);}}

/*左右移动2*/
@keyframes moveX2{  0%{transform: translateX(0rem);}  100%{transform: translateX(0.1rem);}}
@-o-keyframes moveX2{  0%{transform: translateX(0rem);}  100%{transform: translateX(0.1rem);}}
@-moz-keyframes moveX2{  0%{transform: translateX(0rem);}  100%{transform: translateX(0.1rem);}}
@-webkit-keyframes moveX2{  0%{transform: translateX(0rem);}  100%{transform: translateX(0.1rem);}}
/*左右移动3*/
@keyframes moveX3{  0%{margin-left: 0.11rem}  100%{margin-left: 70%}}
@-o-keyframes moveX3{  0%{margin-left: 0.11rem}  100%{margin-left: 70%}}
@-moz-keyframes moveX3{  0%{margin-left: 0.11rem}  100%{margin-left: 70%}}
@-webkit-keyframes moveX1{  0%{margin-left: 0.11rem}  100%{margin-left: 70%}}
/*左右移动4*/
@keyframes moveX4{  0%{transform: translateX(0);opacity: .4}  100%{transform: translateX(0.4rem);opacity: 1}}
@-o-keyframes moveX4{  0%{transform: translateX(0);opacity: .4}  100%{transform: translateX(0.4rem);opacity: 1}}
@-moz-keyframes moveX4{  0%{transform: translateX(0);opacity: .4}  100%{transform: translateX(0.4rem);opacity: 1}}
@-webkit-keyframes moveX4{  0%{transform: translateX(0);opacity: .4}  100%{transform: translateX(0.4rem);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 rotate3 {0% {transform: rotate(0deg)}  15%{transform: rotate(-5deg)} 30%{transform: rotate(0deg)} 65%{transform: rotate(20deg)}100% {transform: rotate(0deg)}}
@-o-keyframes rotate3  {  0% {transform: rotate(0deg)}  15%{transform: rotate(-5deg)} 30%{transform: rotate(0deg)} 65%{transform: rotate(20deg)}100% {transform: rotate(0deg)}}
@-moz-keyframes rotate3  {  0% {transform: rotate(0deg)}  15%{transform: rotate(-5deg)} 30%{transform: rotate(0deg)} 65%{transform: rotate(20deg)}100% {transform: rotate(0deg)}}
@-webkit-keyframes rotate3  {  0% {transform: rotate(0deg)}  15%{transform: rotate(-5deg)} 30%{transform: rotate(0deg)} 65%{transform: rotate(20deg)}100% {transform: rotate(0deg)}}

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

@keyframes glow {0%{box-shadow: 0rem 0rem 0.2rem rgba(255, 255, 255,1) }50% {box-shadow: 0rem 0rem 0.2rem rgba(255, 255, 255,.7) } 100% { box-shadow: 0rem 0rem 0.2rem rgba(255, 255, 255,0)  } }
@-webkit-keyframes glow {0%{box-shadow: 0rem 0rem 0.2rem rgba(255, 255, 255,1) }50% {box-shadow: 0rem 0rem 0.2rem rgba(255, 255, 255,.7) } 100% { box-shadow: 0rem 0rem 0.2rem rgba(255, 255, 255,0)  } }
@-ms-keyframes  glow {0%{box-shadow: 0rem 0rem 0.2rem rgba(255, 255, 255,1) }50% {box-shadow: 0rem 0rem 0.2rem rgba(255, 255, 255,.7) } 100% { box-shadow: 0rem 0rem 0.2rem rgba(255, 255, 255,0)  } }
@-o-keyframes glow {0%{box-shadow: 0rem 0rem 0.2rem rgba(255, 255, 255,1) }50% {box-shadow: 0rem 0rem 0.2rem rgba(255, 255, 255,.7) } 100% { box-shadow: 0rem 0rem 0.2rem rgba(255, 255, 255,0)  } }
@-moz-keyframes glow {0%{box-shadow: 0rem 0rem 0.2rem rgba(255, 255, 255,1) }50% {box-shadow: 0rem 0rem 0.2rem rgba(255, 255, 255,.7) } 100% { box-shadow: 0rem 0rem 0.2rem rgba(255, 255, 255,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)}
}

@-webkit-keyframes anime {0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;}}
@keyframes anime {0% {background-position: 0% 50%;} 50%{background-position: 100% 50%;} 100%{background-position: 0% 50%;}}