/* 特效流星 */
.night{
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    width: 40em ;
    height: 40em;
    position: absolute;
    top: -5em;
    right: -10em;
    transform: rotate(-60deg);
    z-index: 1;
}
.star {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 2px;
  background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
  border-radius: 999px;
  -webkit-filter: drop-shadow(0 0 6px #699bff);
          filter: drop-shadow(0 0 6px #699bff);
  -webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
          animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
}
.star::before, .star::after {
  content: '';
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  height: 2px;
  background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
  -webkit-transform: translateX(50%) rotateZ(45deg);
          transform: translateX(50%) rotateZ(45deg);
  border-radius: 100%;
  -webkit-animation: shining 3000ms ease-in-out infinite;
          animation: shining 3000ms ease-in-out infinite;
}
.star::after {
  -webkit-transform: translateX(50%) rotateZ(-45deg);
          transform: translateX(50%) rotateZ(-45deg);
}
.star:nth-child(1) {
  top: calc(50% - 185px);
  left: calc(50% - 150px);
  -webkit-animation-delay: 7371ms;
          animation-delay: 7371ms;
}
.star:nth-child(2) {
  top: calc(50% - 50px);
  left: calc(50% - 80px);
  -webkit-animation-delay: 9256ms;
          animation-delay: 9256ms;
}
.star:nth-child(3) {
  top: calc(50% - -146px);
  left: calc(50% - 135px);
  -webkit-animation-delay: 3147ms;
          animation-delay: 3147ms;
}
.star:nth-child(4) {
  top: calc(50% - -77px);
  left: calc(50% - 70px);
  -webkit-animation-delay: 8700ms;
          animation-delay: 8700ms;
}
.star:nth-child(5) {
  top: calc(50% - 0);
  left: calc(50% - 116px);
  -webkit-animation-delay: 4705ms;
          animation-delay: 4705ms;
}
.star:nth-child(6) {
  top: calc(50% - 243px);
  left: calc(50% - 167px);
  -webkit-animation-delay: 5205ms;
          animation-delay: 5205ms;
}
.star:nth-child(7) {
  top: calc(50% - 131px);
  left: calc(50% - 157px);
  -webkit-animation-delay: 6420ms;
          animation-delay: 6420ms;
}
/* 烟尾 */
@keyframes tail {
  0% {width: 0;}
  30% {width: 100px;}
  100% {width: 0;}
}
@-webkit-keyframes tail {
  0% {width: 0;}
  30% {width: 100px;}
  100% {width: 0;}
}
/* 闪烁 */
@-webkit-keyframes shining {
  0% {width: 0;}
  50% {width: 30px;}
  100% {width: 0;}
}
@keyframes shining {
  0% {width: 0;}
  50% {width: 30px;}
  100% {width: 0;}
}
/* 位移 */
@-webkit-keyframes shooting {
  0% {-webkit-transform: translateX(0);transform: translateX(0);}
  100% {-webkit-transform: translateX(300px);transform: translateX(300px);}
}
@keyframes shooting {
  0% {-webkit-transform: translateX(0);transform: translateX(0);}
  100% {-webkit-transform: translateX(300px);transform: translateX(300px);}
}


/* ----plan---- 飞机独自飞翔，自带白云效果 */
/* 
----plan----
    <div class="planefly">
        <div id="plane">
            <img id="fly" src="img/fly.png">
            <img src="img/fly-1.png">
            <img src="img/fly-1.png">
        </div>
    </div>
*/
    
.planefly:hover #plane{
	-webkit-animation:planeFly 0.5s linear forwards; 
            animation:planeFly 0.5s linear forwards;
}
.planefly:hover #plane img:nth-child(1){
	-webkit-animation:flyTopBottom 3s linear infinite alternate; 
            animation:flyTopBottom 3s linear infinite alternate;
    -webkit-animation-delay:0.5s;
            animation-delay:0.5s;
}
#plane{
    position: absolute;
    left: -40px;
    top:-20px;
    width: 6em;
    opacity: 0;
}
#plane img{
    position: absolute;
}
#plane img:nth-child(1){
    width: 100%;
    top: 0;
    left: 0;
}
#plane img:nth-child(2){
    width: 10%;
    top: 1.5em;
    right: -1em;
    opacity: 0;
	-webkit-animation:roation 1s linear infinite; 
            animation:roation 1s linear infinite;
            
}
#plane img:nth-child(3){
    width: 13%;
    top: 2em;
    right: -1em;
    opacity: 0.5;
	-webkit-animation:roation 1.2s linear infinite; 
            animation:roation 1.2s linear infinite;
    -webkit-animation-delay:0.5s;
            animation-delay:0.5s;
}
/* 飞机往右飞 */
@-webkit-keyframes planeFly{
    0% {top:0}
    10% {opacity: 1;}
    100% {left:70%;opacity: 1;}
}
@keyframes planeFly{
    0% {top:0}
    10% {opacity: 1;}
    100% {left:70%;opacity: 1;}
}
/* 飞机上下飞 */
@-webkit-keyframes flyTopBottom{
    0% {top:0;left: 0;}
    30% {top:-0.7em;}
    100% {top:1.3em;}
}
@keyframes flyTopBottom{
    0% {top:0;left: 0;}
    30% {top:-0.7em;}
    100% {top:1.3em;}
}
/* 云彩向后 */
@-webkit-keyframes roation{
    0% {}
    10%{opacity: 1;}
    100% {right: 90%;}
}
@keyframes roation{
    0% {}
    10%{opacity: 1;}
    100% {right: 90%;}
}

