这是两张图片组成的,无间断从左向右循环移动的云朵!
<div id="stage_advan_Group" class="stage_advan_Group_id" >
<div id="stage_advan_yun2_02Copy" class="stage_advan_yun2_02Copy_id" ></div>
<div id="stage_advan_yun2_02" class="stage_advan_yun2_02_id" ></div>
</div>
#stage_advan_Group {
position: absolute;
margin: 0px;
left: 0px;
bottom: 0px;
width: 200%;
height: 107px;
right: auto;
-webkit-animation: 6s move infinite linear;
}
#stage_advan_yun2_02Copy {
position: absolute;
margin: 0px;
left: 1853px;
top: 0px;
width: 100%;
height: 107px;
right: auto;
bottom: auto;
background-image: url(../image/yun2_02.png);
background-color: rgba(0, 0, 0, 0);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: 0px 0px;
float: left;
}
#stage_advan_yun2_02 {
position: absolute;
margin: 0px;
left: 0px;
top: 0px;
width: 100%;
height: 107px;
right: auto;
bottom: auto;
background-image: url(../image/yun2_02.png);
background-color: rgba(0, 0, 0, 0);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: 0px 0px;
}
@-webkit-keyframes move {
0% {
left: 0;
}
100% {
left: -100%;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: -100%;
}
}
重点在于-webkit-animation: 6s move infinite linear;这个css3样式