css3蒲公英飘动效果_CSS3飘动的云动画特效

【实例简介】

手写动画特效天空中飘动的云，适合场景跟流动登陆等效果

【实例截图】

【核心代码】

.satic-area {

position: relative;

width: 100%;

height: 100%;

background: url(img/poster-about.jpg) no-repeat 100% 100%;

background-size: cover;

}

.dynamic-area1   {

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

background: url(img/poster-drop-animate2.png) repeat-x 0px 0px;

background-size: cover;

animation: posterDrop1 6000s linear infinite;

}

@keyframes posterDrop1 {

from { background-position: 0 0; }

to { background-position: 4000% 0; }

}

.dynamic-area2   {

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

background: url(img/poster-drop-animate1.png) repeat-x 0px 0px;

background-size: cover;

animation: posterDrop2 8000s linear infinite;

}

@keyframes posterDrop2 {

from { background-position: 0 0; }

to { background-position: 30000% 0; }

}