慕用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的代码,求大神指点
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
放到 .stars > li 里面去
swipe.js里面find(li)对这些li有影响
你装的假惺惺
H5+JS+CSS3实现七夕言情
211526 学习 · 540 问题
相似问题