为什么星星不闪动

来源:7-2 星星与水波

慕用3882092

2017-03-17 11:14

/*背景图*/

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

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


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

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

/*小女孩*/

.girl {
   background: url(http://img.mukewang.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://img.mukewang.com/55ade1e000010f2908540027.png) -261px -0px no-repeat;
}

.water_2 {
   width: 161px;
   height: 9px;
   top: 30%;
   left: 45%;
   background: url(http://img.mukewang.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://img.mukewang.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://img.mukewang.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://img.mukewang.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的代码,求大神指点

写回答 关注

3回答

  • plough
    2018-05-04 19:49:53

    -webkit-animation-duration: 3s;
       -moz-animation-duration: 3s;

    放到 .stars > li 里面去

  • zwcfight123
    2017-05-12 20:54:48

    swipe.js里面find(li)对这些li有影响

  • qq_她说爱不解释_0
    2017-04-25 09:41:00

    你装的假惺惺

H5+JS+CSS3实现七夕言情

为七夕节准备的H5+JS+CSS3特效案例,由浅入深案例拆分讲解

211524 学习 · 540 问题

查看课程

相似问题