/* ----plan-1---- 飞机固定飞翔，自带满屏白云效果 */
/* 
----plan-1----
    <div class="planefly">
        <div id="plane-1">
            <img id="fly" src="img/fly.png">
            <img src="img/fly-1.png">
            <img src="img/fly-1.png">
        </div>
    </div>

*/
.planefly:hover #plane-1{
	-webkit-animation:planeOpcity-1 0.5s linear forwards; 
            animation:planeOpcity-1 0.5s linear forwards;
}
.planefly:hover #plane-1 img:nth-child(1){
	-webkit-animation:planeFly-1 0.5s linear forwards,flyTopBottom-1 4.5s linear infinite alternate; 
            animation:planeFly-1 0.5s linear forwards,flyTopBottom-1 4.5s linear infinite alternate;
}
#plane-1{
    position: absolute;
    left: 10%;
    top: 10%;
    width: 8em;
    opacity: 0;
}
#plane-1 img{
    position: absolute;
}
#plane-1 img:nth-child(1){
    width: 100%;
    left: -40px;
    top: 13%;
    z-index: 1;
}
#plane-1 img:nth-child(2){
    width: 60%;
    top: -1.5em;
    left: 150%;
    z-index: 0;
    opacity: 0;
	-webkit-animation:roation-1 3.5s linear infinite; 
            animation:roation-1 3.5s linear infinite;
            
}
#plane-1 img:nth-child(3){
    width: 100%;
    top: 2em;
    left: 150%;
    z-index: 3;
    opacity: 0.5;
	-webkit-animation:roation-1 2s linear infinite; 
            animation:roation-1 2s linear infinite;
    -webkit-animation-delay:0.5s;
            animation-delay:0.5s;
}
/* 动画整体显形 */
@-webkit-keyframes planeOpcity-1{
    10% {opacity: 1;}
    100% {opacity: 1;}
}
@keyframes planeOpcity-1{
    10% {opacity: 1;}
    100% {opacity: 1;}
}
/* 飞机往右飞到中央 */
@-webkit-keyframes planeFly-1{
    0%{}
    100% {left:30%;}
}
@keyframes planeFly-1{
    0%{}
    100% {left:30%;}
}
/* 飞机上下飞 */
@-webkit-keyframes flyTopBottom-1{
    0% {top:0;}
    10% {top:-0.2em;}
    45% {top:-3em;}
    50% {top:-3.1em;}
    95% {top:1.2em;}
    100% {top:1.3em;}
}
@keyframes flyTopBottom-1{
    0% {top:0;}
    10% {top:-0.2em;}
    45% {top:-3em;}
    50% {top:-3.1em;}
    95% {top:1.2em;}
    100% {top:1.3em;}
}
/* 云彩向后 */
@-webkit-keyframes roation-1{
    0% {opacity: 0;}
    20%{opacity: 1;}
    80%{opacity: 1;}
    100% {left: -9em;opacity: 0;}
}
@keyframes roation-1{
    0% {opacity: 0;}
    20%{opacity: 1;}
    80%{opacity: 1;}
    100% {left: -9em;opacity: 0;}
}




/* 老师 */
.item-3:hover #tch{
	-webkit-animation:tch 0.5s linear forwards; 
            animation:tch 0.5s linear forwards;
}
.item-3:hover #tch img:nth-child(3){
	-webkit-animation:tch3 2s linear infinite alternate; 
            animation:tch3 2s linear infinite alternate;
}
.item-3:hover #tch img:nth-child(1){
	-webkit-animation:tch1 1s linear infinite alternate; 
            animation:tch1 1s linear infinite alternate;
}
.item-3:hover #heban{
	-webkit-animation:tch4 1s linear forwards; 
            animation:tch4 1s linear forwards;
}
#heban{
    position: absolute;
    height: 50%;
    left: 1em;
    top: 1em;
    width: 94%;
    opacity: 0;
}
#tch{
    position: absolute;
    right: 0;
    top: 0;
    width: 5em;
    height: 10em;    
    opacity: 0;
}
#tch img{
    position: absolute;
    width: 100%;
}
#tch img:nth-child(3){
    top:1em;
    right: -1.2em;
}
#tch img:nth-child(2){
    top:3em;
    right: -0.9em;
}
#tch img:nth-child(1){
    top:3em;
    right: -0.9em;
}
/* 黑板画 */
@-webkit-keyframes tch4{
    0% {}
    100%{opacity: 1;}
}
@keyframes tch4{
    0% {}
    100%{opacity: 1;}
}
/* 人物整体 */
@-webkit-keyframes tch{
    0% {}
    100%{opacity: 1;}
}
@keyframes tch{
    0% {}
    100%{opacity: 1;}
}
/* 头 */
@-webkit-keyframes tch3{
    0% {transform: rotate(-10deg);}
    20%{transform: rotate(0);}
    50%{transform: rotate(1deg);}
    60%{transform: rotate(0);}
    100% {transform: rotate(10deg);}
}
@keyframes tch3{
    0% {transform: rotate(-10deg);}
    20%{transform: rotate(0);}
    50%{transform: rotate(1deg);}
    60%{transform: rotate(0);}
    100% {transform: rotate(10deg);}
}
/* 手臂 */
@-webkit-keyframes tch1{
    0% {transform: rotate(-10deg);}
    40%{transform: rotate(0);}
    50%{transform: rotate(1deg);}
    60%{transform: rotate(0);}
    100% {transform: rotate(10deg);}
}
@keyframes tch1{
    0% {transform: rotate(-10deg);}
    40%{transform: rotate(0);}
    50%{transform: rotate(1deg);}
    60%{transform: rotate(0);}
    100% {transform: rotate(10deg);}
}

.morePage{
    position: absolute;
    right: 3em;
    top: 2em;
    margin: 1em;
    font-weight: 600;
    color: #9b9b9b;
    cursor: pointer;
}
.morePage:hover{
    color: #0ca1b9;
}