img {
    position: absolute;
    width: 100%;
}

/*背板*/
.backplane{
    width: 160px;
    height: 210px;
    right: 0px;
    animation: Upmove 5s infinite;
    animation-timing-function: ease-in-out;
}

/*线-块*/
.div_line{
    width: 150px;
    height: 60px;
    right: 50px;
    top: 200px;
    animation: UpmoveMore 4s infinite;
    animation-timing-function: ease-in-out;
}

/*圆饼*/
.circle{
    width: 45px;
    height: 30px;
    left: 160px;
    top: 265px;
    animation: UpmoveMore 3s infinite;
    animation-timing-function: ease-in-out;
}

.animation {
    background: url("../images/loginBg.png") no-repeat;
    height: 570px;
    width: 870px;
    position: relative;
    background-size: 100%;
}

.bubble{
    width: 13px;
    height: 12px;
    position: absolute;
}

.colorBubble{
    width: 7px;
    height: 7px;
    position: absolute;
    transform: scale(1.5);
}

.img1{    
    left: 480px;
    top: 200px;
    animation: imgMove1 3s infinite;
    animation-timing-function: ease-in-out;
}

.img2{    
    left: 460px;
    top: 215px;
    animation: imgMove1 4s infinite;
    animation-timing-function: ease-in-out;
}

.img3{    
    left: 430px;
    top: 120px;
    animation: imgMove1 3s infinite;
    animation-timing-function: ease-in-out;
}

.img4{    
    left: 420px;
    top: 200px;
    animation: imgMove1 4s infinite;
    animation-timing-function: ease-in-out;
}

.img5{    
    left: 450px;
    top: 180px;
    animation: imgMove1 2s infinite;
    animation-timing-function: ease-in-out;
}

.img6{    
    left: 495px;
    top: 140px;
    animation: imgMove1 2s infinite;
    animation-timing-function: ease-in-out;
}

.left1{
    left: 80px;
    top: 100px;
    animation: imgMoveColor 1.4s infinite;
    animation-timing-function: ease-in-out;
}

.left2{
    left: 125px;
    top: 125px;
    animation: imgMoveColor 1.8s infinite;
    animation-timing-function: ease-in-out;
}

.left3{
    left: 130px;
    top: 80px;
    animation: imgMoveColor 1.6s infinite;
    animation-timing-function: ease-in-out;
}

.left4{
    left: 80px;
    top: 140px;
    animation: imgMoveColor 1.2s infinite;
    animation-timing-function: ease-in-out;
}

.left5{
    left: 145px;
    top: 130px;
    animation: imgMoveColor 2s infinite;
    animation-timing-function: ease-in-out;
}

.left6{
    left: 100px;
    top: 100px;
    animation: imgMoveColor 2.1s infinite;
    animation-timing-function: ease-in-out;
}

.left7{
    left: 115px;
    top: 150px;
    animation: imgMoveColor 2.5s infinite;
    animation-timing-function: ease-in-out;
}

.right1{
    right: 80px;
    bottom: 180px;
    animation: imgMoveColor 1.4s infinite;
    animation-timing-function: ease-in-out;
}

.right2{
    right: 125px;
    bottom: 205px;
    animation: imgMoveColor 1.8s infinite;
    animation-timing-function: ease-in-out;
}

.right3{
    right: 130px;
    bottom: 160px;
    animation: imgMoveColor 1.6s infinite;
    animation-timing-function: ease-in-out;
}

.right4{
    right: 80px;
    bottom: 220px;
    animation: imgMoveColor 1.2s infinite;
    animation-timing-function: ease-in-out;
}

.right5{
    right: 145px;
    bottom: 210px;
    animation: imgMoveColor 2s infinite;
    animation-timing-function: ease-in-out;
}

.right6{
    right: 100px;
    bottom: 180px;
    animation: imgMoveColor 2.1s infinite;
    animation-timing-function: ease-in-out;
}

.right7{
    right: 115px;
    bottom: 230px;
    animation: imgMoveColor 2.5s infinite;
    animation-timing-function: ease-in-out;
}

@keyframes imgMove1{
    0% {
        opacity: 0;
        transform: scale(0.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        transform: translateY(-1000%);
    }
}

@keyframes Upmove {
    0% {
        -webkit-transform: translateY(-5%);
        transform: translateY(-5%);
    }
    50% {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
    100% {
        -webkit-transform: translateY(-5%);
        transform: translateY(-5%);
    }
}

@keyframes UpmoveMore {
    0% {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
    50% {
        -webkit-transform: translateY(-20%);
        transform: translateY(-20%);
    }
    100% {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);        
    }
}

@keyframes imgMoveColor{
    0% {
        opacity: 1;
        transform: scale(1.5);
        transform: translateY(0%);
    }
    100% {
        opacity: 0;
        transform: scale(0.1);
        transform: translateY(-700%);
    }
}

@media (max-width: 1440px) {
    .animation {
        width: 670px;
        height: 470px;
        background-size: 100%;
    }

    .backplane{
        width: 140px;
        height: 170px;
    }

    .div_line{
        width: 140px;
        height: 50px;
        right: 50px;
        top: 170px;
    }

    .circle{
        left: 120px;
        top: 200px;
        width: 35px;
        height: 25px;
    }

    .bubble{
        width: 8px;
        height: 7px;
    }

    .colorBubble{
        width: 6px;
        height: 6px;
    }

    .img1{        
        left: 350px;
        top: 150px;
    }

    .img2{
        left: 330px;
        top: 165px;
    }

    .img3{
        left: 375px;
        top: 180px;
    }

    .img4{    
        left: 340px;
        top: 100px;
    }

    .img5{    
        left: 320px;
        top: 130px;
    }

    .img6{    
        left: 365px;
        top: 90px;
    }

    .left1{
        left: 60px;
        top: 70px;
    }
    
    .left2{
        left: 105px;
        top: 95px;
    }
    
    .left3{
        left: 110px;
        top: 50px;
    }
    
    .left4{
        left: 60px;
        top: 110px;
    }
    
    .left5{
        left: 125px;
        top: 100px;
    }
    
    .left6{
        left: 80px;
        top: 70px;
    }
    
    .left7{
        left: 95px;
        top: 120px;
    }
    
    .right1{
        right: 60px;
        bottom: 180px;
    }
    
    .right2{
        right: 105px;
        bottom: 205px;
    }
    
    .right3{
        right: 110px;
        bottom: 160px;
    }
    
    .right4{
        right: 60px;
        bottom: 220px;
    }
    
    .right5{
        right: 125px;
        bottom: 210px;
    }
    
    .right6{
        right: 80px;
        bottom: 180px;
    }
    
    .right7{
        right: 95px;
        bottom: 230px;
    }
}