css3如何实现飘动的云朵动画？本篇文章小编给大家分享一下CSS3实现飘动的云朵动画代码，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

运行效果

html

CSS3 Cloud Animations By Montana Flynn

css

html, body {

margin: 0;

height: 100%

}

.sky {

height: 480px;

background: #007fd5;

position: relative;

overflow: hidden;

-webkit-animation: sky_background 50s ease-out infinite;

-moz-animation: sky_background 50s ease-out infinite;

-o-animation: sky_background 50s ease-out infinite;

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-o-transform: translate3d(0, 0, 0)

}

.moon {

background: url("http://i.imgur.com/wFXd68N.png");

position: absolute;

left: 0;

height: 300%;

width: 300%;

-webkit-animation: moon 50s linear infinite;

-moz-animation: moon 50s linear infinite;

-o-animation: moon 50s linear infinite;

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-o-transform: translate3d(0, 0, 0)

}

.clouds_one {

background: url("http://www.scri8e.com/stars/PNG_Clouds/zc06.png?filename=./zc06.png&w0=800&h0s=289&imgType=3&h1=50&w1=140");

position: absolute;

left: 0;

top: 0;

height: 100%;

width: 300%;

-webkit-animation: cloud_one 50s linear infinite;

-moz-animation: cloud_one 50s linear infinite;

-o-animation: cloud_one 50s linear infinite;

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-o-transform: translate3d(0, 0, 0)

}

.clouds_two {

background: url("http://freepngimages.com/wp-content/uploads/2016/02/clouds-transparent-background-2.png");

position: absolute;

left: 0;

top: 0;

height: 100%;

width: 300%;

-webkit-animation: cloud_two 75s linear infinite;

-moz-animation: cloud_two 75s linear infinite;

-o-animation: cloud_two 75s linear infinite;

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-o-transform: translate3d(0, 0, 0)

}

.clouds_three {

background: url("http://montanaflynn.me/lab/css-clouds/images/cloud_three.png");

position: absolute;

left: 0;

top: 0;

height: 100%;

width: 300%;

-webkit-animation: cloud_three 100s linear infinite;

-moz-animation: cloud_three 100s linear infinite;

-o-animation: cloud_three 100s linear infinite;

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-o-transform: translate3d(0, 0, 0)

}

@-webkit-keyframes sky_background {

0% {

background: #007fd5;

color: #007fd5

}

50% {

background: #000;

color: #a3d9ff

}

100% {

background: #007fd5;

color: #007fd5

}

}

@-webkit-keyframes moon {

0% {

opacity: 0;

left: -200% -moz-transform: scale(0.5);

-webkit-transform: scale(0.5);

}

50% {

opacity: 1;

-moz-transform: scale(1);

left: 0% bottom: 250px;

-webkit-transform: scale(1);

}

100% {

opacity: 0;

bottom: 500px;

-moz-transform: scale(0.5);

-webkit-transform: scale(0.5);

}

}

@-webkit-keyframes cloud_one {

0% {

left: 0

}

100% {

left: -200%

}

}

@-webkit-keyframes cloud_two {

0% {

left: 0

}

100% {

left: -200%

}

}

@-webkit-keyframes cloud_three {

0% {

left: 0

}

100% {

left: -200%

}

}

@-moz-keyframes sky_background {

0% {

background: #007fd5;

color: #007fd5

}

50% {

background: #000;

color: #a3d9ff

}

100% {

background: #007fd5;

color: #007fd5

}

}

@-moz-keyframes moon {

0% {

opacity: 0;

left: -200% -moz-transform: scale(0.5);

-webkit-transform: scale(0.5);

}

50% {

opacity: 1;

-moz-transform: scale(1);

left: 0% bottom: 250px;

-webkit-transform: scale(1);

}

100% {

opacity: 0;

bottom: 500px;

-moz-transform: scale(0.5);

-webkit-transform: scale(0.5);

}

}

@-moz-keyframes cloud_one {

0% {

left: 0

}

100% {

left: -200%

}

}

@-moz-keyframes cloud_two {

0% {

left: 0

}

100% {

left: -200%

}

}

@-moz-keyframes cloud_three {

0% {

left: 0

}

100% {

left: -200%

}

}