/*背景圖*/

.c_background {
? ?width: 100%;
? ?height: 100%;
? ?background-size: 100% 100%;
? ?position: absolute;
}

.c_background_top{
? ?width: 100%;
? ?height: 71.6%;
? ?background-image: url("http://img1.sycdn.imooc.com//55ade19b0001d92c14410645.png");
? ?background-size: 100% 100%;
}


.c_background_middle{
? ?width: 100%;
? ?height: 13.1%;
? ?background-image: url("http://img1.sycdn.imooc.com//55ade1b3000135c114410118.png");
? ?background-size: 100% 100%;
}

.c_background_bottom{
? ?width: 100%;
? ?height: 15.3%;
? ?background-image: url("http://img1.sycdn.imooc.com//55ade1c30001db5d14410138.png");
? ?background-size: 100% 100%;
}

/*小女孩*/

.girl {
? ?background: url(http://img1.sycdn.imooc.com//55ade30d000100dc10570291.png) -755px -0px no-repeat;
? ?position: absolute;
? ?right: 40%;
? ?top: 37%;
? ?width: 151px;
? ?height: 291px;
}

/*橋*/

.bridge-bottom {
? ?position: absolute;
? ?width: 41%;
? ?height: 24%;
? ?left: 29.5%;
? ?top: 76%;
? ?overflow: hidden;
? ?/* ? ?-webkit-transform:perspective(8px) rotateX(.8deg); */
}
/*波浪水布局*/

.water {
? ?width: 100%;
? ?height: 100%;
}

.water_1,
.water_2,
.water_3,
.water_4 {
? ?width: 100%;
? ?position: absolute;
? ?height: 50%;
? ?-webkit-animation-name: shake;
? ?-webkit-animation-duration: 40s;
? ?-webkit-animation-direction: alternate;
? ?-webkit-animation-timing-function: linear;
? ?-webkit-animation-iteration-count: infinite;

? ?-moz-animation-name: shake;
? ?-moz-animation-duration: 40s;
? ?-moz-animation-direction: alternate;
? ?-moz-animation-timing-function: linear;
? ?-moz-animation-iteration-count: infinite;
}

.water_1 {
? ?width: 131px;
? ?height: 15px;
? ?top: 13%;
? ?left: 35%;
? ?background: url(http://img1.sycdn.imooc.com//55ade1e000010f2908540027.png) -261px -0px no-repeat;
}

.water_2 {
? ?width: 161px;
? ?height: 9px;
? ?top: 30%;
? ?left: 45%;
? ?background: url(http://img1.sycdn.imooc.com//55ade1e000010f2908540027.png) -693px -0px no-repeat;

? ?-webkit-animation-delay: 2s;
? ?-moz-animation-delay: 2s;
}

.water_3 {
? ?width: 261px;
? ?height: 29px;
? ?top: 50%;
? ?left: 15%;
? ?background: url(http://img1.sycdn.imooc.com//55ade1e000010f2908540027.png) -0px -0px no-repeat;
? ?-webkit-animation-delay: 1s;
? ?-moz-animation-delay: 1s;
}

.water_4 {
? ?width: 301px;
? ?height: 12px;
? ?top: 75%;
? ?left: 30%;
? ?background: url(http://img1.sycdn.imooc.com//55ade1e000010f2908540027.png) -392px -0px no-repeat;
? ?-webkit-animation-delay: 3s;
? ?-moz-animation-delay: 3s;
}
@-webkit-keyframes shake {
? ?0%,100%{-webkit-transform: translate3d(0,0,0)}
? ?10%,30%,50%,70%,90%{-webkit-transform: translate3d(-30px,0px,0px)}
? ?20%,40%,60%,80%{-webkit-transform: translate3d(30px,0px,0px)}
}
@-moz-keyframes shake {
? ?0%,100%{-moz-transform: translate3d(0,0,0)}
? ?10%,30%,50%,70%,90%{-webkit-transform: translate3d(-30px,0px,0px)}
? ?20%,40%,60%,80%{-webkit-transform: translate3d(30px,0px,0px)}
}



/*星星*/

.stars {
? ?width: 100%;
? ?height: 100%;
? ?position: absolute;
}

.stars > li {
? ?position: absolute;
? ?width: 30px;
? ?height: 31px;
? ?background-image: url("http://img1.sycdn.imooc.com//55ade1fe00016b8900300031.png");

? ?-webkit-animation-name: flash;
? ?-webkit-animation-timing-function: ease-in-out;
? ?-webkit-animation-iteration-count: infinite;
? ?-webkit-animation-direction: alternate;
? ?-moz-animation-name: flash;
? ?-moz-animation-timing-function: ease-in-out;
? ?-moz-animation-iteration-count: infinite;
? ?-moz-animation-direction: alternate;

}

.stars1 {
? ?top: 20%;
? ?left: 30%;
? ?-webkit-animation-duration: 3s;
? ?-moz-animation-duration: 3s;
}

.stars2 {
? ?top: 15%;
? ?left: 20%;
? ?-webkit-animation-duration: 3s;
? ?-moz-animation-duration: 3s;
}

.stars3 {
? ?top: 25%;
? ?left: 85%;
? ?-webkit-animation-duration: 3s;
? ?-moz-animation-duration: 3s;
}

.stars4 {
? ?top: 30%;
? ?left: 70%;
? ?-webkit-animation-duration: 3s;
? ?-moz-animation-duration: 3s;
}

.stars5 {
? ?top: 25%;
? ?left: 20%;
? ?-webkit-animation-duration: 3s;
? ?-moz-animation-duration: 3s;
}

.stars6 {
? ?top: 10%;
? ?left: 65%;
? ?-webkit-animation-duration: 3s;
? ?-moz-animation-duration: 3s;
}
@-webkit-keyframes flash {
? ?0%,50%,100%{opacity: 1;}
? ?25%,75%{opacity: 0;}
}
@-moz-keyframes flash {
? ?0%,50%,100%{opacity: 1;}
? ?25%,75%{opacity: 0;}
}

這是pagC的代碼，求大神指點