                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /H5+JS+CSS3实现七夕言情

为什么星星不闪动

/*背景图*/

.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;}
}